docs: updates and a couple examples (#322)

content/components/accordion.md

@@ -32,3 +32,40 @@ description: Organizes content into collapsible sections, allowing users to focu
 ```
 
 <APISection {schemas} />
+
+## Examples
+
+### Multiple
+
+Multiple accordion items open at the same time using the `multiple` prop.
+
+```svelte showLineNumbers {1}
+<Accordion.Root multiple>
+	<!-- ... -->
+</Accordion.Root>
+```
+
+### Controlled
+
+You can programmatically control the active of the accordion item(s) using the `value` prop.
+
+```svelte showLineNumbers
+<script lang="ts">
+	let value = "item-1";
+</script>
+
+<Accordion.Root bind:value>
+	<Accordion.Item value="item-1">
+		<Accordion.Header>
+			<Accordion.Trigger />
+		</Accordion.Header>
+		<Accordion.Content />
+	</Accordion.Item>
+	<Accordion.Item value="item-2">
+		<Accordion.Header>
+			<Accordion.Trigger />
+		</Accordion.Header>
+		<Accordion.Content />
+	</Accordion.Item>
+</Accordion.Root>
+```

content/components/alert-dialog.md

@@ -35,11 +35,15 @@ description: A modal window that alerts users with important information and awa
 </AlertDialog.Root>
 ```
 
-## Controlled Usage
+<APISection {schemas} />
 
-If you want to control or be aware of the `open` state of the dialog from outside of the component, you can bind to the `open` prop.
+## Examples
 
-```svelte
+### Controlled
+
+If you want to control or be aware of the `open` state of the dialog from outside of the component, bind to the `open` prop.
+
+```svelte showLineNumbers
 <script lang="ts">
 	import { AlertDialog } from "bits-ui";
 	let dialogOpen = false;
@@ -59,5 +63,3 @@ If you want to control or be aware of the `open` state of the dialog from outsid
 	</AlertDialog.Portal>
 </AlertDialog.Root>
 ```
-
-<APISection {schemas} />

content/components/popover.md

@@ -30,9 +30,13 @@ description: Display supplementary content or information when users interact wi
 </Popover.Root>
 ```
 
-## Controlled Usage
+<APISection {schemas} />
+
+## Examples
+
+### Controlled
 
-If you want to control or be aware of the `open` state of the popover from outside of the component, you can bind to the `open` prop.
+If you want to control or be aware of the `open` state of the popover from outside of the component, bind to the `open` prop.
 
 ```svelte
 <script lang="ts">
@@ -49,5 +53,3 @@ If you want to control or be aware of the `open` state of the popover from outsi
 	</Popover.Content>
 </Popover.Root>
 ```
-
-<APISection {schemas} />

content/introduction.md

@@ -5,7 +5,23 @@ description: The headless components for Svelte.
 
 Bits UI is a collection of headless component primitives that enable you to build your own custom components. They have been thoughtfully designed to prioritize simplicity without compromising customizability.
 
-Under the hood, most of these components are powered by [Melt UI](https://melt-ui.com), which provides an even lower-level builder API for creating headless components. We take that API and wrap it in a more familiar component interface, which allows us to handle some quality of life improvements for you.
+Under the hood, most of these components are powered by [Melt UI](https://melt-ui.com), which provides an even lower-level builder API for creating headless components. Bits takes that API and wrap it in a more familiar component interface, allowing us to handle some quality of life improvements for you.
+
+## Unstyled
+
+Bits UI components are unstyled by default. This means that they don't come with any styles out of the box. This is intentional, as it allows you to style them however you want. You can use the `class` prop to apply your own styles, or use the applied data attributes to target the components across your entire application. Check out the [styling](/styling) section for more information.
+
+## Customizable
+
+Each component has a wide range of props that allow you to customize the behavior of the component to fit your needs. Events are also dispatched for each interaction, allowing you to override the default functionality of the component.
+
+## Accessible
+
+A ton of effort has been invested in making sure that the components are accessible by default. They've been designed following the best practices for accessibility with the goal of making them usable by as many people as possible. Keyboard navigation, screen reader support, and focus management are all built-in.
+
+## Consistent
+
+The API of each component has been designed with consistency in mind. This means that once you learn how to use one component, you should be able to use similar components with ease. While the docs are always there to help, the goal is to make the components as intuitive as possible.
 
 ## Credits
 

content/styling.md

@@ -3,13 +3,13 @@ title: Styling
 description: Learn how to style Bits UI components.
 ---
 
-We ship almost zero styles with Bits UI. This is intentional, as we want to give you the most flexibility possible when it comes to styling your components.
+We ship almost zero styles with Bits UI. This is intentional. We want to give you the most flexibility possible when it comes to styling your components.
 
-For each component that renders an HTML element, we provide a `class` prop that you can use to apply styles to the component. This is the recommended and most straightforward way to style them.
+For each component that renders an HTML element, we expose a `class` prop that you can use to apply styles to the component. This is the recommended and most straightforward way to style them.
 
 ## CSS frameworks
 
-If you're using a CSS framework like TailwindCSS or UnoCSS, you can simply pass the classes you need to the component, and they will be applied to the underlying HTML element it renders.
+If you're using a CSS framework like TailwindCSS or UnoCSS, you can simply pass the classes you need to the component, and they will be applied to the underlying HTML element.
 
 ```svelte
 <script lang="ts">
@@ -48,7 +48,7 @@ You can then use those data attributes like so:
 <slot />
 ```
 
-Now every `Button.Root` component will have the styles applied to it.
+Now every `<Button.Root />` component will have the styles applied to it.
 
 ## Global classes