PettyUI/.firecrawl/kobalte-styling.md

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.

index.tsxstyle.css

Copytsx
import { Popover as KPopover } from "@kobalte/core";
import "./style.css";

export const Popover = () => {
  return (
    <KPopover>
      <KPopover.Trigger class="popover__trigger">
        Open
      </KPopover.Trigger>
      <KPopover.Content class="popover__content">
        ...
      </KPopover.Content>
    </KPopover>
  );
};

Copytsx
import { Popover as KPopover } from "@kobalte/core";
import "./style.css";

export const Popover = () => {
  return (
    <KPopover>
      <KPopover.Trigger class="popover__trigger">
        Open
      </KPopover.Trigger>
      <KPopover.Content class="popover__content">
        ...
      </KPopover.Content>
    </KPopover>
  );
};

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.

style.css

Copycss
.popover__trigger[data-disabled] {
  /* The popover trigger style when disabled. */
}

Copycss
.popover__trigger[data-disabled] {
  /* The popover trigger style when disabled. */
}

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

npmyarnpnpm

Copybash
npm install @kobalte/tailwindcss

Copybash
npm install @kobalte/tailwindcss

Usage

Add the plugin to your tailwind.config.js :

Copyjs
/** @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" }),\
	],
};

Copyjs
/** @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:

Copytsx
import { Popover as KPopover } from "@kobalte/core/popover";

export const Popover = () => (
	<KPopover>
		<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>
);

Copytsx
import { Popover as KPopover } from "@kobalte/core/popover";

export const Popover = () => (
	<KPopover>
		<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>
);

You can use the following modifiers:

Modifier	CSS Selector
ui-valid	&[data-valid]
ui-invalid	&[data-invalid]
ui-required	&[data-required]
ui-disabled	&[data-disabled]
ui-readonly	&[data-readonly]
ui-checked	&[data-checked]
ui-indeterminate	&[data-indeterminate]
ui-selected	&[data-selected]
ui-pressed	&[data-pressed]
ui-expanded	&[data-expanded]
ui-highlighted	&[data-highlighted]
ui-current	&[data-current]

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

npmyarnpnpm

Copybash
npm install @kobalte/vanilla-extract

Copybash
npm install @kobalte/vanilla-extract

Usage

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

Copyts
// 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]" },\
	),\
]);

Copyts
// 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:

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

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

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

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

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.

Copytsx
import { Popover as KPopover } from "@kobalte/core/popover";
import { ComponentProps } from "solid-js";

export const PopoverTrigger = (props: ComponentProps<typeof KPopover.Trigger>) => {
	return <KPopover.Trigger {...props} />;
};

Copytsx
import { Popover as KPopover } from "@kobalte/core/popover";
import { ComponentProps } from "solid-js";

export const PopoverTrigger = (props: ComponentProps<typeof KPopover.Trigger>) => {
	return <KPopover.Trigger {...props} />;
};

Previous←Getting startedNextAnimation→