Start

Getting it in.

Two ways in: the shadcn CLI, which most people use, or copying the files by hand. Both give you the same plain source.

Requirements

React 18 or 19, with TypeScript recommended. JavaScript projects can strip the types.
Any bundler that handles CSS imports: Next.js, Vite, Remix, Astro with React, or Parcel.
Tailwind CSS v3.4+ or v4, only for assets marked Tailwind.

With the CLI

Run this from your project root. The CLI asks before writing, and puts files in components/sundae/.

$npx shadcn@latest add https://sundaeui.dev/r/fold-accordion.json

No components.json yet? The CLI offers to create one. For Pro assets, read authenticated installs.

By hand

Open the asset page and switch the stage to Code.
Copy every file tab into components/sundae/, keeping the file names. CSS files are imported by the component.
Import the component where you need it.

Next.js App Router

Interactive assets start with 'use client', so you can render them from Server Components directly. Global CSS imports from components are supported in the App Router.

app/verify/page.tsx

import { OtpField } from '@/components/sundae/otp-field'

export default function VerifyPage() {
  return <OtpField autoFocus label="Verification code" />
}

Vite

No setup is needed. If you use the @/ alias from the examples, map it in vite.config.ts and tsconfig.json, or change the imports to relative paths.