GuidelinesGuidelinesEverything on this site is installable with one command via the chandra-asri-ui CLI — a shadcn-style tool that copies real source files into your own project instead of adding a node_modules dependency.
No install step — npx fetches the latest version of chandra-asri-ui and runs it directly.
npx chandra-asri-ui add theme fonts base-button badge input textarea container basic-cardThat copies the design tokens, Satoshi font files, the base components, and one card template into your project in one shot. Every card pattern (content list, feed/article, dashboard, pricing/featured) is its own item too — see what else is available:
npx chandra-asri-ui listPrefer to install one thing at a time, or only need part of this bundle:
1. Design tokens — colors, radius, gradients, shadows
npx chandra-asri-ui add themeThen import it from your own globals.css: @import "./chandra-asri-theme.css";
2. The Satoshi font
npx chandra-asri-ui add fontsThen wire it up with next/font/local in your root layout — the CLI prints the exact snippet after it runs.
3. Components you actually need
npx chandra-asri-ui add base-button
npx chandra-asri-ui add dashboard-cardEach component pulls in its own dependency, utils (the cn() helper), automatically.
4. Install the npm packages it asks for
After copying files, the CLI prints exactly which npm packages each component needs, e.g.:
npm install clsx tailwind-merge class-variance-authorityNo CLI, no problem — every component page under Base Components and Components has a "Source Code" tab with a copy button. Copy the file contents into the path shown in its badge (e.g. app/components/ui/button.tsx) and install the same npm dependencies listed on that page.