{
  "title": "Getting started",
  "description": "Install and render your first component in under five minutes.",
  "url": "/docs/getting-started",
  "since": "0.1.0",
  "tags": [
    "install",
    "setup"
  ],
  "platform": "both",
  "source": "---\ntitle: Getting started\ndescription: Install and render your first component in under five minutes.\nsince: 0.1.0\ntags: [install, setup]\nplatform: both\n---\n\nimport { Install } from '@/components/install';\n\n## Install\n\n<Install packages=\"@nori-ui/core\" />\n\nOptional — any icon library works; Lucide is recommended:\n\n<Install packages={['lucide-react', 'lucide-react-native']} />\n\n## Tailwind preset\n\nAdd the `@nori-ui/tokens` preset to your `tailwind.config.ts`. The example below targets a Next.js App Router project; adjust the `content` globs to match your file layout.\n\n```ts\nimport type { Config } from 'tailwindcss';\nimport noriPreset from '@nori-ui/tokens/tailwind-preset';\n\nexport default {\n    presets: [noriPreset],\n    content: ['./app/**/*.{ts,tsx,mdx}', './components/**/*.{ts,tsx}'],\n} satisfies Config;\n```\n\n## Provider\n\nThe library renders with sensible defaults out of the box, so the provider is optional. Wrap your app once if you want to customize theme, i18n, or semantic icons.\n\n```tsx\n'use client';\nimport { Button } from '@nori-ui/core';\nimport { NoriProvider } from '@nori-ui/core/client';\n\nexport default function App() {\n    return (\n        <NoriProvider>\n            <Button>Hello from nori-ui</Button>\n        </NoriProvider>\n    );\n}\n```\n\n## First component\n\n```tsx\nimport { Button, VStack } from '@nori-ui/core';\n\nexport default function Demo() {\n    return (\n        <VStack gap={3}>\n            <Button>Primary</Button>\n            <Button variant=\"secondary\">Secondary</Button>\n        </VStack>\n    );\n}\n```\n\nTo browse all components interactively — live controls, variant switcher, a11y panel — open [Storybook](/storybook).\n"
}