nessra ui

A beautiful component library built with Radix UI and Tailwind CSS. Install components directly into your project.

|

Quick Start

Install a component

bash
npx shadcn@latest add https://nessra-ui.vercel.app/r/button.json

With registry namespace (recommended)

Add to your components.json:

json
{  "registries": {    "@nessra-ui": "https://nessra-ui.vercel.app/r/{name}.json"  }}

Then install components:

bash
npx shadcn@latest add @nessra-ui/buttonnpx shadcn@latest add @nessra-ui/card

Development

bash
# Install dependenciespnpm install
# Start dev serverpnpm dev
# Buildpnpm build
# Run all checkspnpm check

Project Structure

nessra-ui/├── registry/new-york/       # Component source (single source of truth)│   ├── ui/                  # UI components│   ├── hooks/               # Custom hooks│   └── lib/                 # Utilities (utils.ts)├── public/r/                # Generated JSON files (shadcn build)├── content/docs/            # MDX documentation│   └── components/          # Per-component docs├── registry.json            # Registry manifest└── components.json          # shadcn config

Adding a New Component

Step 1: Install the component

bash
npx shadcn@latest add <component-name>

The component will be installed in registry/new-york/ui/.

Step 2: Add to registry.json

Open registry.json and add an entry to the items array:

json
{  "name": "component-name",  "type": "registry:ui",  "title": "Component Name",  "description": "Short description of the component.",  "dependencies": ["@radix-ui/react-xxx"],  "registryDependencies": ["utils"],  "files": [    {      "path": "registry/new-york/ui/component-name.tsx",      "type": "registry:ui"    }  ]}

Notes:

  • dependencies: npm packages required (check component imports)
  • registryDependencies: other registry components required (e.g., ["utils", "button"])

Step 3: Rebuild the registry

bash
pnpm registry:build

This generates public/r/component-name.json.

Step 4: Create MDX documentation

Create content/docs/components/component-name.mdx:

mdx
---title: Component Namedescription: Short description of the component.---
## Installation
\`\`\`bashnpx shadcn@latest add https://nessra-ui.vercel.app/r/component-name.json\`\`\`
## Usage
\`\`\`tsximport { ComponentName } from "@/components/ui/component-name"\`\`\`
\`\`\`tsx
<ComponentName>Example</ComponentName>\`\`\`

Step 5: Add to navigation

Open content/docs/components/meta.json and add the component name:

json
{  "title": "Components",  "pages": ["button", "card", "component-name"]}

Step 6: Test

bash
# Rebuild and verifypnpm build
# Test installation from another projectnpx shadcn@latest add http://localhost:3000/r/component-name.json

Commands

CommandDescription
pnpm devStart development server
pnpm buildFull build (auto: registry + next build)
pnpm checkLint + format check + types + registry
pnpm prereleaseFull validation before release
pnpm registry:generateGenerate registry/__index__.tsx
pnpm registry:buildGenerate public/r/*.json files
pnpm registry:validateType-check registry components

Workflow

┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐│   Develop   │────▶│   Commit    │────▶│   CI + Deploy │──▶│   Release   │└─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘    pnpm dev         git commit          GitHub Actions      ./scripts/release.sh                     (lint-staged)       Vercel auto

1. Development

bash
pnpm dev

2. Commit

bash
git add .git commit -m "feat(components): add tooltip"# └─ Pre-commit hook: lint-staged (ESLint + Prettier)

3. Push (CI + Deploy)

bash
git push# └─ GitHub Actions: lint → format → types → registry → build# └─ Vercel: auto-deploy on success

4. Release

bash
./scripts/release.sh 0.7.0# └─ Updates CHANGELOG.md and package.json# └─ Creates commit, tag, and GitHub release

Stack

  • - Documentation
  • - Components
  • - Primitives

License

MIT [blocked]