Installation
Summit installs in three steps, through the shadcn CLI and one npm package.
Summit installs into a React project that runs Tailwind CSS v4 and has a components.json, the file that the shadcn CLI reads. If the project doesn’t have one, run shadcn’s init to create it.
npx shadcn@latest initSteps
Run the first two steps once for a product, and repeat the third for each component.
Add the Registry
Add Summit to registries in components.json. The CLI replaces {name} with the name of the item it fetches.
{
"registries": {
"@summit": "https://summit.bysolstice.com/r/web/{name}.json"
}
}Leave rtl out of the same file, or set it to false. See Right-to-Left for the reason.
Install the Theme
npm install @bysolstice/tokensThe package has one file, tokens.css. It installs tw-animate-css, shadcn, and the Hanken Grotesk Variable font files as dependencies, and it declares tailwindcss at ^4.3.3 as a peer dependency.
Import the file at the top of the product’s global stylesheet. tokens.css imports Tailwind itself, so it replaces @import 'tailwindcss'.
@import '@bysolstice/tokens/tokens.css';init writes shadcn’s own values for the same variables to that stylesheet. Remove them because a declaration that follows the import overrides tokens.css.
Add a Component
npx shadcn@latest add @summit/buttonInstalled Files
An item’s type decides which alias in components.json receives its file.
| Type | Alias | Example |
|---|---|---|
registry:ui | ui | @summit/button writes button.tsx |
registry:hook | hooks | @summit/use-mobile writes use-mobile.ts |
The CLI also adds the items that an item imports.
The examples in this documentation import from @/components/ui, the alias in shadcn’s own example.
Updates
To update a component to a newer version, run add again with --overwrite. The CLI replaces the product’s file, and any edits you made to it are lost.
To print the difference first, add --dry-run and --diff. Nothing is written.
npx shadcn@latest add @summit/button --dry-run --diff