Default

base

pnpm dlx shadcn@latest add "https://ui-three-mu.vercel.app/r/default.json"

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Theme

--breakpoint-3xl:

1600px

--breakpoint-4xl:

2000px

--font-sans:

"Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

--font-mono:

"Geist Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", '"Liberation Mono"', '"Courier New"', "monospace"

--color-shiki-background:

var(--shiki-background)

--color-shiki-border:

var(--input)

--color-border:

var(--border)

--color-input:

var(--input)

--color-ring:

var(--ring)

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-primary:

var(--primary)

--color-primary-foreground:

var(--primary-foreground)

--color-secondary:

var(--secondary)

--color-secondary-foreground:

var(--secondary-foreground)

--color-accent:

var(--accent)

--color-accent-foreground:

var(--accent-foreground)

--color-success:

var(--success)

--color-success-foreground:

var(--success-foreground)

--color-danger:

var(--danger)

--color-danger-foreground:

var(--danger-foreground)

--color-warning:

var(--warning)

--color-warning-foreground:

var(--warning-foreground)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-popover:

var(--popover)

--color-popover-foreground:

var(--popover-foreground)

--color-destructive:

var(--destructive)

--color-destructive-foreground:

var(--destructive-foreground)

--color-overlay:

var(--overlay)

--color-overlay-foreground:

var(--overlay-foreground)

--color-navbar:

var(--navbar)

--color-navbar-foreground:

var(--navbar-foreground)

--color-sidebar:

var(--sidebar)

--color-sidebar-foreground:

var(--sidebar-foreground)

--color-sidebar-primary:

var(--sidebar-primary)

--color-sidebar-primary-foreground:

var(--sidebar-primary-foreground)

--color-sidebar-accent:

var(--sidebar-accent)

--color-sidebar-accent-foreground:

var(--sidebar-accent-foreground)

--color-sidebar-border:

var(--sidebar-border)

--color-sidebar-ring:

var(--sidebar-ring)

--color-chart-1:

var(--chart-1)

--color-chart-2:

var(--chart-2)

--color-chart-3:

var(--chart-3)

--color-chart-4:

var(--chart-4)

--color-chart-5:

var(--chart-5)

--color-surface:

var(--surface)

--color-surface-foreground:

var(--surface-foreground)

--color-code:

var(--code)

--color-code-foreground:

var(--code-foreground)

--color-code-highlight:

var(--code-highlight)

--color-code-number:

var(--code-number)

--color-selection:

var(--selection)

--color-selection-foreground:

var(--selection-foreground)

--animate-blink:

blink 1.4s both infinite

--radius-lg:

0.5rem

--radius:

var(--radius-lg)

--radius-xs:

calc(var(--radius-lg) * 0.5)

--radius-sm:

calc(var(--radius-lg) * 0.75)

--radius-md:

calc(var(--radius-lg) * 0.9)

--radius-xl:

calc(var(--radius-lg) * 1.25)

--radius-2xl:

calc(var(--radius-lg) * 1.5)

--radius-3xl:

calc(var(--radius-lg) * 2)

--radius-4xl:

calc(var(--radius-lg) * 3)

CSS

Theme

--breakpoint-3xl:

1600px

--breakpoint-4xl:

2000px

--font-sans:

"Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

--font-mono:

"Geist Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", '"Liberation Mono"', '"Courier New"', "monospace"

--color-shiki-background:

var(--shiki-background)

--color-shiki-border:

var(--input)

--color-border:

var(--border)

--color-input:

var(--input)

--color-ring:

var(--ring)

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-primary:

var(--primary)

--color-primary-foreground:

var(--primary-foreground)

--color-secondary:

var(--secondary)

--color-secondary-foreground:

var(--secondary-foreground)

--color-accent:

var(--accent)

--color-accent-foreground:

var(--accent-foreground)

--color-success:

var(--success)

--color-success-foreground:

var(--success-foreground)

--color-danger:

var(--danger)

--color-danger-foreground:

var(--danger-foreground)

--color-warning:

var(--warning)

--color-warning-foreground:

var(--warning-foreground)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-popover:

var(--popover)

--color-popover-foreground:

var(--popover-foreground)

--color-destructive:

var(--destructive)

--color-destructive-foreground:

var(--destructive-foreground)

--color-overlay:

var(--overlay)

--color-overlay-foreground:

var(--overlay-foreground)

--color-navbar:

var(--navbar)

--color-navbar-foreground:

var(--navbar-foreground)

--color-sidebar:

var(--sidebar)

--color-sidebar-foreground:

var(--sidebar-foreground)

--color-sidebar-primary:

var(--sidebar-primary)

--color-sidebar-primary-foreground:

var(--sidebar-primary-foreground)

--color-sidebar-accent:

var(--sidebar-accent)

--color-sidebar-accent-foreground:

var(--sidebar-accent-foreground)

--color-sidebar-border:

var(--sidebar-border)

--color-sidebar-ring:

var(--sidebar-ring)

--color-chart-1:

var(--chart-1)

--color-chart-2:

var(--chart-2)

--color-chart-3:

var(--chart-3)

--color-chart-4:

var(--chart-4)

--color-chart-5:

var(--chart-5)

--color-surface:

var(--surface)

--color-surface-foreground:

var(--surface-foreground)

--color-code:

var(--code)

--color-code-foreground:

var(--code-foreground)

--color-code-highlight:

var(--code-highlight)

--color-code-number:

var(--code-number)

--color-selection:

var(--selection)

--color-selection-foreground:

var(--selection-foreground)

--animate-blink:

blink 1.4s both infinite

--radius-lg:

0.5rem

--radius:

var(--radius-lg)

--radius-xs:

calc(var(--radius-lg) * 0.5)

--radius-sm:

calc(var(--radius-lg) * 0.75)

--radius-md:

calc(var(--radius-lg) * 0.9)

--radius-xl:

calc(var(--radius-lg) * 1.25)

--radius-2xl:

calc(var(--radius-lg) * 1.5)

--radius-3xl:

calc(var(--radius-lg) * 2)

--radius-4xl:

calc(var(--radius-lg) * 3)

CSS