Shadcn Studio/sunset Horizon

base

[shadcn/studio]

pnpm dlx shadcn@latest add "https://registry.directory/r/shadcn-studio/sunset-horizon.json"

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Shadcn Studio/sunset Horizon

base

[shadcn/studio]

pnpm dlx shadcn@latest add "https://registry.directory/r/shadcn-studio/sunset-horizon.json"

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

utils

Light Mode

--background:

oklch(0.99 0.01 56.32)

--foreground:

oklch(0.34 0.01 2.77)

--card:

oklch(1.00 0 0)

--card-foreground:

oklch(0.34 0.01 2.77)

--popover:

oklch(1.00 0 0)

--popover-foreground:

oklch(0.34 0.01 2.77)

--primary:

oklch(0.74 0.16 34.71)

--primary-foreground:

oklch(1.00 0 0)

--secondary:

oklch(0.96 0.02 28.90)

--secondary-foreground:

oklch(0.56 0.13 32.74)

--muted:

oklch(0.97 0.02 39.40)

--muted-foreground:

oklch(0.49 0.05 26.45)

--accent:

oklch(0.83 0.11 58.00)

--accent-foreground:

oklch(0.34 0.01 2.77)

--destructive:

oklch(0.61 0.21 22.24)

--border:

oklch(0.93 0.04 38.69)

--input:

oklch(0.93 0.04 38.69)

--ring:

oklch(0.74 0.16 34.71)

--chart-1:

oklch(0.74 0.16 34.71)

--chart-2:

oklch(0.83 0.11 58.00)

--chart-3:

oklch(0.88 0.08 54.93)

--chart-4:

oklch(0.82 0.11 40.89)

--chart-5:

oklch(0.64 0.13 32.07)

--sidebar:

oklch(0.97 0.02 39.40)

--sidebar-foreground:

oklch(0.34 0.01 2.77)

--sidebar-primary:

oklch(0.74 0.16 34.71)

--sidebar-primary-foreground:

oklch(1.00 0 0)

--sidebar-accent:

oklch(0.83 0.11 58.00)

--sidebar-accent-foreground:

oklch(0.34 0.01 2.77)

--sidebar-border:

oklch(0.93 0.04 38.69)

--sidebar-ring:

oklch(0.74 0.16 34.71)

--shadow-opacity:

0.09

--shadow-blur:

12px

--shadow-spread:

-3px

--shadow-offset-x:

0px

--shadow-offset-y:

6px

--shadow-2xs:

0px 6px 12px -3px oklch(0.00 0 0 / 0.04)

--shadow-xs:

0px 6px 12px -3px oklch(0.00 0 0 / 0.04)

--shadow-2xl:

0px 6px 12px -3px oklch(0.00 0 0 / 0.22)

--shadow-sm:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 1px 2px -4px oklch(0.00 0 0 / 0.09)

--shadow:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 1px 2px -4px oklch(0.00 0 0 / 0.09)

--shadow-md:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 2px 4px -4px oklch(0.00 0 0 / 0.09)

--shadow-lg:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 4px 6px -4px oklch(0.00 0 0 / 0.09)

--shadow-xl:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 8px 10px -4px oklch(0.00 0 0 / 0.09)

Dark Mode

--background:

oklch(0.26 0.02 352.40)

--foreground:

oklch(0.94 0.01 51.32)

--card:

oklch(0.32 0.02 341.45)

--card-foreground:

oklch(0.94 0.01 51.32)

--popover:

oklch(0.32 0.02 341.45)

--popover-foreground:

oklch(0.94 0.01 51.32)

--secondary:

oklch(0.36 0.02 342.27)

CSS

utils

Light Mode

--background:

oklch(0.99 0.01 56.32)

--foreground:

oklch(0.34 0.01 2.77)

--card:

oklch(1.00 0 0)

--card-foreground:

oklch(0.34 0.01 2.77)

--popover:

oklch(1.00 0 0)

--popover-foreground:

oklch(0.34 0.01 2.77)

--primary:

oklch(0.74 0.16 34.71)

--primary-foreground:

oklch(1.00 0 0)

--secondary:

oklch(0.96 0.02 28.90)

--secondary-foreground:

oklch(0.56 0.13 32.74)

--muted:

oklch(0.97 0.02 39.40)

