Installation

Configure the SevenUI registry in your project.

SevenUI requires a project already set up with the shadcn CLI and Tailwind CSS v4. Run npx shadcn@latest init first if you have not.

Add components

Install any component straight from its registry URL — no extra configuration needed:

npx shadcn@latest add https://sevenui.dev/r/button.json

Components install as source files under your ui alias.

Registry namespace (optional)

For a shorter command, add the registry to your components.json:

{
  "registries": {
    "@sevenui": "https://sevenui.dev/r/{name}.json"
  }
}

Then the @sevenui namespace resolves to the same URLs:

npx shadcn@latest add @sevenui/button

Animations

Overlay components (dialog, menus, popover, select, …) animate through SevenUI’s own enter/exit utilities (animate-in, fade-in-0, zoom-in-95, slide-in-from-*, …) — no animation package is involved. The @utility and @keyframes definitions live in a single animations registry item that every animated component depends on, so the shadcn CLI merges them into your stylesheet automatically. Speed and easing compose with Tailwind core’s duration-* / ease-* utilities.

If you copy component source manually instead of using the CLI, copy the css block from https://sevenui.dev/r/animations.json into your global stylesheet too — the accordion additionally ships its own accordion-down / accordion-up keyframes in its item the same way.

Registry layout

The registry is namespaced by kind: components at /r/<name>.json, gallery examples (the variations shown on sevenui.dev/components) at /r/component/<name>.json, docs demos at /r/demo/<name>.json, and pro blocks at /r/pro/<name>.json.

A gallery example installs the same way as a component:

npx shadcn@latest add https://sevenui.dev/r/component/accordion-01.json

With the @sevenui namespace configured, the short form works too:

npx shadcn@latest add @sevenui/component/accordion-01

The example file lands in your components/ directory as a single self-contained component, and its dependencies (accordion itself, in this case) land in components/ui/.

Browse components at sevenui.dev/components and pro blocks at sevenui.dev/blocks.