Next.js UI library constructor

Build a production UI kit from curated blocks, tokens, and exportable structure.

Choose blocks, tune the design system, preview the app surface, then export a clean component map for a Next.js package.

Blocks

60

Selected

6

Files

51

Library preview

@acme/ui / 6 blocks

Live

Acme UI

Next.js component kit

Preview surface

A polished product screen generated from your chosen blocks.

PrimarySecondary
Command navbar
SaaS hero canvas
Data table
Fieldset system
AI chat panel

Generated structure

@acme/ui

app/

layout.tsx

globals.css

packages/ui/

tokens/

colors.ts

radius.ts

density.ts

components/

navigation/

command-navbar.tsx

hero/

saas-hero-canvas.tsx

data/

data-table.tsx

forms/

fieldset-system.tsx

ai/

ai-chat-panel.tsx

feedback/

toast-system.tsx

Design token output

{
  "name": "@acme/ui",
  "framework": "Next.js App Router",
  "style": "Tailwind CSS + typed design tokens",
  "theme": "Noir violet",
  "density": "Comfortable",
  "blocks": [
    "nav-command",
    "hero-saas",
    "data-table",
    "forms-fieldset",
    "ai-chat",
    "feedback-toast"
  ],
  "dependencies": [
    "cmdk",
    "tanstack-table"
  ],
  "files": 51,
  "tokens": 95
}