@cdr-kit/Getting started/Theming

Theming

@cdr-kit/react is intentionally headless. Theme the look through CSS custom properties passed via CdrProvider.appearance.variables.

Recognized tokens

--cdr-accent — primary accent
--cdr-border — hairline border color
--cdr-skeleton — placeholder background
--cdr-fg, --cdr-muted — text colors

Passing tokens

App.tsx

<CdrProvider
appearance={{
  variables: {
    "--cdr-accent": "#3E3BE3",
    "--cdr-border": "#E6E2DA",
    "--cdr-skeleton": "#EDEAE2",
  },
}}
// ...
>

Styled variants

Want batteries-included pre-styled components instead of headless slots? See @cdr-kit/react-ui in the component gallery.

← Previous

Quickstart

CdrProvider