# Styling Documentation Learn how to style Bits UI components. This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue. Copy Page We ship almost zero styles with Bits UI by design, giving you complete flexibility when styling your components. For each component that renders an HTML element, we expose the `class` and `style` props to apply styles directly to the component. ## Styling Approaches ### CSS Frameworks If you're using a CSS framework like [TailwindCSS](https://tailwindcss.com/) or [UnoCSS](https://unocss.dev), simply pass the classes to the component: ```svelte Click me ``` ### Data Attributes Each Bits UI component applies specific data attributes to its rendered elements. These attributes provide reliable selectors for styling across your application. app.css ```css /* Target all Accordion.Trigger components */ [data-accordion-trigger] { height: 3rem; width: 100%; background-color: #3182ce; color: #fff; } ``` Import your stylesheet in your layout component: +layout.svelte ```svelte {@render children()} ``` Now every `Accordion.Trigger` component will have the styles applied to it. ### Global Classes Alternatively, you can use global class names: app.css ```css .accordion-trigger { height: 3rem; width: 100%; background-color: #3182ce; color: #fff; } ``` Import your stylesheet in your layout component: +layout.svelte ```svelte {@render children()} ``` Use the global class with the component: ```svelte Click me ``` ### Scoped Styles To use Svelte's scoped styles, use the `child` snippet to bring the element into your component's scope. See the [Child Snippet](/docs/child-snippet) documentation for more information. MyAccordionTrigger.svelte ```svelte {#snippet child({ props })} {/snippet} ``` ### Style Prop All Bits UI components that render an element accept a style prop as either a string or an object of CSS properties. These are merged with internal styles using the [`mergeProps`](/docs/utilities/merge-props) function. ```svelte Click me Click me ``` ## Styling Component States Bits UI components may expose state information through data attributes and CSS variables, allowing you to create dynamic styles based on component state. ### State Data Attributes Components apply state-specific data attributes that you can target in your CSS: ```css /* Style the Accordion.Trigger when open */ [data-accordion-trigger][data-state="open"] { background-color: #f0f0f0; font-weight: bold; } /* Style the Accordion.Trigger when closed */ [data-accordion-trigger][data-state="closed"] { background-color: #ffffff; } /* Style disabled components */ [data-accordion-trigger][data-disabled] { opacity: 0.5; cursor: not-allowed; } ``` See each component's API reference for its specific data attributes. ### CSS Variables Bits UI components may expose CSS variables that allow you to access internal component values. For example, to ensure the `Select.Content` is the same width as the anchor (by default is the `Select.Trigger` unless using a `customAnchor`), you can use the `--bits-select-anchor-width` CSS variable: ```css [data-select-content] { width: var(--bits-select-anchor-width); min-width: var(--bits-select-anchor-width); max-width: var(--bits-select-anchor-width); } ``` See each component's API reference for specific CSS variables it provides. ### Example: Styling an Accordion Here's an example styling an accordion with different states: ```svelte Section 1 Content for section 1 Section 2 (Disabled) Content for section 2 ``` ## Advanced Styling Techniques ### Combining Data Attributes with CSS Variables You can combine data attributes with CSS variables to create dynamic styles based on component state. Here's how to animate the accordion content using the `--bits-accordion-content-height` variable and the `data-state` attribute: ```css /* Basic transition animation */ [data-accordion-content] { overflow: hidden; transition: height 300ms ease-out; height: 0; } [data-accordion-content][data-state="open"] { height: var(--bits-accordion-content-height); } [data-accordion-content][data-state="closed"] { height: 0; } ``` ### Custom Keyframe Animations For more control, use keyframe animations with the CSS variables: ```css /* Define keyframes for opening animation */ @keyframes accordionOpen { 0% { height: 0; opacity: 0; } 80% { height: var(--bits-accordion-content-height); opacity: 0.8; } 100% { height: var(--bits-accordion-content-height); opacity: 1; } } /* Define keyframes for closing animation */ @keyframes accordionClose { 0% { height: var(--bits-accordion-content-height); opacity: 1; } 20% { height: var(--bits-accordion-content-height); opacity: 0.8; } 100% { height: 0; opacity: 0; } } /* Apply animations based on state */ [data-accordion-content][data-state="open"] { animation: accordionOpen 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } [data-accordion-content][data-state="closed"] { animation: accordionClose 300ms cubic-bezier(0.7, 0, 0.84, 0) forwards; } ``` ### Example: Animated Accordion Here's an example of an accordion with a custom transition: ```svelte Section 1 Content for section 1 Section 2 Content for section 2 ``` [Previous Transitions](/docs/transitions) [Next Dates](/docs/dates)