# 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. Copy Page 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 Item 1 Title This is the collapsible content for this section. Item 2 Title This is the collapsible content for this section. ``` ## 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 Tailwind-styled Accordion This accordion is styled using Tailwind CSS classes. ``` ### 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 Click me ``` 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 ``` ## 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. [Previous Introduction](/docs/introduction) [Next Child Snippet](/docs/child-snippet)

getting-started