Themed components

Learn how to apply custom styles to components at global level.

Component identifier

To customize a component globally, specify the component identifier (import name) inside the components prop of ThemeProvider.

• Use defaultProps to change the default SolidJS props of the component.
• Use slotClasses to apply CSS classes to each component parts (slots).
  • Every Pigment component contains the root slot.

Visit the components-config.tsx file to see all component identifiers.

tsx
import { ThemeProvider } from "@kobalte/pigment";
function App() {
  return (
    <ThemeProvider
      components={{
        Button: {},
      }}
    >
      <Button>Button</Button>
    </ThemeProvider>
  );
}

tsx
import { ThemeProvider } from "@kobalte/pigment";
function App() {
  return (
    <ThemeProvider
      components={{
        Button: {},
      }}
    >
      <Button>Button</Button>
    </ThemeProvider>
  );
}

Default props

The values specified as defaultProps affect all instances of the component:

tsx
import { ThemeProvider } from "@kobalte/pigment";
function App() {
  return (
    <ThemeProvider
      components={{
        Button: {
          defaultProps: {
            variant: "primary",
            size: "md",
          },
        },
      }}
    >
      {/* Same as: <Button variant="primary" size="md"> */}
      <Button>Button</Button>
    </ThemeProvider>
  );
}

tsx
import { ThemeProvider } from "@kobalte/pigment";
function App() {
  return (
    <ThemeProvider
      components={{
        Button: {
          defaultProps: {
            variant: "primary",
            size: "md",
          },
        },
      }}
    >
      {/* Same as: <Button variant="primary" size="md"> */}
      <Button>Button</Button>
    </ThemeProvider>
  );
}

Slot classes

To apply additional CSS classes based on a given prop, use a callback as value of the slotClasses node. The argument passed in contains the component props.

tsx
import { clsx } from "clsx";
import { createTheme } from "@kobalte/pigment";
function App() {
  return (
    <ThemeProvider
      components={{
        Button: {
          slotClasses: props => ({
            root: clsx("rounded-md", props.size === "md" && "h-8 px-4"),
          }),
        },
      }}
    >
      <Button>Button</Button>
    </ThemeProvider>
  );
}

tsx
import { clsx } from "clsx";
import { createTheme } from "@kobalte/pigment";
function App() {
  return (
    <ThemeProvider
      components={{
        Button: {
          slotClasses: props => ({
            root: clsx("rounded-md", props.size === "md" && "h-8 px-4"),
          }),
        },
      }}
    >
      <Button>Button</Button>
    </ThemeProvider>
  );
}