Styling

Kobalte components are unstyled, allowing you to completely customize the look and feel. Bring your preferred styling solution (vanilla CSS, Tailwind, CSS-in-JS libraries, etc...).

Styling a component part

All components and their parts accept a class prop. This class will be passed through to the DOM element. You can style a component part by targeting the class that you provide.

Styling a state

When a component or its parts can have multiple states, we automatically attach data-* attributes that represents the specific state. For example, a popover's trigger can have:

• data-expanded — When the popover is expanded.
• data-disabled — When the popover is disabled.

You can style a component state by targeting the data-* attributes added by Kobalte.

Using the TailwindCSS plugin

If you are using TailwindCSS, you can use the @kobalte/tailwindcss plugin to target Kobalte's data-* attributes with modifiers like ui-expanded:*.

Installation

Usage

Add the plugin to your tailwind.config.js :

js
/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [],
	theme: {
		extend: {},
	},
	plugins: [
		// default prefix is "ui"
		require("@kobalte/tailwindcss"),
		// or with a custom prefix:
		require("@kobalte/tailwindcss")({ prefix: "kb" }),
	],
};

js
/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [],
	theme: {
		extend: {},
	},
	plugins: [
		// default prefix is "ui"
		require("@kobalte/tailwindcss"),
		// or with a custom prefix:
		require("@kobalte/tailwindcss")({ prefix: "kb" }),
	],
};

Style your component:

tsx
import { Popover as KPopover } from "@kobalte/core";
export const Popover = () => (
	<KPopover.Root>
		<KPopover.Trigger class="inline-flex px-4 py-2 rounded ui-disabled:bg-slate-100">
			Open
		</KPopover.Trigger>
		<KPopover.Content class="flex p-4 rounded bg-white">...</KPopover.Content>
	</KPopover.Root>
);

tsx
import { Popover as KPopover } from "@kobalte/core";
export const Popover = () => (
	<KPopover.Root>
		<KPopover.Trigger class="inline-flex px-4 py-2 rounded ui-disabled:bg-slate-100">
			Open
		</KPopover.Trigger>
		<KPopover.Content class="flex p-4 rounded bg-white">...</KPopover.Content>
	</KPopover.Root>
);

You can use the following modifiers:

It's also possible to use inverse modifiers in the form of ui-not-*, group and peer modifiers in the form of ui-group-* and ui-peer-*.

Using the Vanilla Extract plugin

If you are using Vanilla Extract, you can use the @kobalte/vanilla-extract plugin to target Kobalte's data-* attributes.

Installation

Usage

Use the componentStateStyles utility function to create vanilla-extract styles that target data-* attributes of Kobalte components.

ts
// styles.css
import { componentStateStyles } from "@kobalte/vanilla-extract";
import { style } from "@vanilla-extract/css";
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]" },
	),
]);

ts
// styles.css
import { componentStateStyles } from "@kobalte/vanilla-extract";
import { style } from "@vanilla-extract/css";
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:

tsx
import { Button } from "@kobalte/core";
import { button } from "./styles.css";
export const MyButton = () => <Button.Root class={button}>...</Button.Root>;

tsx
import { Button } from "@kobalte/core";
import { button } from "./styles.css";
export const MyButton = () => <Button.Root class={button}>...</Button.Root>;

Usage with UnoCSS

The UnoCSS preset made by the community can be used to achieve the same behavior of the TailwindCSS plugin.

Extending a component

Extending a component is done the same way you extend any SolidJS component.

tsx
import { Popover as KPopover } from "@kobalte/core";
import { ComponentProps } from "solid-js";
export const PopoverTrigger = (props: ComponentProps<typeof KPopover.Trigger>) => {
	return <KPopover.Trigger {...props} />;
};

tsx
import { Popover as KPopover } from "@kobalte/core";
import { ComponentProps } from "solid-js";
export const PopoverTrigger = (props: ComponentProps<typeof KPopover.Trigger>) => {
	return <KPopover.Trigger {...props} />;
};