Date Picker

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://www.baselayer.dev/r/date-picker.json"

Files

Styles

Light Mode

----surface:

oklch(98.5% 0 0)

----surface-2:

oklch(97% 0 0)

----fg:

oklch(14.5% 0 0)

----fg-muted:

oklch(55.6% 0 0)

----fg-inverse:

oklch(98.5% 0 0)

----fg-disabled:

oklch(70.8% 0 0)

----border:

oklch(87% 0 0)

----focus:

oklch(68.5% 0.169 237.323)

----primary:

oklch(14.5% 0 0)

----primary-fg:

oklch(98.5% 0 0)

----secondary:

oklch(92.2% 0 0)

----secondary-fg:

oklch(14.5% 0 0)

----danger:

oklch(63.7% 0.237 25.331)

----danger-fg:

#ffffff

Dark Mode

----surface:

oklch(14.5% 0 0)

----surface-2:

oklch(20.5% 0 0)

----fg:

oklch(98.5% 0.001 106.423)

----fg-muted:

oklch(55.6% 0 0)

----fg-inverse:

oklch(98.5% 0 0)

----fg-disabled:

oklch(37.1% 0 0)

----border:

oklch(37.1% 0 0)

Theme

----color-surface:

var(--surface)

----color-surface-2:

var(--surface-2)

----color-fg:

var(--fg)

----color-fg-muted:

var(--fg-muted)

----color-fg-disabled:

var(--fg-disabled)

----color-fg-inverse:

var(--fg-inverse)

----color-border:

var(--border)

----color-focus:

var(--focus)

----color-primary:

var(--primary)

----color-primary-fg:

var(--primary-fg)

CSS

Installation

Files

components

Styles