The Belin token system and every wrapped component in one place. Open the customizer panel to see token changes apply live.
Token
Light
Dark
--color-background--color-surface--color-card--color-popover--color-foreground--color-surface-foreground--color-card-foreground--color-muted-foreground--color-action-primary--color-action-primary-foreground--color-action-primary-hover--color-action-primary-active--color-action-secondary--color-action-secondary-foreground--color-action-secondary-hover--color-action-secondary-active--color-destructive--color-destructive-foreground--color-destructive-hover--color-destructive-active--color-warning--color-warning-foreground--color-muted--color-muted-foreground--color-border--color-input--color-ring--belin-space-10.25rem4px--belin-space-20.5rem8px--belin-space-30.75rem12px--belin-space-41rem16px--belin-space-51.5rem24px--belin-space-62rem32px--belin-space-72.5rem40px--belin-space-83rem48px--belin-space-93.5rem56px--belin-space-104rem64px--belin-space-114.5rem72px--belin-space-125rem80px--radius-sm0.25rem--radius-md0.375rem--radius-lg0.5rem--radius-full9999px--font-sans--font-serif--font-monoxssmbaselgxl2xl3xl4xldisplay
heading-1
heading-2
heading-3
heading-4
body-large
The quick brown fox jumps over the lazy dog. A design system is a shared language — consistent, intentional, and built to last.
body-default
The quick brown fox jumps over the lazy dog. A design system is a shared language — consistent, intentional, and built to last.
body-small
The quick brown fox jumps over the lazy dog. A design system is a shared language — consistent, intentional, and built to last.
blockquote
Typography is the detail and the presentation of a story. It invites you into the content, not announces itself.
code-inline
const greeting = "hello world";code-block
const nums = [1, 2, 3].map(n => n * 2);caption
Caption text — used under images or figures.
label
Field label or UI label
footnote
Footnote, reference, or legal small print.
nav-link
Navigation link
link
Variants
Sizes
Disabled
Default
Disabled
With label
Inline label
Default
Disabled
With label
Default
With label
Inline label
Disabled
Default
With label
Disabled
States
Default
States
Sizes
Paired with input
Disabled
Not yet wrapped — Phase 10 form elements deferred. Add via npx shadcn@latest add slider.
Not yet wrapped — composed unit of label + input + error message planned for Phase 10.
Variants
Default
Destructive
Warning
Success
Default
Horizontal
Vertical
Typography is the detail and the presentation of a story. It should invite you into the content, not announce itself.
With language
function greeting(name: string) {
return `Hello, ${name}!`;
}
console.log(greeting("Belin"));Plain
npm install @belin/uiUnordered
/belin/components/components/ui in app codeOrdered
Text placeholders
Card placeholder
Default
Positions
Default
Default
Values
Default
Manage your account details and preferences.
Line
A high-level summary of recent activity.
Basic
Card content goes here. This is the main body area.
Minimal
A minimal card with content only.
Default
Default
Six digits
Default
Range
Drag to reorder
Default
Default
Default
Right-click target
Default
Default
Default
Trigger
Default
Default
Default
Default
Default
| Invoice | Status | Amount |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
| INV003 | Overdue | $350.00 |
Default
| Project | Status | Priority | Budget | Delta | Progress | Deadline | Last update | Billable | Tags | Notes | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 150 projects | $12,327,000 | −$53,500 | 58% avg | — | |||||||
| Hive Analytics Redesign | Active | High | $68,000 | −$3,200 | 72% | 15 Aug 2026 | 1 months ago | ReactUXDashboard | |||
| Meridian CMS Platform | Active | High | $52,000 | +$4,800 | 58% | 1 Sep 2026 | 1 months ago | Next.jsCMSAPI | |||
| Cobalt HR System | On hold | Medium | $34,000 | +$1,200 | 31% | 15 Oct 2026 | 1 months ago | VueHREnterprise | |||
| Pebble E-commerce | At risk | High | $91,000 | −$12,400 | 44% | 1 Jul 2026 | 4 weeks ago | ShopifyDesignUX+1 | |||
| Lumen Docs | Active | Low | $18,000 | +$600 | 85% | 30 Jun 2026 | 4 weeks ago | DocsInternal | |||
| Atlas Dashboard | Completed | Medium | $45,000 | +$2,100 | 100% | 31 Mar 2026 | 3 months ago | ReactBIAnalytics | |||
| Drift Mobile App | Active | High | $74,000 | −$1,800 | 62% | 1 Nov 2026 | 1 months ago | React NativeiOSAndroid | |||
| Vantage Client Portal | Active | Medium | $29,000 | +$900 | 38% | 15 Dec 2026 | 1 months ago | VuePortalB2B | |||
| Quill Internal Tools | On hold | Low | $12,000 | $0 | 20% | 30 Sep 2026 | 2 months ago | Internal | |||
| Nova Brand Refresh | Active | Medium | $22,000 | +$1,400 | 78% | 15 Jul 2026 | 1 months ago | DesignBrandingIdentity |
Bar chart
16:9
16 : 9
1:1
1 : 1
Vertical
Two panels
Default
Slide 1
Slide 2
Slide 3
Default
Default