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
shadcnregistry
shadcnregistry
RegistryHealthInspect
Terms of ServicePrivacy Policy
  1. Registries
  3. joyco
  5. JOYCO UI

JOYCO UI

style

The full JOYCO UI kit — all components and brand theming.

pnpm dlx shadcn@latest add "https://registry.joyco.studio/r/ui.json"
Premium blocks for shadcn/uiShadcnblocks.com · AffiliateExplore

Light Mode

--background:

oklch(1 0 0)

--foreground:

oklch(0.145 0 0)

--card:

oklch(0.97 0 0)

--card-foreground:

oklch(0.145 0 0)

--popover:

oklch(1 0 0)

--popover-foreground:

oklch(0.145 0 0)

--primary:

oklch(0.452 0.313214 264.052)

--primary-foreground:

oklch(1 0 0)

--secondary:

oklch(0.97 0 0)

--secondary-foreground:

oklch(0.205 0 0)

--muted:

oklch(0.97 0 0)

--muted-foreground:

oklch(0.556 0 0)

--accent:

oklch(0.9 0 0)

--accent-foreground:

oklch(0.205 0 0)

--destructive:

oklch(0.577 0.245 27.325)

--border:

oklch(0.922 0 0)

--input:

oklch(0.922 0 0)

--ring:

oklch(0.708 0 0)

--chart-1:

oklch(0.646 0.222 41.116)

--chart-2:

oklch(0.6 0.118 184.704)

--chart-3:

oklch(0.398 0.07 227.392)

--chart-4:

oklch(0.828 0.189 84.429)

--chart-5:

oklch(0.769 0.188 70.08)

--sidebar:

oklch(0.985 0 0)

--sidebar-foreground:

oklch(0.145 0 0)

--sidebar-primary:

oklch(0.205 0 0)

--sidebar-primary-foreground:

oklch(0.985 0 0)

--sidebar-accent:

oklch(0.97 0 0)

--sidebar-accent-foreground:

oklch(0.205 0 0)

--sidebar-border:

oklch(0.922 0 0)

--sidebar-ring:

oklch(0.708 0 0)

--radius:

0rem

Dark Mode

--background:

oklch(0.1684 0 0)

--foreground:

oklch(0.985 0 0)

--card:

oklch(0.2046 0 0)

--card-foreground:

oklch(0.985 0 0)

--popover:

oklch(0.205 0 0)

--popover-foreground:

oklch(0.985 0 0)

--primary:

oklch(0.452 0.313214 264.052)

--primary-foreground:

oklch(1 0 0)

--secondary:

oklch(0.269 0 0)

--secondary-foreground:

oklch(0.985 0 0)

--muted:

oklch(0.2134 0 0)

--muted-foreground:

oklch(0.708 0 0)

--accent:

oklch(0.2768 0 0)

--accent-foreground:

oklch(0.8975 0 0)

--destructive:

oklch(0.704 0.191 22.216)

--border:

oklch(0.285 0 0)

--input:

oklch(1 0 0 / 15%)

--ring:

oklch(0.556 0 0)

--chart-1:

oklch(0.488 0.243 264.376)

--chart-2:

oklch(0.696 0.17 162.48)

--chart-3:

oklch(0.769 0.188 70.08)

--chart-4:

oklch(0.627 0.265 303.9)

--chart-5:

oklch(0.645 0.246 16.439)

--sidebar:

oklch(0.205 0 0)

--sidebar-foreground:

oklch(0.985 0 0)

--sidebar-primary:

oklch(0.488 0.243 264.376)

--sidebar-primary-foreground:

oklch(0.985 0 0)

--sidebar-accent:

oklch(0.269 0 0)

--sidebar-accent-foreground:

oklch(0.985 0 0)

--sidebar-border:

oklch(1 0 0 / 10%)

--sidebar-ring:

oklch(0.556 0 0)

--radius:

0rem

Theme

--gap:

0.25rem

--spacing-gap:

var(--gap)

--radius:

0rem

--font-sans:

var(--font-public-sans)

--font-mono:

var(--font-roboto-mono)

--default-font-family:

var(--font-sans)

--default-font-family-mono:

var(--font-mono)

--text-base--letter-spacing:

-0.015em

--text-lg--letter-spacing:

-0.02em

--text-xl--letter-spacing:

-0.025em

--text-2xl--letter-spacing:

-0.03em

--text-3xl--letter-spacing:

-0.03em

--text-4xl--letter-spacing:

-0.03em

--text-5xl--letter-spacing:

-0.03em

--text-6xl--letter-spacing:

-0.03em

--text-7xl--letter-spacing:

-0.03em

--text-8xl--letter-spacing:

-0.03em

--text-9xl--letter-spacing:

-0.03em

CSS