How Sundae works.
Every Sundae asset is a small, readable set of files you own. There is no package to update and no runtime to adopt: you copy the source into your project and change it like your own code.
Anatomy of an asset
- One component file in TypeScript and React 18 or later, marked
'use client'where it needs browser APIs. - Styling is either a small CSS file with prefixed class names and custom properties, or Tailwind utility classes. Each asset page says which.
- No runtime dependencies. Motion uses CSS and small
requestAnimationFrameloops. Canvas effects pause offscreen. - Documentation covering props, a usage example, accessibility notes and customization hooks.
Quick start
Pick an asset in the library and install it with the shadcn CLI. It works in any React project, not only shadcn/ui ones:
npx shadcn@latest add https://sundaeui.dev/r/otp-field.jsonFiles land in components/sundae/. Import the component and follow the usage example on its page. Prefer copying by hand? Every free asset’s source is on its page, under the stage’s Code view.
Free and Pro
Every asset can be previewed by anyone. Free assets can be copied or installed without an account. Pro assets are installed with a personal token from your account, and the server checks your subscription on every request. See CLI & registry and the license.
Where next
- Installation: requirements, frameworks and manual setup.
- Theming: custom properties, dark mode and Tailwind.
- MCP server: let a coding agent search and install for you.