--muted-foreground:

oklch(0.49 0.05 26.45)

--accent:

oklch(0.83 0.11 58.00)

--accent-foreground:

oklch(0.34 0.01 2.77)

--destructive:

oklch(0.61 0.21 22.24)

--border:

oklch(0.93 0.04 38.69)

--input:

oklch(0.93 0.04 38.69)

--ring:

oklch(0.74 0.16 34.71)

--chart-1:

oklch(0.74 0.16 34.71)

--chart-2:

oklch(0.83 0.11 58.00)

--chart-3:

oklch(0.88 0.08 54.93)

--chart-4:

oklch(0.82 0.11 40.89)

--chart-5:

oklch(0.64 0.13 32.07)

--sidebar:

oklch(0.97 0.02 39.40)

--sidebar-foreground:

oklch(0.34 0.01 2.77)

--sidebar-primary:

oklch(0.74 0.16 34.71)

--sidebar-primary-foreground:

oklch(1.00 0 0)

--sidebar-accent:

oklch(0.83 0.11 58.00)

--sidebar-accent-foreground:

oklch(0.34 0.01 2.77)

--sidebar-border:

oklch(0.93 0.04 38.69)

--sidebar-ring:

oklch(0.74 0.16 34.71)

--shadow-opacity:

0.09

--shadow-blur:

12px

--shadow-spread:

-3px

--shadow-offset-x:

0px

--shadow-offset-y:

6px

--shadow-2xs:

0px 6px 12px -3px oklch(0.00 0 0 / 0.04)

--shadow-xs:

0px 6px 12px -3px oklch(0.00 0 0 / 0.04)

--shadow-2xl:

0px 6px 12px -3px oklch(0.00 0 0 / 0.22)

--shadow-sm:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 1px 2px -4px oklch(0.00 0 0 / 0.09)

--shadow:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 1px 2px -4px oklch(0.00 0 0 / 0.09)

--shadow-md:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 2px 4px -4px oklch(0.00 0 0 / 0.09)

--shadow-lg:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 4px 6px -4px oklch(0.00 0 0 / 0.09)

--shadow-xl:

0px 6px 12px -3px oklch(0.00 0 0 / 0.09), 0px 8px 10px -4px oklch(0.00 0 0 / 0.09)

Dark Mode

--background:

oklch(0.26 0.02 352.40)

--foreground:

oklch(0.94 0.01 51.32)

--card:

oklch(0.32 0.02 341.45)

--card-foreground:

oklch(0.94 0.01 51.32)

--popover:

oklch(0.32 0.02 341.45)

--popover-foreground:

oklch(0.94 0.01 51.32)

--secondary:

oklch(0.36 0.02 342.27)

CSS

--secondary-foreground:

oklch(0.94 0.01 51.32)

--muted:

oklch(0.32 0.02 341.45)

--muted-foreground:

oklch(0.84 0.02 52.63)

--accent-foreground:

oklch(0.26 0.02 352.40)

--border:

oklch(0.36 0.02 342.27)

--input:

oklch(0.36 0.02 342.27)

--sidebar:

oklch(0.26 0.02 352.40)

--sidebar-foreground:

oklch(0.94 0.01 51.32)

--sidebar-accent-foreground:

oklch(0.26 0.02 352.40)

--sidebar-border:

oklch(0.36 0.02 342.27)

--shadow-opacity:

0.1

--shadow-blur:

3px

--shadow-spread:

0px

--shadow-offset-x:

0

--shadow-offset-y:

1px

--shadow-2xs:

0 1px 3px 0px oklch(0.00 0 0 / 0.05)

--shadow-xs:

0 1px 3px 0px oklch(0.00 0 0 / 0.05)

--shadow-2xl:

0 1px 3px 0px oklch(0.00 0 0 / 0.25)

--shadow-sm:

0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 1px 2px -1px oklch(0.00 0 0 / 0.10)

--shadow:

0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 1px 2px -1px oklch(0.00 0 0 / 0.10)

--shadow-md:

0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 2px 4px -1px oklch(0.00 0 0 / 0.10)

--shadow-lg:

0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 4px 6px -1px oklch(0.00 0 0 / 0.10)

--shadow-xl:

0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 8px 10px -1px oklch(0.00 0 0 / 0.10)