NasiUI

The next-generation open-source UI framework for React and Next.js.
Beautiful components. Copy-paste ownership. Production-ready from day one.

Website · Documentation · Registry · Contributing

---

Vision

NasiUI is built for teams who want the polish of a design system without the lock-in of a traditional component library. Every component lives in your codebase — styled with Tailwind, accessible by default, and composable like LEGO.

We believe great UI tooling should feel as considered as the products it helps you ship: fast to adopt, easy to customize, and impossible to outgrow.

Quick start

Install the CLI

pnpm dlx @nasiui/cli init

Add a component

npx @nasiui/cli add button
npx @nasiui/cli add card dialog input

Use in your app

import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to NasiUI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get started</Button>
      </CardContent>
    </Card>
  )
}

Monorepo structure

nasiUI/
├── apps/
│   ├── website/        Marketing site
│   ├── docs/           Documentation
│   ├── playground/     Live component playground
│   └── registry/       Public component registry API
├── packages/
│   ├── ui/             Core component library
│   ├── cli/            npx @nasiui/cli
│   ├── themes/         Design tokens & presets
│   ├── hooks/          React hooks
│   ├── utils/          Shared utilities
│   ├── templates/      Starter template metadata
│   ├── icons/          NasiLogo + curated Lucide icons
│   ├── animations/     Motion-powered animation primitives
│   ├── ai/             AI page builder (template matching)
│   └── vscode-extension/  VS Code snippets & commands
├── examples/
│   └── next-app/       Minimal integration example
└── tooling/
    └── typescript/     Shared TS configs

Development

Requirements: Node.js 20+, pnpm 9+

git clone https://github.com/nasiui/nasiui.git
cd nasiui
pnpm install
pnpm dev

Command	Description
pnpm dev	Start all apps in parallel
pnpm dev:website	Marketing site (port 3000)
pnpm dev:docs	Documentation (port 3001)
pnpm dev:playground	Playground (port 3002)
pnpm dev:registry	Registry API (port 3003)
pnpm build	Build all packages and apps
pnpm test	Run unit + CLI smoke tests
pnpm test:e2e	Playwright smoke (website + docs)
pnpm typecheck	Type-check the monorepo
pnpm cli	Run the NasiUI CLI locally

Production readiness status: see PRODUCTION.md.
Publishing to npm: see PUBLISH.md. Releases use Changesets.

Registry

The public registry serves shadcn-style JSON definitions for CLI installs:

GET /r/index.json          List all components
GET /r/button.json         Component source + metadata
GET /api/registry          Registry index
GET /api/health            Health check

Run locally:

pnpm dev:registry
# http://localhost:3003

Generate registry artifacts from packages/ui:

pnpm --filter @nasiui/registry registry:generate

Packages

Package	Description
@nasiui/ui	Radix-based React components
@nasiui/cli	Scaffold projects and add components
@nasiui/templates	Template metadata and page structures
@nasiui/icons	NasiLogo + curated Lucide re-exports
@nasiui/ai	Client-side page generator (template matching)
@nasiui/themes	Theme presets and CSS variables
@nasiui/hooks	Shared React hooks
@nasiui/utils	cn() and helpers
@nasiui/animations	Motion-powered animation primitives
nasiui (VS Code)	Snippets and CLI/docs commands

AI page builder

@nasiui/ai matches prompts to templates and returns generated React source:

import { generatePage, AI_PROMPTS } from '@nasiui/ai'

const page = generatePage('Build a SaaS landing page with pricing')
console.log(page.source) // TSX string

Templates

@nasiui/templates exports metadata for 20+ starter layouts:

import { TEMPLATES, getTemplate } from '@nasiui/templates'

const saas = getTemplate('saas')
console.log(saas?.pages, saas?.features)

Examples

See examples/next-app for a minimal Next.js integration with a self-contained Button component — no monorepo wiring required.

Contributing

We welcome contributions. Please read CONTRIBUTING.md before opening a pull request.

License

MIT © NasiUI