Base – shadcn/ui Base by exabase

⚠️ Mobile is not supported yet.

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://exawizards.com/exabase/design/registry/base.json"

Files

No files found

Styles

Light Mode

--radius:

0.625rem

--background:

rgb(255, 255, 255)

--foreground:

rgb(8, 10, 12)

--card:

rgb(255, 255, 255)

--card-foreground:

rgb(8, 10, 12)

--popover:

rgb(255, 255, 255)

--popover-foreground:

rgb(8, 10, 12)

--primary:

rgb(37, 99, 244)

--primary-hovered:

rgb(58, 114, 245)

--primary-pressed:

rgb(81, 130, 246)

--primary-foreground:

rgb(255, 255, 255)

--primary-text:

rgb(37, 99, 244)

--secondary:

rgba(103, 120, 145, 0.1)

--secondary-hovered:

rgba(103, 120, 145, 0.2)

--secondary-pressed:

rgba(103, 120, 145, 0.3)

--secondary-foreground:

rgb(8, 10, 12)

--destructive:

rgb(245, 20, 10)

--destructive-hovered:

rgb(246, 55, 47)

--destructive-pressed:

rgb(247, 90, 83)

--destructive-foreground:

rgb(255, 255, 255)

--destructive-text:

rgb(245, 20, 10)

--destructive-muted:

rgb(254, 227, 226)

--info:

rgb(0, 177, 242)

--info-foreground:

rgb(255, 255, 255)

--info-text:

rgb(0, 152, 208)

--info-muted:

rgb(224, 246, 253)

--success:

rgb(17, 156, 17)

--success-foreground:

rgb(255, 255, 255)

--success-text:

rgb(11, 138, 11)

--success-muted:

rgb(226, 243, 226)

--warning:

rgb(249, 181, 0)

--warning-foreground:

rgb(8, 10, 12)

--warning-text:

rgb(179, 130, 0)

--warning-muted:

rgb(254, 246, 224)

--muted:

rgb(237, 239, 242)

--muted-foreground:

rgb(103, 120, 145)

--accent:

rgba(103, 120, 145, 0.1)

--accent-pressed:

rgba(103, 120, 145, 0.2)

--accent-foreground:

rgb(8, 10, 12)

--border:

rgb(212, 217, 224)

--input:

rgb(212, 217, 224)

--ring:

rgb(37, 99, 244)

--sidebar:

rgb(249, 250, 251)

--sidebar-foreground:

rgb(8, 10, 12)

--sidebar-primary:

rgb(37, 99, 244)

--sidebar-primary-foreground:

rgb(255, 255, 255)

--sidebar-accent:

rgba(103, 120, 145, 0.1)

--sidebar-accent-foreground:

rgb(8, 10, 12)

--sidebar-border:

rgb(212, 217, 224)

--sidebar-ring:

rgb(37, 99, 244)

Dark Mode

--background:

rgb(16, 19, 23)

--foreground:

rgb(249, 250, 251)

--card:

rgb(16, 19, 23)

--card-foreground:

rgb(249, 250, 251)

--popover:

rgb(16, 19, 23)

--popover-foreground:

rgb(249, 250, 251)

--primary:

rgb(37, 99, 244)

Theme

--font-sans:

var(--font-inter), var(--font-noto-sans-jp), sans-serif

CSS

--primary-pressed:

rgb(81, 130, 246)

--primary-foreground:

rgb(255, 255, 255)

--primary-text:

rgb(76, 127, 246)

--secondary:

rgba(237, 239, 242, 0.08)

--secondary-hovered:

rgba(237, 239, 242, 0.16)

--secondary-pressed:

rgba(237, 239, 242, 0.24)

--secondary-foreground:

rgb(249, 250, 251)

--destructive:

rgb(247, 62, 54)

--destructive-hovered:

rgb(248, 91, 84)

--destructive-pressed:

rgb(249, 120, 114)

--destructive-foreground:

rgb(255, 255, 255)

--destructive-text:

rgb(247, 62, 54)

--destructive-muted:

rgb(77, 3, 0)

--info:

rgb(0, 177, 242)

--info-foreground:

rgb(255, 255, 255)

--info-text:

rgb(0, 177, 242)

--info-muted:

rgb(0, 53, 73)

--success:

rgb(17, 156, 17)

--success-foreground:

rgb(255, 255, 255)

--success-text:

rgb(17, 156, 17)

--success-muted:

rgb(0, 52, 0)

--warning:

rgb(249, 181, 0)

--warning-foreground:

rgb(8, 10, 12)

--warning-text:

rgb(249, 181, 0)

--warning-muted:

rgb(75, 54, 0)

--muted:

rgb(31, 36, 44)

--muted-foreground:

rgb(130, 144, 165)

--accent:

rgba(237, 239, 242, 0.08)

--accent-pressed:

rgba(237, 239, 242, 0.16)

--accent-foreground:

rgb(249, 250, 251)

--border:

rgb(45, 53, 64)

--input:

rgb(45, 53, 64)

--ring:

rgb(37, 99, 244)

--sidebar:

rgb(31, 36, 44)

--sidebar-foreground:

rgb(249, 250, 251)

--sidebar-primary:

rgb(37, 99, 244)

--sidebar-primary-foreground:

rgb(255, 255, 255)

--sidebar-accent:

rgba(237, 239, 242, 0.08)

--sidebar-accent-foreground:

rgb(249, 250, 251)

--sidebar-border:

rgb(45, 53, 64)

--sidebar-ring:

rgb(37, 99, 244)