# Getting Started Documentation Learn how to get started using Bits in your app. 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. Welcome to Bits UI, a collection of headless component primitives for Svelte 5 that prioritizes developer experience, accessibility, and flexibility. This guide will help you quickly integrate Bits UI into your Svelte application. ## Installation Install bits using your preferred package manager. ```bash npm install bits-ui ``` ## Basic Usage After installation, you can import and use Bits UI components in your Svelte files. Here's a simple example using the [Accordion](/docs/components/accordion) component. ```svelte <script lang="ts"> import { Accordion } from "bits-ui"; </script> <Accordion.Root> <Accordion.Item> <Accordion.Header> <Accordion.Trigger>First</Accordion.Trigger> </Accordion.Header> <Accordion.Content>First accordion content</Accordion.Content> </Accordion.Item> <Accordion.Item> <Accordion.Header> <Accordion.Trigger>Second</Accordion.Trigger> </Accordion.Header> <Accordion.Content>Second accordion content</Accordion.Content> </Accordion.Item> </Accordion.Root> ``` ## Adding Styles Bits UI components are headless by design, meaning they ship with minimal styling. This gives you complete control over the appearance of your components. Each component that renders an HTML element exposes a `class` prop and `style` prop that you can use to apply styles to the element. ### Styling with TailwindCSS or UnoCSS If you're using a CSS framework like TailwindCSS or UnoCSS, you can pass the classes directly to the components: ```svelte <script lang="ts"> import { Accordion } from "bits-ui"; </script> <Accordion.Root class="mx-auto w-full max-w-md"> <Accordion.Item class="mb-2 rounded-md border border-gray-200"> <Accordion.Header class="bg-gray-50 transition-colors hover:bg-gray-100"> <Accordion.Trigger class="flex w-full items-center justify-between p-4 text-left font-medium" > <span>Tailwind-styled Accordion</span> <svg class="h-5 w-5 transform transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </Accordion.Trigger> </Accordion.Header> <Accordion.Content class="p-4 text-gray-700"> This accordion is styled using Tailwind CSS classes. </Accordion.Content> </Accordion.Item> </Accordion.Root> ``` ### Styling with Data Attributes Each Bits UI component applies specific data attributes to the underlying HTML elements. You can use these attributes to target components in your global styles: 1. Check the API Reference for each component to determine its data attributes 2. Use those attributes in your CSS selectors +layout.svelte ```svelte <script lang="ts"> import { Button } from "bits-ui"; import "../app.css"; </script> <Button.Root>Click me</Button.Root> ``` app.css ```css [data-button-root] { height: 3rem; width: 100%; background-color: #3182ce; color: white; border-radius: 0.375rem; padding: 0.5rem 1rem; font-weight: 500; } [data-button-root]:hover { background-color: #2c5282; } ``` With this approach, every `Button.Root` component will have these styles applied to it automatically. ## TypeScript Support Bits UI is built with TypeScript and provides comprehensive type definitions. When using TypeScript, you'll get full type checking and autocompletion: ```svelte <script lang="ts"> import { Accordion } from "bits-ui"; // TypeScript will validate these props const accordionMultipleProps: Accordion.RootProps = { type: "multiple", value: ["item-1"], // type error if value is not an array }; const accordionSingleProps: Accordion.RootProps = { type: "single", value: "item-1", // type error if value is an array }; </script> ``` ## Next Steps Now that you have Bits UI installed and working, you can: - Explore the [Component Documentation](/docs/components) to learn about all available components - Learn about render delegation using the [Child Snippet](/docs/child-snippet) for maximum flexibility and customization - Learn how Bits UI handles [State Management](/docs/state-management) and how you can take more control over your components ## Resources If you have questions or need help, there are several ways to get support from the Bits UI community: - For confirmed bugs, please [open an issue](https://github.com/huntabyte/bits-ui/issues) on GitHub. - Have a question or need help? Join our [Discord community](https://discord.gg/fdXy3Sk8Gq) or [open a discussion](https://github.com/huntabyte/bits-ui/discussions/new) on GitHub to chat with other developers and the Bits UI team. - Have a feature request or idea? [Open a discussion](https://github.com/huntabyte/bits-ui/discussions/new?category=feature-requests-ideas) on GitHub to share your thoughts. All feature requests start as discussions before formally being moved to issues.