Search Raihin Design System

Search tokens, pages and quick actions

Components

Installed from ui.kaotypr.com

Raihin doesn't ship its own component library. Every component is installed from the ui.kaotypr.com registry — the same shadcn-compatible primitives used across products that share the design system core. Token names and component APIs are identical; what changes is the values Raihin binds to those tokens.

How it works

The kaotypr UI registry is a shadcn-compatible source of refined primitives, custom components, and blocks. Each component reads tokens by name (bg-card, text-primary-foreground, rounded-button, --density-control-h), never hardcoded values.

Raihin imports the same component source but binds the tokens to its own values in app/globals.css. The result: same API, same variants, same accessibility — different visual character. Every example below is a live render of a component installed from ui.kaotypr.com, styled by Raihin's tokens.

Install

Use the standard shadcn CLI pointed at the kaotypr registry. Each component is a JSON endpoint at https://ui.kaotypr.com/r/{name}.json.

pnpm dlx shadcn@latest add https://ui.kaotypr.com/r/button.json
pnpm dlx shadcn@latest add https://ui.kaotypr.com/r/card.json
# …or any other component / block
Visit ui.kaotypr.comBrowse the registry

Live preview

Every component below is the kaotypr registry source running on Raihin's tokens. Resize, toggle dark mode, or switch density mode — the components respond because their tokens do.

Buttons

default · secondary · outline · ghost · destructive · link

Badges

default · secondary · outline · destructive · success · warning · info · ghost

DefaultSecondaryOutlineDestructiveSuccessWarningInfoGhost
Status alerts

destructive · success · warning · info — the four locked status hues

Form controls

input · label · checkbox · switch

Card

surface · header · content · footer

Spring Garden
Hand-illustrated florals in a soft pastel palette.
Six layouts, three font pairings, and a customizable color ribbon. Pairs well with intimate ceremonies.
Avatar

image · fallback initials

SRJMAK+5
Tabs

trigger · content

Choose a template and customize colors, fonts, and layout.
Kbd

keyboard shortcut display

Open command palette⌘KSave⌘SToggle theme⌘⇧L

Where to look next

  • ui.kaotypr.com — the full registry with documentation for every variant, prop, and example.
  • Patterns— common compositions of these primitives (form fields with errors, status alerts, multi-field layouts).
  • Tokens— the values these components consume. Edit a token in app/globals.css and every install of the matching component reskins automatically.
  • Foundations— the rules every component on this page already follows (semantic pairs, the solid status pattern, the focus-ring convention).