Installation
Add components one file at a time with the shadcn CLI and own the source, or install the package and take every update.
With the shadcn CLI
In a React project with Tailwind CSS v4 and a components.json (run npx shadcn@latest init first), add any component by its URL. The CLI copies the source into components/ikada, the helpers into components/ikada/lib (your stock shadcn files are never touched), installs @base-ui/react and the other dependencies, and writes the ikada theme into your CSS.
npx shadcn@latest add https://sproutboat.com/ikada/r/button.jsonEverything at once
Every component, helper and the theme in one go:
npx shadcn@latest add https://sproutboat.com/ikada/r/all.jsonShort names
Add the registry to components.json once:
"registries": {
"@ikada": "https://sproutboat.com/ikada/r/{name}.json"
}Then use short names:
npx shadcn@latest add @ikada/button @ikada/toastAs a package
The Sproutboat dashboards use the package, so they take every update. It ships compiled ESM with types and "use client"kept, so it works from Server Components and needs no transpilePackages. Install the peers too:@base-ui/react, and @tanstack/charts if you use the charts.
npm install @sproutboat/ikada/* app.css */
@import "tailwindcss";
@import "@sproutboat/ikada/theme.css";
/* theme.css already tells Tailwind to scan the compiled components */Fonts and dark mode
The theme uses Figtree and JetBrains Mono when they are installed and falls back to the system faces otherwise. Light is the default; dark is a dark class on <html> (shadcn and next-themes attribute="class"), for the package and the shadcn theme alike. See Theming and tokens.