Component Theme

In Kuma UI, you can define default and variant styles for your components globally in your theme. This feature provides a consistent look and feel across your application while allowing for extensive customization.

Defining Component Styles

Component styles are defined in the components field of your theme. Each component can have a defaultProps and variants.

Here's an example of how you can define a primary variant and make it default for the Button component:

const theme = createTheme({
  components: {
    Button: {
      defaultProps: {
        variant: "primary",
        borderRadius: "14px",
        p: "16px 32px",
        fontWeight: 600,
        _hover: {
          opacity: 0.8,
        },
      },
      variants: {
        primary: {
          bg: "#576ddf",
          color: "white",
        },
        secondary: {
          bg: "white",
          color: "#576ddf",
        },
      },
    },
  },
});

Using Component Styles

Default Props

defaultProps are applied to all instances of a component by default. For example, with the above theme configuration, you can apply the primary variant to a Button like so.

Variants

Variants offer a way to apply different styles to components based on a prop. For example, with the above theme configuration, you can apply the primary variant to a Button like so:

<Button variant="primary">I'm a primary button</Button>

This approach gives you a lot of flexibility in terms of styling your components and ensuring consistency across your application.

Remember, Kuma UI is a headless library, which means styles are not applied unless you define them in your theme. Define your component styles and unleash the power of Kuma UI!