This guide takes you from an empty file to a styled, responsive card in five minutes with Nakshora 2.0.

Step 1 — Get the framework#

Nakshora 2.0 installs from npm:

terminal
bash
npm install nakshora
build.mjs — generate your stylesheet
js
import { CSSGenerator } from 'nakshora';

const generator = new CSSGenerator();
const css = generator.generate({ minify: true });

Step 2 — Compose your first UI#

Every visual decision is a class. Copy this card into your project:

index.html
html
<div class="max-w-sm mx-auto mt-16 glass p-6 rounded-xl shadow-lg">
  <h2 class="text-lg font-bold text-slate-900 dark:text-white">Nakshora</h2>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    Utility-first styling, zero ceremony.
  </p>
  <button class="mt-4 px-5 py-2.5 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 active:scale-95 transition shadow-md">
    Get started
  </button>
</div>

Step 3 — Make it responsive#

Prefix any utility with a screen to apply it from that breakpoint up. Nakshora 2.0 ships 6 screens (xs:, sm:, md:, lg:, xl:, 2xl:):

html
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- one column on phones, two on large phones, four on laptops+ -->
</div>

Next steps#

InstallationEvery way to add Nakshora to a project.Utility-first methodologyThink in utilities.Utilities referenceEvery class, documented.