Getting Started

Prerequisites

You need an existing React or Next.js project with the following set up:

• Node.js 18+
• A Next.js or React project
• Tailwind CSS v4 (uses @import "tailwindcss" syntax)
• shadcn/ui initialized — run npx shadcn init if not yet set up

npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npx shadcn init

1. Install the n3wth style

Start by installing the base style. This sets up the design tokens — colors, typography, and border radius — used by all n3wth components.

npx shadcn add https://kit.newth.ai/r/n3wth.json

This updates your globals.css with CSS variables for the full n3wth color palette and adds the cn utility.

2. Install components

Use the shadcn CLI to add individual components from the registry. Each component is copied directly into your project so you own and can modify the source.

npx shadcn add https://kit.newth.ai/r/button.json
npx shadcn add https://kit.newth.ai/r/card.json
npx shadcn add https://kit.newth.ai/r/input.json

Components are installed to components/ui/ by default. See the component gallery for all available components and their install commands.

3. Use your first component

Import and use components like any React component:

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

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get started</Button>
        <Button variant="secondary">Learn more</Button>
      </CardContent>
    </Card>
  )
}

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button isLoading>Loading...</Button>

import { Input } from '@/components/ui/input'
import { Search } from 'lucide-react'

<Input
  placeholder="Search..."
  leftIcon={<Search className="h-4 w-4" />}
/>
<Input
  placeholder="Email"
  type="email"
  error="Please enter a valid email"
/>

4. Set up AI context packs

Context packs teach your AI coding tool about the n3wth design system. With them loaded, generated code uses your components correctly — right variants, right props, right patterns.

curl -o .cursorrules https://kit.newth.ai/ai/.cursorrules

curl -o CLAUDE.md https://kit.newth.ai/ai/CLAUDE.md

Use components from https://kit.newth.ai/r — build a settings page with Card and Input

Registry URL

All components are available at:

https://kit.newth.ai/r

Append <name>.json for a specific component: https://kit.newth.ai/r/badge.json

Full registry manifest: https://kit.newth.ai/r/registry.json

Troubleshooting

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

@import "tailwindcss";

npm install lucide-react class-variance-authority clsx tailwind-merge