1 slot open this monthBy the makers of shadcnregistryWe built shadcnregistry. Now we build your product.Book a callCheck availability

1 slot open this monthAI features?We build AI features into your product.Book a callCheck availability

1 slot open this month🚨 Slop police🚨 Slop police: we clean up vibe-coded apps.Report itReport your app

Terms of Service Privacy Policy

Registry Health Inspect

Ndekoui Theme – shadcn/ui Theme by ndeko | shadcnregistry

Registries
ndeko
Ndekoui Theme

Ndekoui Theme

theme

Tokens for light and dark, ink colours that pass AA, hairlines and the 3D materials.

pnpm dlx shadcn@latest add "https://ui.ndekocode.dev/r/theme.json"

Premium blocks for shadcn/uiShadcnblocks.com · AffiliateExplore

Light Mode

--radius:

0.625rem

--hairline:

1px

--background:

hsl(240 11% 98%)

--foreground:

hsl(240 6% 10%)

--card:

hsl(0 0% 100%)

--card-foreground:

hsl(240 6% 10%)

--popover:

hsl(0 0% 100%)

--popover-foreground:

hsl(240 6% 10%)

--primary:

hsl(239 84% 67%)

--primary-foreground:

hsl(0 0% 100%)

--secondary:

hsl(240 5% 95%)

--secondary-foreground:

hsl(240 6% 10%)

--muted:

hsl(240 5% 95%)

--muted-foreground:

hsl(240 4% 42%)

--accent:

hsl(240 5% 95%)

--accent-foreground:

hsl(240 6% 10%)

--destructive:

hsl(0 84% 60%)

--destructive-foreground:

hsl(0 0% 100%)

--border:

hsl(240 3% 89%)

--input:

hsl(240 3% 89%)

--ring:

hsl(239 84% 67%)

--primary-ink:

hsl(243 75% 59%)

--destructive-ink:

hsl(0 74% 42%)

--success:

hsl(161 100% 37%)

--success-foreground:

hsl(163 100% 24%)

--warning:

hsl(38 100% 49%)

--warning-foreground:

hsl(26 100% 36%)

--info:

hsl(200 98% 39%)

--info-foreground:

hsl(201 96% 32%)

--sidebar:

hsl(240 3% 94%)

--sidebar-foreground:

hsl(240 6% 10%)

--sidebar-primary:

hsl(240 6% 10%)

--sidebar-primary-foreground:

hsl(0 0% 98%)

--sidebar-accent:

hsl(240 3% 88%)

--sidebar-accent-foreground:

hsl(240 6% 10%)

--sidebar-border:

hsl(240 3% 89%)

--sidebar-ring:

hsl(239 84% 67%)

--chart-1:

hsl(239 84% 67%)

--chart-2:

hsl(234 89% 74%)

--chart-3:

hsl(230 94% 82%)

--chart-4:

hsl(228 96% 89%)

--chart-5:

hsl(240 5% 65%)

Dark Mode

--background:

hsl(240 5% 7%)

--foreground:

hsl(240 5% 90%)

--card:

hsl(240 5% 10%)

--card-foreground:

hsl(240 5% 90%)

--popover:

hsl(240 5% 11%)

--popover-foreground:

hsl(240 5% 90%)

--primary:

hsl(239 84% 67%)

Theme

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-popover:

var(--popover)

--color-popover-foreground:

var(--popover-foreground)

--color-primary:

var(--primary)

--color-primary-foreground:

var(--primary-foreground)

--color-primary-ink:

var(--primary-ink)

--color-secondary:

var(--secondary)

CSS

--primary-foreground:

hsl(0 0% 100%)

--secondary:

hsl(240 4% 13%)

--secondary-foreground:

hsl(240 5% 90%)

--muted:

hsl(240 4% 13%)

--muted-foreground:

hsl(240 5% 62%)

--accent:

hsl(240 4% 13%)

--accent-foreground:

hsl(0 0% 100%)

--destructive:

hsl(0 72% 51%)

--destructive-foreground:

hsl(0 0% 100%)

--border:

hsl(240 4% 16%)

--input:

hsl(240 4% 18%)

--ring:

hsl(0 0% 40%)

--primary-ink:

hsl(234 89% 74%)

--destructive-ink:

hsl(0 91% 71%)

--success:

hsl(161 100% 37%)

--success-foreground:

hsl(158 76% 64%)

--warning:

hsl(38 100% 49%)

--warning-foreground:

hsl(47 100% 61%)

--info:

hsl(198 93% 60%)

--info-foreground:

hsl(199 95% 74%)

--sidebar:

hsl(240 6% 4%)

--sidebar-foreground:

hsl(240 5% 90%)

--sidebar-primary:

hsl(239 84% 67%)

--sidebar-primary-foreground:

hsl(0 0% 100%)

--sidebar-accent:

hsl(240 4% 14%)

--sidebar-accent-foreground:

hsl(0 0% 100%)

--sidebar-border:

hsl(240 4% 16%)

--sidebar-ring:

hsl(0 0% 40%)

--color-secondary-foreground:

var(--secondary-foreground)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-accent:

var(--accent)

--color-accent-foreground:

var(--accent-foreground)

--color-destructive:

var(--destructive)

--color-destructive-foreground:

var(--destructive-foreground)

--color-destructive-ink:

var(--destructive-ink)

--color-success:

var(--success)

--color-success-foreground:

var(--success-foreground)

--color-warning:

var(--warning)

--color-warning-foreground:

var(--warning-foreground)

--color-info:

var(--info)

--color-info-foreground:

var(--info-foreground)

--color-border:

var(--border)

--color-input:

var(--input)

--color-ring:

var(--ring)

--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)

--radius-sm:

calc(var(--radius) - 4px)

--radius-md:

calc(var(--radius) - 2px)

--radius-lg:

var(--radius)

--radius-xl:

calc(var(--radius) + 4px)

--radius-2xl:

calc(var(--radius) + 8px)

--ease-out-quint:

cubic-bezier(0.22, 1, 0.36, 1)

--ease-standard:

cubic-bezier(0.2, 0, 0, 1)

--ease-out-strong:

cubic-bezier(0.23, 1, 0.32, 1)

--ease-in-out-strong:

cubic-bezier(0.77, 0, 0.175, 1)

--ease-drawer:

cubic-bezier(0.32, 0.72, 0, 1)

--animate-orb-arrive:

orb-arrive 280ms cubic-bezier(0.23, 1, 0.32, 1)

--animate-marquee:

marquee var(--marquee-duration, 40s) linear infinite

--animate-marquee-y:

marquee-y var(--marquee-duration, 60s) linear infinite

--animate-float:

float 6s ease-in-out infinite