@kobalte/vanilla-extract

Vanilla Extract utils to style Kobalte components easily.

Installation

npm install -D @kobalte/vanilla-extract
# or
yarn add -D @kobalte/vanilla-extract
# or
pnpm add -D @kobalte/vanilla-extract

Note In order to use these utils you need to configure Vanilla Extract in your project. https://vanilla-extract.style

Usage

componentStateStyles

Create vanilla-extract complaint styles for styling data-* attributes of Kobalte components.

// styles.css
import { style } from "@vanilla-extract/css";
import { componentStateStyles } from "@kobalte/vanilla-extract";

const button = style([
  {
    background: "blue",
    padding: "2px 6px",
  },
  componentStateStyles({
    disabled: {
      opacity: 0.4,
    },
    invalid: {
      backgroundColor: "red",
      not: {
        backgroundColor: "yellow",
      },
    },
  }),
  componentStateStyles(
    {
      invalid: {
        backgroundColor: "red",
      },
    },
    { parentSelector: "[data-theme=dark]" },
  ),
]);

Then apply your styles to the component:

import { Button } from "@kobalte/core";
import { button } from "./styles.css";

export const MyButton = () => <Button.Root class={button}>...</Button.Root>;

Documentation

For full documentation, visit kobalte.dev.

Changelog

All notable changes are described in the CHANGELOG.md file.