Skip to content

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.json

Everything at once

Every component, helper and the theme in one go:

npx shadcn@latest add https://sproutboat.com/ikada/r/all.json

Short 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/toast

As 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.