diff --git a/.changeset/plenty-frogs-decide.md b/.changeset/plenty-frogs-decide.md
new file mode 100644
index 0000000..4b8309f
--- /dev/null
+++ b/.changeset/plenty-frogs-decide.md
@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': patch
+---
+
+Added combobox, accordion and checkbox components
diff --git a/package.json b/package.json
index 783adcb..e3610dd 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "@internationalized/date": "^3.5.2",
     "@melt-ui/svelte": "^0.76.2",
-    "bits-ui": "^0.21.7",
+    "bits-ui": "^0.21.8",
     "clsx": "^2.1.0",
     "cmdk-sv": "^0.0.17",
     "formsnap": "^1.0.0",
@@ -52,6 +52,10 @@
     "vitest": "^1.2.0"
   },
   "exports": {
+    "./components/accordion": {
+      "types": "./dist/components/accordion/index.d.ts",
+      "svelte": "./dist/components/accordion/index.js"
+    },
     "./components/alert": {
       "types": "./dist/components/alert/index.d.ts",
       "svelte": "./dist/components/alert/index.js"
@@ -76,10 +80,18 @@
       "types": "./dist/components/card/index.d.ts",
       "svelte": "./dist/components/card/index.js"
     },
+    "./components/checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "svelte": "./dist/components/checkbox/index.js"
+    },
     "./components/collapsible": {
       "types": "./dist/components/collapsible/index.d.ts",
       "svelte": "./dist/components/collapsible/index.js"
     },
+    "./components/combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "svelte": "./dist/components/combobox/index.js"
+    },
     "./components/command": {
       "types": "./dist/components/command/index.d.ts",
       "svelte": "./dist/components/command/index.js"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d7ebe80..edf5d17 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
         specifier: ^0.76.2
         version: 0.76.2(svelte@4.2.12)
       bits-ui:
-        specifier: ^0.21.7
-        version: 0.21.7(svelte@4.2.12)
+        specifier: ^0.21.8
+        version: 0.21.8(svelte@4.2.12)
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
@@ -850,8 +850,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  bits-ui@0.21.7:
-    resolution: {integrity: sha512-1PKp90ly1R6jexIiAUj1Dk4u2pln7ok+L8Vc0rHMY7pi7YZvadFNZvkp1G5BtmL8qh2xsn4MVNgKjPAQMCxW0A==}
+  bits-ui@0.21.8:
+    resolution: {integrity: sha512-fr++Gf//41w9/Td5r1SfaeA/XXv5YEOw3LFY7JVH+eAbi7RzNqf7Xy8BS/W8HXfRqlsu1ReFgZ7ZZ4DbrP4HwQ==}
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.118
 
@@ -3659,7 +3659,7 @@ snapshots:
       nanoid: 5.0.7
       svelte: 4.2.12
 
-  bits-ui@0.21.7(svelte@4.2.12):
+  bits-ui@0.21.8(svelte@4.2.12):
     dependencies:
       '@internationalized/date': 3.5.2
       '@melt-ui/svelte': 0.76.2(svelte@4.2.12)
diff --git a/src/lib/components/accordion/AccordionContent.svelte b/src/lib/components/accordion/AccordionContent.svelte
new file mode 100644
index 0000000..8eac23d
--- /dev/null
+++ b/src/lib/components/accordion/AccordionContent.svelte
@@ -0,0 +1,99 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { slide } from 'svelte/transition';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentInfo, Transition } from '$lib/utils/types.js';
+
+  type Primitive<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = ComponentInfo<
+    AccordionPrimitive.Content<TContentTransition, TContentTransitionIn, TContentTransitionOut>
+  >;
+
+  /**
+   * The attributes of the content.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the content.
+   */
+  export type Props<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = Omit<
+    Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['props'],
+    keyof Attributes
+  >;
+  /**
+   * The slots of the content.
+   */
+  export type Slots<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['slots'];
+
+  /**
+   * The styles of the content.
+   */
+  export const styles = tv({
+    base: ['overflow-hidden p-1 text-sm transition-all'],
+  });
+</script>
+
+<script
+  generics="
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  "
+  lang="ts"
+>
+  type $$Events = Primitive<
+    TContentTransition,
+    TContentTransitionIn,
+    TContentTransitionOut
+  >['events'];
+  type $$Props = Attributes & TypedProps;
+  type $$Slots = Slots<TContentTransition, TContentTransitionIn, TContentTransitionOut>;
+  type TypedProps = Props<TContentTransition, TContentTransitionIn, TContentTransitionOut>;
+
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let el: TypedProps['el'] = undefined;
+  export let inTransition: TypedProps['inTransition'] = undefined;
+  export let inTransitionConfig: TypedProps['inTransitionConfig'] = undefined;
+  export let outTransition: TypedProps['outTransition'] = undefined;
+  export let outTransitionConfig: TypedProps['outTransitionConfig'] = undefined;
+  export let transition: TypedProps['transition'] = slide as TypedProps['transition'];
+  export let transitionConfig: TypedProps['transitionConfig'] = {
+    duration: 200,
+  };
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Content
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  el="{el}"
+  inTransition="{inTransition}"
+  inTransitionConfig="{inTransitionConfig}"
+  outTransition="{outTransition}"
+  outTransitionConfig="{outTransitionConfig}"
+  transition="{transition}"
+  transitionConfig="{transitionConfig}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</AccordionPrimitive.Content>
diff --git a/src/lib/components/accordion/AccordionItem.svelte b/src/lib/components/accordion/AccordionItem.svelte
new file mode 100644
index 0000000..bc2a3ad
--- /dev/null
+++ b/src/lib/components/accordion/AccordionItem.svelte
@@ -0,0 +1,59 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<AccordionPrimitive.Item>;
+
+  /**
+   * The attributes of the item.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the item.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the item.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the item.
+   */
+  export const styles = tv({
+    base: [''],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let disabled: Props['disabled'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let value: Props['value'];
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Item
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  disabled="{disabled}"
+  el="{el}"
+  value="{value}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</AccordionPrimitive.Item>
diff --git a/src/lib/components/accordion/AccordionRoot.svelte b/src/lib/components/accordion/AccordionRoot.svelte
new file mode 100644
index 0000000..5d16fa7
--- /dev/null
+++ b/src/lib/components/accordion/AccordionRoot.svelte
@@ -0,0 +1,69 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive<TMultiple extends boolean = false> = ComponentInfo<
+    AccordionPrimitive.Root<TMultiple>
+  >;
+
+  /**
+   * The attributes of the root.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the root.
+   */
+  export type Props<TMultiple extends boolean = false> = Omit<
+    Primitive<TMultiple>['props'],
+    keyof Attributes
+  >;
+  /**
+   * The slots of the root.
+   */
+  export type Slots<TMultiple extends boolean = false> = Primitive<TMultiple>['slots'];
+
+  /**
+   * The styles of the root.
+   */
+  export const styles = tv({
+    base: ['divide-y'],
+  });
+</script>
+
+<script generics="TMultiple extends boolean = false" lang="ts">
+  type $$Events = Primitive<TMultiple>['events'];
+  type $$Props = Attributes & TypedProps;
+  type $$Slots = Slots<TMultiple>;
+  type TypedProps = Props<TMultiple>;
+
+  export let asChild: TypedProps['asChild'] = undefined;
+  export let disabled: TypedProps['disabled'] = undefined;
+  export let el: TypedProps['el'] = undefined;
+  export let multiple: TypedProps['multiple'] = undefined;
+  export let onValueChange: TypedProps['onValueChange'] = undefined;
+  export let value: TypedProps['value'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Root
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  disabled="{disabled}"
+  el="{el}"
+  multiple="{multiple}"
+  onValueChange="{onValueChange}"
+  bind:value="{value}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</AccordionPrimitive.Root>
diff --git a/src/lib/components/accordion/AccordionTrigger.svelte b/src/lib/components/accordion/AccordionTrigger.svelte
new file mode 100644
index 0000000..ba0fa45
--- /dev/null
+++ b/src/lib/components/accordion/AccordionTrigger.svelte
@@ -0,0 +1,73 @@
+<script context="module" lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import ChevronDownIcon from 'lucide-svelte/icons/chevron-down';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<AccordionPrimitive.Trigger>;
+
+  /**
+   * The attributes of the trigger.
+   */
+  export type Attributes = SvelteHTMLElements['button'];
+  /**
+   * The props of the trigger.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes> & {
+    headerAttributesAndProps?: ComponentInfo<AccordionPrimitive.Header>['props'];
+  };
+  /**
+   * The slots of the trigger.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the trigger.
+   */
+  export const styles = tv({
+    base: [
+      'flex flex-1 items-center justify-between py-4 font-medium transition-all',
+      'hover:underline',
+      '[&[data-state=open]>svg]:rotate-180',
+    ],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let headerAttributesAndProps: Props['headerAttributesAndProps'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<AccordionPrimitive.Header
+  {...headerAttributesAndProps}
+  class="{cn('flex', headerAttributesAndProps?.class)}"
+>
+  <AccordionPrimitive.Trigger
+    {...attributes}
+    asChild="{asChild}"
+    class="{styles({
+      class: attributes.class,
+    })}"
+    el="{el}"
+    let:builder
+    on:click
+    on:keydown
+  >
+    <slot builder="{builder}" />
+
+    <ChevronDownIcon class="h-4 w-4 transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/src/lib/components/accordion/index.ts b/src/lib/components/accordion/index.ts
new file mode 100644
index 0000000..ca42fc4
--- /dev/null
+++ b/src/lib/components/accordion/index.ts
@@ -0,0 +1,28 @@
+export {
+  default as Content,
+  styles as contentStyles,
+  type Attributes as ContentAttributes,
+  type Props as ContentProps,
+  type Slots as ContentSlots,
+} from './AccordionContent.svelte';
+export {
+  default as Item,
+  styles as itemStyles,
+  type Attributes as ItemAttributes,
+  type Props as ItemProps,
+  type Slots as ItemSlots,
+} from './AccordionItem.svelte';
+export {
+  default as Root,
+  styles as rootStyles,
+  type Attributes as RootAttributes,
+  type Props as RootProps,
+  type Slots as RootSlots,
+} from './AccordionRoot.svelte';
+export {
+  default as Trigger,
+  styles as triggerStyles,
+  type Attributes as TriggerAttributes,
+  type Props as TriggerProps,
+  type Slots as TriggerSlots,
+} from './AccordionTrigger.svelte';
diff --git a/src/lib/components/alert-dialog/AlertDialogAction.svelte b/src/lib/components/alert-dialog/AlertDialogAction.svelte
index a7d55d4..43d5f1d 100644
--- a/src/lib/components/alert-dialog/AlertDialogAction.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogAction.svelte
@@ -46,7 +46,13 @@
    * The styles of the action.
    */
   export const styles = tv({
-    ...buttonStyles,
+    base: [...buttonStyles.base],
+    defaultVariants: {
+      ...buttonStyles.defaultVariants,
+    },
+    variants: {
+      ...buttonStyles.variants,
+    },
   });
   /**
    * The default size of the action.
diff --git a/src/lib/components/alert-dialog/AlertDialogCancel.svelte b/src/lib/components/alert-dialog/AlertDialogCancel.svelte
index e076cda..aad46c9 100644
--- a/src/lib/components/alert-dialog/AlertDialogCancel.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogCancel.svelte
@@ -46,11 +46,14 @@
    * The styles of the cancel.
    */
   export const styles = tv({
-    ...buttonStyles,
+    base: [...buttonStyles.base],
     defaultVariants: {
       ...buttonStyles.defaultVariants,
       variant: 'outline',
     },
+    variants: {
+      ...buttonStyles.variants,
+    },
   });
   /**
    * The default size of the cancel.
diff --git a/src/lib/components/breadcrumb/BreadcrumbEllipsis.svelte b/src/lib/components/breadcrumb/BreadcrumbEllipsis.svelte
index b5980c9..7ea3206 100644
--- a/src/lib/components/breadcrumb/BreadcrumbEllipsis.svelte
+++ b/src/lib/components/breadcrumb/BreadcrumbEllipsis.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import Ellipsis from 'lucide-svelte/icons/ellipsis';
+  import EllipsisIcon from 'lucide-svelte/icons/ellipsis';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -63,7 +63,7 @@
     bind:this="{el}"
   >
     <slot>
-      <Ellipsis class="h-4 w-4" />
+      <EllipsisIcon class="h-4 w-4" />
 
       <span class="sr-only">More</span>
     </slot>
diff --git a/src/lib/components/breadcrumb/BreadcrumbSeparator.svelte b/src/lib/components/breadcrumb/BreadcrumbSeparator.svelte
index 940427e..738a01e 100644
--- a/src/lib/components/breadcrumb/BreadcrumbSeparator.svelte
+++ b/src/lib/components/breadcrumb/BreadcrumbSeparator.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import ChevronRightIcon from 'lucide-svelte/icons/chevron-right';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -63,7 +63,7 @@
     bind:this="{el}"
   >
     <slot>
-      <ChevronRight />
+      <ChevronRightIcon />
     </slot>
   </li>
 {/if}
diff --git a/src/lib/components/calendar/CalendarRoot.svelte b/src/lib/components/calendar/CalendarRoot.svelte
index d77cc1c..763822c 100644
--- a/src/lib/components/calendar/CalendarRoot.svelte
+++ b/src/lib/components/calendar/CalendarRoot.svelte
@@ -101,7 +101,7 @@
    * The styles of the calendar.
    */
   export const styles = tv({
-    base: ['p-3'],
+    base: ['inline-block p-3'],
   });
   /**
    * The week starts on values.
diff --git a/src/lib/components/checkbox/Checkbox.svelte b/src/lib/components/checkbox/Checkbox.svelte
new file mode 100644
index 0000000..cad70fa
--- /dev/null
+++ b/src/lib/components/checkbox/Checkbox.svelte
@@ -0,0 +1,90 @@
+<script context="module" lang="ts">
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+  import CheckIcon from 'lucide-svelte/icons/check';
+  import MinusIcon from 'lucide-svelte/icons/minus';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { cn } from '$lib/utils/cn.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<CheckboxPrimitive.Root>;
+
+  /**
+   * The attributes of the checkbox.
+   */
+  export type Attributes = Omit<SvelteHTMLElements['button'], 'disabled' | 'name' | 'value'>;
+  /**
+   * The props of the checkbox.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the checkbox.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the checkbox.
+   */
+  export const styles = tv({
+    base: [
+      'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+      'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+    ],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let checked: Props['checked'] = undefined;
+  export let disabled: Props['disabled'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let name: Props['name'] = undefined;
+  export let onCheckedChange: Props['onCheckedChange'] = undefined;
+  export let required: Props['required'] = undefined;
+  export let value: Props['value'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<CheckboxPrimitive.Root
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  disabled="{disabled}"
+  el="{el}"
+  name="{name}"
+  onCheckedChange="{onCheckedChange}"
+  required="{required}"
+  value="{value}"
+  bind:checked="{checked}"
+  let:builder
+  on:click
+  on:keydown
+>
+  <slot builder="{builder}">
+    <CheckboxPrimitive.Indicator
+      class="{cn('flex h-4 w-4 items-center justify-center text-current')}"
+      let:isChecked
+      let:isIndeterminate
+    >
+      {#if isChecked}
+        <CheckIcon class="h-3.5 w-3.5" />
+      {:else if isIndeterminate}
+        <MinusIcon class="h-3.5 w-3.5" />
+      {/if}
+    </CheckboxPrimitive.Indicator>
+  </slot>
+</CheckboxPrimitive.Root>
diff --git a/src/lib/components/checkbox/index.ts b/src/lib/components/checkbox/index.ts
new file mode 100644
index 0000000..f59b0cb
--- /dev/null
+++ b/src/lib/components/checkbox/index.ts
@@ -0,0 +1 @@
+export { default, styles, type Attributes, type Props, type Slots } from './Checkbox.svelte';
diff --git a/src/lib/components/combobox/ComboboxContent.svelte b/src/lib/components/combobox/ComboboxContent.svelte
new file mode 100644
index 0000000..37a4552
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxContent.svelte
@@ -0,0 +1,122 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { contentStyles as selectContentStyles } from '$lib/components/select/index.js';
+  import { flyAndScale } from '$lib/transition/flyAndScale.js';
+  import type { ComponentInfo, Transition } from '$lib/utils/types.js';
+
+  type Primitive<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = ComponentInfo<
+    ComboboxPrimitive.Content<TContentTransition, TContentTransitionIn, TContentTransitionOut>
+  >;
+
+  /**
+   * The attributes of the content.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the content.
+   */
+  export type Props<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = Omit<
+    Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['props'],
+    keyof Attributes
+  >;
+  /**
+   * The slots of the content.
+   */
+  export type Slots<
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  > = Primitive<TContentTransition, TContentTransitionIn, TContentTransitionOut>['slots'];
+
+  /**
+   * The styles of the content.
+   */
+  export const styles = tv({
+    base: [...selectContentStyles.base],
+  });
+</script>
+
+<script
+  generics="
+    TContentTransition extends Transition = Transition,
+    TContentTransitionIn extends Transition = Transition,
+    TContentTransitionOut extends Transition = Transition,
+  "
+  lang="ts"
+>
+  type $$Events = Primitive<
+    TContentTransition,
+    TContentTransitionIn,
+    TContentTransitionOut
+  >['events'];
+  type $$Props = Attributes & TypedProps;
+  type $$Slots = Slots<TContentTransition, TContentTransitionIn, TContentTransitionOut>;
+  type TypedProps = Props<TContentTransition, TContentTransitionIn, TContentTransitionOut>;
+
+  export let align: TypedProps['align'] = undefined;
+  export let alignOffset: TypedProps['alignOffset'] = undefined;
+  export let asChild: Props['asChild'] = undefined;
+  export let avoidCollisions: TypedProps['avoidCollisions'] = undefined;
+  export let collisionBoundary: TypedProps['collisionBoundary'] = undefined;
+  export let collisionPadding: TypedProps['collisionPadding'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let fitViewport: TypedProps['fitViewport'] = undefined;
+  export let inTransition: TypedProps['inTransition'] = undefined;
+  export let inTransitionConfig: TypedProps['inTransitionConfig'] = undefined;
+  export let outTransition: TypedProps['outTransition'] = undefined;
+  export let outTransitionConfig: TypedProps['outTransitionConfig'] = undefined;
+  export let overlap: TypedProps['overlap'] = undefined;
+  export let sameWidth: TypedProps['sameWidth'] = undefined;
+  export let side: TypedProps['side'] = undefined;
+  export let sideOffset: TypedProps['sideOffset'] = 8;
+  export let strategy: TypedProps['strategy'] = undefined;
+  export let transition: TypedProps['transition'] = flyAndScale as TypedProps['transition'];
+  export let transitionConfig: TypedProps['transitionConfig'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.Content
+  {...attributes}
+  align="{align}"
+  alignOffset="{alignOffset}"
+  asChild="{asChild}"
+  avoidCollisions="{avoidCollisions}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  collisionBoundary="{collisionBoundary}"
+  collisionPadding="{collisionPadding}"
+  el="{el}"
+  fitViewport="{fitViewport}"
+  inTransition="{inTransition}"
+  inTransitionConfig="{inTransitionConfig}"
+  outTransition="{outTransition}"
+  outTransitionConfig="{outTransitionConfig}"
+  overlap="{overlap}"
+  sameWidth="{sameWidth}"
+  side="{side}"
+  sideOffset="{sideOffset}"
+  strategy="{strategy}"
+  transition="{transition}"
+  transitionConfig="{transitionConfig}"
+  let:builder
+  on:keydown
+  on:pointerleave
+>
+  <slot builder="{builder}" />
+</ComboboxPrimitive.Content>
diff --git a/src/lib/components/combobox/ComboboxGroup.svelte b/src/lib/components/combobox/ComboboxGroup.svelte
new file mode 100644
index 0000000..bd4d110
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxGroup.svelte
@@ -0,0 +1,56 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { groupStyles as selectGroupStyles } from '$lib/components/select/index.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<ComboboxPrimitive.Group>;
+
+  /**
+   * The attributes of the group.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the group.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the group.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the group.
+   */
+  export const styles = tv({
+    base: [...selectGroupStyles.base],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.Group
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  el="{el}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</ComboboxPrimitive.Group>
diff --git a/src/lib/components/combobox/ComboboxGroupLabel.svelte b/src/lib/components/combobox/ComboboxGroupLabel.svelte
new file mode 100644
index 0000000..80e81eb
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxGroupLabel.svelte
@@ -0,0 +1,57 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { labelStyles as selectLabelStyles } from '$lib/components/select/index.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<ComboboxPrimitive.GroupLabel>;
+
+  /**
+   * The attributes of the group label.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the group label.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the group label.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the group label.
+   */
+  export const styles = tv({
+    base: [...selectLabelStyles.base],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.GroupLabel
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  el="{el}"
+  let:builder
+  on:click
+>
+  <slot builder="{builder}" />
+</ComboboxPrimitive.GroupLabel>
diff --git a/src/lib/components/combobox/ComboboxHiddenInput.svelte b/src/lib/components/combobox/ComboboxHiddenInput.svelte
new file mode 100644
index 0000000..a2f26b2
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxHiddenInput.svelte
@@ -0,0 +1,57 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<ComboboxPrimitive.HiddenInput>;
+
+  /**
+   * The attributes of the hidden input.
+   */
+  export type Attributes = Omit<SvelteHTMLElements['input'], 'value'>;
+  /**
+   * The props of the hidden input.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the hidden input.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the hidden input.
+   */
+  export const styles = tv({
+    base: [] as string[],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let value: Props['value'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.HiddenInput
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  el="{el}"
+  bind:value="{value}"
+  let:builder
+>
+  <slot builder="{builder}" />
+</ComboboxPrimitive.HiddenInput>
diff --git a/src/lib/components/combobox/ComboboxInput.svelte b/src/lib/components/combobox/ComboboxInput.svelte
new file mode 100644
index 0000000..751bb86
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxInput.svelte
@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { styles as inputStyles } from '$lib/components/input/index.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<ComboboxPrimitive.Input>;
+
+  /**
+   * The attributes of the input.
+   */
+  export type Attributes = Omit<SvelteHTMLElements['input'], 'value'>;
+  /**
+   * The props of the input.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the input.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the input.
+   */
+  export const styles = tv({
+    base: [...inputStyles.base],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let value: Props['value'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.Input
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  el="{el}"
+  bind:value="{value}"
+  let:builder
+  let:placeholder
+  on:click
+  on:input
+  on:keydown
+>
+  <slot builder="{builder}" placeholder="{placeholder}" />
+</ComboboxPrimitive.Input>
diff --git a/src/lib/components/combobox/ComboboxItem.svelte b/src/lib/components/combobox/ComboboxItem.svelte
new file mode 100644
index 0000000..529065f
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxItem.svelte
@@ -0,0 +1,78 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import CheckIcon from 'lucide-svelte/icons/check';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { itemStyles as selectItemStyles } from '$lib/components/select/index.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<ComboboxPrimitive.Item>;
+
+  /**
+   * The attributes of the item.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the item.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the item.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the item.
+   */
+  export const styles = tv({
+    base: [...selectItemStyles.base],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let disabled: Props['disabled'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let label: Props['label'] = undefined;
+  export let value: Props['value'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.Item
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  disabled="{disabled}"
+  el="{el}"
+  label="{label}"
+  value="{value}"
+  let:builder
+  let:isSelected
+  on:click
+  on:focusin
+  on:focusout
+  on:keydown
+  on:pointerleave
+  on:pointermove
+>
+  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <ComboboxPrimitive.ItemIndicator>
+      <CheckIcon class="h-4 w-4" />
+    </ComboboxPrimitive.ItemIndicator>
+  </span>
+
+  <slot builder="{builder}" isSelected="{isSelected}">
+    {label || value}
+  </slot>
+</ComboboxPrimitive.Item>
diff --git a/src/lib/components/combobox/ComboboxLabel.svelte b/src/lib/components/combobox/ComboboxLabel.svelte
new file mode 100644
index 0000000..abd0816
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxLabel.svelte
@@ -0,0 +1,55 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import { labelStyles as selectLabelStyles } from '$lib/components/select/index.js';
+  import type { ComponentInfo } from '$lib/utils/types.js';
+
+  type Primitive = ComponentInfo<ComboboxPrimitive.Label>;
+
+  /**
+   * The attributes of the label.
+   */
+  export type Attributes = SvelteHTMLElements['label'];
+  /**
+   * The props of the label.
+   */
+  export type Props = Omit<Primitive['props'], keyof Attributes>;
+  /**
+   * The slots of the label.
+   */
+  export type Slots = Primitive['slots'];
+
+  /**
+   * The styles of the label.
+   */
+  export const styles = tv({
+    base: [...selectLabelStyles.base],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Primitive['events'];
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.Label
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+  })}"
+  el="{el}"
+>
+  <slot />
+</ComboboxPrimitive.Label>
diff --git a/src/lib/components/combobox/ComboboxRoot.svelte b/src/lib/components/combobox/ComboboxRoot.svelte
new file mode 100644
index 0000000..c787545
--- /dev/null
+++ b/src/lib/components/combobox/ComboboxRoot.svelte
@@ -0,0 +1,81 @@
+<script context="module" lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+
+  import type { ComponentInfo, EmptyObject } from '$lib/utils/types.js';
+
+  type Primitive<TItem, TMultiple extends boolean = false> = ComponentInfo<
+    ComboboxPrimitive.Root<TItem, TMultiple>
+  >;
+
+  /**
+   * The attributes of the root.
+   */
+  export type Attributes = EmptyObject;
+  /**
+   * The props of the root.
+   */
+  export type Props<TItem, TMultiple extends boolean = false> = Omit<
+    Primitive<TItem, TMultiple>['props'],
+    'highlightOnHover' | 'scrollAlignment'
+  >;
+  /**
+   * The slots of the root.
+   */
+  export type Slots<TItem, TMultiple extends boolean = false> = Primitive<
+    TItem,
+    TMultiple
+  >['slots'];
+</script>
+
+<script generics="TItem, TMultiple extends boolean = false" lang="ts">
+  type $$Events = Primitive<TItem, TMultiple>['events'];
+  type $$Props = Attributes & TypedProps;
+  type $$Slots = Slots<TItem, TMultiple>;
+  type TypedProps = Props<TItem, TMultiple>;
+
+  export let closeOnEscape: TypedProps['closeOnEscape'] = undefined;
+  export let closeOnOutsideClick: TypedProps['closeOnOutsideClick'] = undefined;
+  export let disabled: TypedProps['disabled'] = undefined;
+  export let inputValue: TypedProps['inputValue'] = undefined;
+  export let items: TypedProps['items'] = undefined;
+  export let loop: TypedProps['loop'] = undefined;
+  export let multiple: TypedProps['multiple'] = undefined;
+  export let name: TypedProps['name'] = undefined;
+  export let onOpenChange: TypedProps['onOpenChange'] = undefined;
+  export let onOutsideClick: TypedProps['onOutsideClick'] = undefined;
+  export let onSelectedChange: TypedProps['onSelectedChange'] = undefined;
+  export let open: TypedProps['open'] = undefined;
+  export let portal: TypedProps['portal'] = undefined;
+  export let preventScroll: TypedProps['preventScroll'] = undefined;
+  export let required: TypedProps['required'] = undefined;
+  export let selected: TypedProps['selected'] = undefined;
+  export let touchedInput: TypedProps['touchedInput'] = undefined;
+
+  // $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ComboboxPrimitive.Root
+  closeOnEscape="{closeOnEscape}"
+  closeOnOutsideClick="{closeOnOutsideClick}"
+  disabled="{disabled}"
+  items="{items}"
+  loop="{loop}"
+  multiple="{multiple}"
+  name="{name}"
+  onOpenChange="{onOpenChange}"
+  onOutsideClick="{onOutsideClick}"
+  onSelectedChange="{onSelectedChange}"
+  portal="{portal}"
+  preventScroll="{preventScroll}"
+  required="{required}"
+  bind:inputValue="{inputValue}"
+  bind:open="{open}"
+  bind:selected="{selected}"
+  bind:touchedInput="{touchedInput}"
+  let:ids
+>
+  <slot ids="{ids}" />
+</ComboboxPrimitive.Root>
diff --git a/src/lib/components/combobox/index.ts b/src/lib/components/combobox/index.ts
new file mode 100644
index 0000000..340a111
--- /dev/null
+++ b/src/lib/components/combobox/index.ts
@@ -0,0 +1,55 @@
+export {
+  default as Content,
+  styles as contentStyles,
+  type Attributes as ContentAttributes,
+  type Props as ContentProps,
+  type Slots as ContentSlots,
+} from './ComboboxContent.svelte';
+export {
+  default as Group,
+  styles as groupStyles,
+  type Attributes as GroupAttributes,
+  type Props as GroupProps,
+  type Slots as GroupSlots,
+} from './ComboboxGroup.svelte';
+export {
+  default as GroupLabel,
+  styles as groupLabelStyles,
+  type Attributes as GroupLabelAttributes,
+  type Props as GroupLabelProps,
+  type Slots as GroupLabelSlots,
+} from './ComboboxGroupLabel.svelte';
+export {
+  default as HiddenInput,
+  styles as hiddenInputStyles,
+  type Attributes as HiddenInputAttributes,
+  type Props as HiddenInputProps,
+  type Slots as HiddenInputSlots,
+} from './ComboboxHiddenInput.svelte';
+export {
+  default as Input,
+  styles as inputStyles,
+  type Attributes as InputAttributes,
+  type Props as InputProps,
+  type Slots as InputSlots,
+} from './ComboboxInput.svelte';
+export {
+  default as Item,
+  styles as itemStyles,
+  type Attributes as ItemAttributes,
+  type Props as ItemProps,
+  type Slots as ItemSlots,
+} from './ComboboxItem.svelte';
+export {
+  default as Label,
+  styles as labelStyles,
+  type Attributes as LabelAttributes,
+  type Props as LabelProps,
+  type Slots as LabelSlots,
+} from './ComboboxLabel.svelte';
+export {
+  default as Root,
+  type Attributes as RootAttributes,
+  type Props as RootProps,
+  type Slots as RootSlots,
+} from './ComboboxRoot.svelte';
diff --git a/src/lib/components/command/CommandInput.svelte b/src/lib/components/command/CommandInput.svelte
index bb01a61..3385d96 100644
--- a/src/lib/components/command/CommandInput.svelte
+++ b/src/lib/components/command/CommandInput.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { Command as CommandPrimitive } from 'cmdk-sv';
-  import Search from 'lucide-svelte/icons/search';
+  import SearchIcon from 'lucide-svelte/icons/search';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -49,7 +49,7 @@
 </style> -->
 
 <div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
-  <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <SearchIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
 
   <CommandPrimitive.Input
     {...attributes}
diff --git a/src/lib/components/dialog/DialogContent.svelte b/src/lib/components/dialog/DialogContent.svelte
index e86aad9..9b23cc6 100644
--- a/src/lib/components/dialog/DialogContent.svelte
+++ b/src/lib/components/dialog/DialogContent.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { Dialog as DialogPrimitive } from 'bits-ui';
-  import X from 'lucide-svelte/icons/x';
+  import XIcon from 'lucide-svelte/icons/x';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -147,7 +147,7 @@
     <slot builder="{builder}" />
 
     <DialogClose {...closeAttributesAndProps}>
-      <X class="h-4 w-4" />
+      <XIcon class="h-4 w-4" />
 
       <span class="sr-only">Close</span>
     </DialogClose>
diff --git a/src/lib/components/dropdown-menu/DropdownMenuCheckboxItem.svelte b/src/lib/components/dropdown-menu/DropdownMenuCheckboxItem.svelte
index 2551880..67333a0 100644
--- a/src/lib/components/dropdown-menu/DropdownMenuCheckboxItem.svelte
+++ b/src/lib/components/dropdown-menu/DropdownMenuCheckboxItem.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-  import Check from 'lucide-svelte/icons/check';
+  import CheckIcon from 'lucide-svelte/icons/check';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -72,7 +72,7 @@
 >
   <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
     <DropdownMenuPrimitive.CheckboxIndicator>
-      <Check class="h-4 w-4" />
+      <CheckIcon class="h-4 w-4" />
     </DropdownMenuPrimitive.CheckboxIndicator>
   </span>
 
diff --git a/src/lib/components/dropdown-menu/DropdownMenuRadioItem.svelte b/src/lib/components/dropdown-menu/DropdownMenuRadioItem.svelte
index 2f29765..4492164 100644
--- a/src/lib/components/dropdown-menu/DropdownMenuRadioItem.svelte
+++ b/src/lib/components/dropdown-menu/DropdownMenuRadioItem.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-  import Circle from 'lucide-svelte/icons/circle';
+  import CircleIcon from 'lucide-svelte/icons/circle';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -68,7 +68,7 @@
 >
   <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
     <DropdownMenuPrimitive.RadioIndicator>
-      <Circle class="h-2 w-2 fill-current" />
+      <CircleIcon class="h-2 w-2 fill-current" />
     </DropdownMenuPrimitive.RadioIndicator>
   </span>
 
diff --git a/src/lib/components/dropdown-menu/DropdownMenuSubTrigger.svelte b/src/lib/components/dropdown-menu/DropdownMenuSubTrigger.svelte
index 5119311..1beb23a 100644
--- a/src/lib/components/dropdown-menu/DropdownMenuSubTrigger.svelte
+++ b/src/lib/components/dropdown-menu/DropdownMenuSubTrigger.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-  import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import ChevronRightIcon from 'lucide-svelte/icons/chevron-right';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv, type VariantProps } from 'tailwind-variants';
 
@@ -92,5 +92,5 @@
 >
   <slot builder="{builder}" />
 
-  <ChevronRight class="ml-auto h-4 w-4" />
+  <ChevronRightIcon class="ml-auto h-4 w-4" />
 </DropdownMenuPrimitive.SubTrigger>
diff --git a/src/lib/components/form/FormElementField.svelte b/src/lib/components/form/FormElementField.svelte
index 89744c6..e2c5f5b 100644
--- a/src/lib/components/form/FormElementField.svelte
+++ b/src/lib/components/form/FormElementField.svelte
@@ -4,7 +4,6 @@
   import type { FormPathLeaves } from 'sveltekit-superforms';
   import { tv } from 'tailwind-variants';
 
-  import { castAsAny } from '$lib/utils/internal.js';
   import type { AnyObject, ComponentInfo, ObjectOf } from '$lib/utils/types.js';
 
   type Primitive<TObject extends AnyObject, TPath extends FormPathLeaves<TObject>> = ComponentInfo<
@@ -30,7 +29,7 @@
   export type Slots<TObject extends AnyObject, TPath extends FormPathLeaves<TObject>> = {
     default: Omit<Primitive<TObject, TPath>['slots']['default'], 'constraints' | 'value'> & {
       // Manual omissions to prevent infinite loop while compiling the package
-      constraints: ObjectOf<unknown>;
+      constraints?: ObjectOf<unknown>;
       value: unknown;
     };
   };
@@ -65,11 +64,6 @@
       class: attributes.class,
     })}"
   >
-    <slot
-      constraints="{castAsAny(constraints)}"
-      errors="{errors}"
-      tainted="{tainted}"
-      value="{value}"
-    />
+    <slot constraints="{constraints}" errors="{errors}" tainted="{tainted}" value="{value}" />
   </div>
 </ElementField>
diff --git a/src/lib/components/form/FormField.svelte b/src/lib/components/form/FormField.svelte
index 846d30b..aa00f65 100644
--- a/src/lib/components/form/FormField.svelte
+++ b/src/lib/components/form/FormField.svelte
@@ -4,7 +4,6 @@
   import type { FormPath } from 'sveltekit-superforms';
   import { tv } from 'tailwind-variants';
 
-  import { castAsAny } from '$lib/utils/internal.js';
   import type { AnyObject, ComponentInfo, EmptyObject, ObjectOf } from '$lib/utils/types.js';
 
   type Primitive<TObject extends AnyObject, TPath extends FormPath<TObject>> = ComponentInfo<
@@ -30,7 +29,7 @@
   export type Slots<TObject extends AnyObject, TPath extends FormPath<TObject>> = {
     default: Omit<Primitive<TObject, TPath>['slots']['default'], 'constraints' | 'value'> & {
       // Manual omissions to prevent infinite loop while compiling the package
-      constraints: ObjectOf<unknown>;
+      constraints?: ObjectOf<unknown>;
       value: unknown;
     };
   };
@@ -65,11 +64,6 @@
       class: attributes.class,
     })}"
   >
-    <slot
-      constraints="{castAsAny(constraints)}"
-      errors="{errors}"
-      tainted="{tainted}"
-      value="{value}"
-    />
+    <slot constraints="{constraints}" errors="{errors}" tainted="{tainted}" value="{value}" />
   </div>
 </Field>
diff --git a/src/lib/components/form/FormRoot.svelte b/src/lib/components/form/FormRoot.svelte
index 96f207b..ced40db 100644
--- a/src/lib/components/form/FormRoot.svelte
+++ b/src/lib/components/form/FormRoot.svelte
@@ -62,8 +62,8 @@
   use:superForm.enhance
 >
   <slot />
-</form>
 
-{#if debug}
-  <SuperDebug collapsible data="{superForm.form}" status="{false}" />
-{/if}
+  {#if debug}
+    <SuperDebug collapsible data="{superForm.form}" status="{false}" />
+  {/if}
+</form>
diff --git a/src/lib/components/pagination/PaginationEllipsis.svelte b/src/lib/components/pagination/PaginationEllipsis.svelte
index 7bd452f..ec4a532 100644
--- a/src/lib/components/pagination/PaginationEllipsis.svelte
+++ b/src/lib/components/pagination/PaginationEllipsis.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import Ellipsis from 'lucide-svelte/icons/ellipsis';
+  import EllipsisIcon from 'lucide-svelte/icons/ellipsis';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -47,7 +47,7 @@
   aria-hidden="true"
 >
   <slot>
-    <Ellipsis class="h-4 w-4" />
+    <EllipsisIcon class="h-4 w-4" />
 
     <span class="sr-only">More pages</span>
   </slot>
diff --git a/src/lib/components/pagination/PaginationLink.svelte b/src/lib/components/pagination/PaginationLink.svelte
index 766f87d..dd276f7 100644
--- a/src/lib/components/pagination/PaginationLink.svelte
+++ b/src/lib/components/pagination/PaginationLink.svelte
@@ -31,7 +31,13 @@
    * The styles of the link.
    */
   export const styles = tv({
-    ...buttonStyles,
+    base: [...buttonStyles.base],
+    defaultVariants: {
+      ...buttonStyles.defaultVariants,
+    },
+    variants: {
+      ...buttonStyles.variants,
+    },
   });
 </script>
 
diff --git a/src/lib/components/pagination/PaginationNextButton.svelte b/src/lib/components/pagination/PaginationNextButton.svelte
index 78b7ed4..5163c78 100644
--- a/src/lib/components/pagination/PaginationNextButton.svelte
+++ b/src/lib/components/pagination/PaginationNextButton.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { Pagination as PaginationPrimitive } from 'bits-ui';
-  import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import ChevronRightIcon from 'lucide-svelte/icons/chevron-right';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -57,7 +57,7 @@
     <slot builder="{builder}">
       <span>Next</span>
 
-      <ChevronRight class="h-4 w-4" />
+      <ChevronRightIcon class="h-4 w-4" />
     </slot>
   </Button>
 </PaginationPrimitive.NextButton>
diff --git a/src/lib/components/pagination/PaginationPreviousButton.svelte b/src/lib/components/pagination/PaginationPreviousButton.svelte
index 78fd3be..f655ff1 100644
--- a/src/lib/components/pagination/PaginationPreviousButton.svelte
+++ b/src/lib/components/pagination/PaginationPreviousButton.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { Pagination as PaginationPrimitive } from 'bits-ui';
-  import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+  import ChevronLeftIcon from 'lucide-svelte/icons/chevron-left';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
@@ -55,7 +55,7 @@
     on:click
   >
     <slot builder="{builder}">
-      <ChevronLeft class="h-4 w-4" />
+      <ChevronLeftIcon class="h-4 w-4" />
 
       <span>Previous</span>
     </slot>
diff --git a/src/lib/components/select/SelectContent.svelte b/src/lib/components/select/SelectContent.svelte
index d9b7913..249cc1a 100644
--- a/src/lib/components/select/SelectContent.svelte
+++ b/src/lib/components/select/SelectContent.svelte
@@ -44,7 +44,7 @@
    */
   export const styles = tv({
     base: [
-      'relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none',
+      'relative z-50 w-full min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none',
     ],
   });
 </script>
@@ -122,7 +122,5 @@
   on:keydown
   on:pointerleave
 >
-  <div class="w-full p-1">
-    <slot builder="{builder}" />
-  </div>
+  <slot builder="{builder}" />
 </SelectPrimitive.Content>
diff --git a/src/lib/components/select/SelectGroup.svelte b/src/lib/components/select/SelectGroup.svelte
index 5573e37..d05928a 100644
--- a/src/lib/components/select/SelectGroup.svelte
+++ b/src/lib/components/select/SelectGroup.svelte
@@ -24,7 +24,7 @@
    * The styles of the group.
    */
   export const styles = tv({
-    base: [] as string[],
+    base: [''],
   });
 </script>
 
diff --git a/src/lib/components/select/SelectInput.svelte b/src/lib/components/select/SelectInput.svelte
index a6797e1..d65d9bb 100644
--- a/src/lib/components/select/SelectInput.svelte
+++ b/src/lib/components/select/SelectInput.svelte
@@ -3,7 +3,6 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import { castAsAny } from '$lib/utils/internal.js';
   import type { ComponentInfo } from '$lib/utils/types.js';
 
   type Primitive = ComponentInfo<SelectPrimitive.Input>;
@@ -52,5 +51,5 @@
   el="{el}"
   let:builder
 >
-  <slot builder="{castAsAny(builder)}" />
+  <slot builder="{builder}" />
 </SelectPrimitive.Input>
diff --git a/src/lib/components/select/SelectRoot.svelte b/src/lib/components/select/SelectRoot.svelte
index 5365acd..e583f02 100644
--- a/src/lib/components/select/SelectRoot.svelte
+++ b/src/lib/components/select/SelectRoot.svelte
@@ -32,7 +32,13 @@
   >['slots'];
 </script>
 
-<script generics="TItem, TMultiple extends boolean = false" lang="ts">
+<script
+  generics="
+    TItem,
+    TMultiple extends boolean = false,
+  "
+  lang="ts"
+>
   type $$Events = Primitive<TItem, TMultiple>['events'];
   type $$Props = Attributes & TypedProps;
   type $$Slots = Slots<TItem, TMultiple>;
diff --git a/src/lib/components/top-navigation/TopNavigationButton.svelte b/src/lib/components/top-navigation/TopNavigationButton.svelte
index b252211..18b1e2c 100644
--- a/src/lib/components/top-navigation/TopNavigationButton.svelte
+++ b/src/lib/components/top-navigation/TopNavigationButton.svelte
@@ -4,7 +4,7 @@
 
   import type { EmptyObject, Slot } from '$lib/utils/types.js';
 
-  import type { Props as TopNavigationRootProps } from './TopNavigationRoot.svelte';
+  import { getTopNavigationContext, hasTopNavigationContext } from './context.js';
 
   /**
    * The attributes for the button.
@@ -13,7 +13,7 @@
   /**
    * The props for the button.
    */
-  export type Props = Pick<TopNavigationRootProps, 'breakpoint'>;
+  export type Props = EmptyObject;
   /**
    * The slots for the button.
    */
@@ -47,9 +47,11 @@
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 
-  export let breakpoint: Props['breakpoint'] = undefined;
-
   $: attributes = $$restProps as Attributes;
+
+  $: breakpoint = hasTopNavigationContext()
+    ? getTopNavigationContext().breakpoint
+    : styles.defaultVariants.breakpoint;
 </script>
 
 <!-- <style lang="postcss">
diff --git a/src/lib/components/top-navigation/TopNavigationLink.svelte b/src/lib/components/top-navigation/TopNavigationLink.svelte
index 72c1574..6d8e55b 100644
--- a/src/lib/components/top-navigation/TopNavigationLink.svelte
+++ b/src/lib/components/top-navigation/TopNavigationLink.svelte
@@ -5,7 +5,7 @@
   import type { EmptyObject, Slot } from '$lib/utils/types.js';
 
   import { styles as topNavigationButtonStyles } from './TopNavigationButton.svelte';
-  import type { Props as TopNavigationRootProps } from './TopNavigationRoot.svelte';
+  import { getTopNavigationContext, hasTopNavigationContext } from './context.js';
 
   /**
    * The attributes for the link.
@@ -14,15 +14,15 @@
   /**
    * The props for the link.
    */
-  export type Props = Pick<TopNavigationRootProps, 'breakpoint'> & {
+  export type Props = {
     /**
-     * The URL of the link.
+     * Whether the link is active.
      */
-    href: string;
+    active?: boolean;
     /**
-     * Whether the link is active.
+     * The URL of the link.
      */
-    isActive?: boolean;
+    href: string;
   };
   /**
    * The slots for the link.
@@ -35,8 +35,16 @@
    * The styles for the link.
    */
   export const styles = tv({
-    ...topNavigationButtonStyles,
-    base: [...topNavigationButtonStyles.base, 'data-[active=true]:border-primary'],
+    base: [...topNavigationButtonStyles.base],
+    defaultVariants: {
+      ...topNavigationButtonStyles.defaultVariants,
+    },
+    variants: {
+      ...topNavigationButtonStyles.variants,
+      active: {
+        true: ['border-primary'],
+      },
+    },
   });
 </script>
 
@@ -45,11 +53,14 @@
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 
-  export let breakpoint: Props['breakpoint'] = undefined;
+  export let active: Props['active'] = undefined;
   export let href: Props['href'];
-  export let isActive: Props['isActive'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  $: breakpoint = hasTopNavigationContext()
+    ? getTopNavigationContext().breakpoint
+    : styles.defaultVariants.breakpoint;
 </script>
 
 <!-- <style lang="postcss">
@@ -58,11 +69,12 @@
 <a
   {...attributes}
   class="{styles({
+    active,
     breakpoint,
     class: attributes.class,
   })}"
   href="{href}"
-  data-active="{isActive}"
+  data-active="{active}"
   data-breakpoint="{breakpoint}"
 >
   <slot />
diff --git a/src/lib/components/top-navigation/TopNavigationRoot.svelte b/src/lib/components/top-navigation/TopNavigationRoot.svelte
index bd96c9b..d5e76e2 100644
--- a/src/lib/components/top-navigation/TopNavigationRoot.svelte
+++ b/src/lib/components/top-navigation/TopNavigationRoot.svelte
@@ -9,6 +9,8 @@
   import Container from '$lib/components/container/index.js';
   import type { EmptyObject, Slot } from '$lib/utils/types.js';
 
+  import { setTopNavigationContext } from './context.js';
+
   /**
    * The attributes for the root.
    */
@@ -113,6 +115,8 @@
   export let open: Props['open'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  $: setTopNavigationContext({ breakpoint });
 </script>
 
 <!-- <style lang="postcss">
diff --git a/src/lib/components/top-navigation/TopNavigationSection.svelte b/src/lib/components/top-navigation/TopNavigationSection.svelte
index 751250e..286c9cc 100644
--- a/src/lib/components/top-navigation/TopNavigationSection.svelte
+++ b/src/lib/components/top-navigation/TopNavigationSection.svelte
@@ -4,7 +4,7 @@
 
   import type { EmptyObject, Slot } from '$lib/utils/types.js';
 
-  import type { Props as TopNavigationRootProps } from './TopNavigationRoot.svelte';
+  import { getTopNavigationContext, hasTopNavigationContext } from './context.js';
 
   /**
    * The attributes for the section.
@@ -13,7 +13,7 @@
   /**
    * The props for the section.
    */
-  export type Props = Pick<TopNavigationRootProps, 'breakpoint'>;
+  export type Props = EmptyObject;
   /**
    * The slots for the section.
    */
@@ -44,9 +44,11 @@
   type $$Props = Attributes & Props;
   type $$Slots = Slots;
 
-  export let breakpoint: Props['breakpoint'] = undefined;
-
   $: attributes = $$restProps as Attributes;
+
+  $: breakpoint = hasTopNavigationContext()
+    ? getTopNavigationContext().breakpoint
+    : styles.defaultVariants.breakpoint;
 </script>
 
 <!-- <style lang="postcss">
diff --git a/src/lib/components/top-navigation/context.ts b/src/lib/components/top-navigation/context.ts
new file mode 100644
index 0000000..b160c93
--- /dev/null
+++ b/src/lib/components/top-navigation/context.ts
@@ -0,0 +1,21 @@
+import { getContext, hasContext, setContext } from 'svelte';
+
+import type { Breakpoint } from './index.js';
+
+const KEY = Symbol('top-navigation');
+
+export type TopNavigationContext = {
+  breakpoint?: Breakpoint;
+};
+
+export function getTopNavigationContext() {
+  return getContext<TopNavigationContext>(KEY);
+}
+
+export function hasTopNavigationContext() {
+  return hasContext(KEY);
+}
+
+export function setTopNavigationContext(context: TopNavigationContext) {
+  return setContext<TopNavigationContext>(KEY, context);
+}
diff --git a/src/lib/utils/internal.ts b/src/lib/utils/internal.ts
deleted file mode 100644
index fb890df..0000000
--- a/src/lib/utils/internal.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { AnyObject } from './types.js';
-
-/**
- * Casts the given value to any type.
- *
- * Internal function, do not use.
- *
- * @param value The value to cast.
- * @returns The value casted to any type.
- *
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function castAsAny(value: unknown): any {
-  return value;
-}
-
-/**
- * Omits the given keys from the object.
- * This is the functionnal equivalent of Typescript's `Omit` utility type.
- *
- * @param object The object to omit the keys from.
- * @param keys The keys to omit.
- * @returns The object without the given keys.
- *
- * @private
- */
-export function omit<TObject extends AnyObject, TKeys extends (keyof TObject)[]>(
-  object: TObject,
-  keys: TKeys,
-): Omit<TObject, TKeys[number]> {
-  const result = {
-    ...object,
-  };
-
-  for (const key of keys) {
-    delete result[key];
-  }
-
-  return result;
-}
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
index 64ec737..aeba660 100644
--- a/src/lib/utils/types.ts
+++ b/src/lib/utils/types.ts
@@ -58,7 +58,8 @@ export type Slot<TSlot extends AnyObject = EmptyObject> = TSlot;
 /**
  * A transition function.
  */
-export type Transition = (node: Element, params?: unknown) => TransitionConfig;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Transition = (node: Element, params?: any) => TransitionConfig;
 /**
  * The configuration to pass to a transition function.
  */
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dfe7d21..97bb435 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,7 +9,7 @@
 
   import '../app.pcss';
 
-  const routesArray = Object.keys(route_meta_data);
+  const routesArray = Object.keys(route_meta_data).sort();
 </script>
 
 <script lang="ts">
@@ -45,12 +45,12 @@
 <ModeWatcher defaultMode="light" track="{false}" />
 
 <div class="grid grid-cols-1 lg:min-h-screen lg:grid-cols-[auto_1fr]">
-  <aside class="hidden border-r border-border p-2 lg:block">
+  <aside class="hidden border-r border-border p-1 lg:block">
     <ul>
       {#each routesArray as route, index (index)}
         <li>
           <a
-            class="block p-2 font-mono underline-offset-4 hover:underline"
+            class="block p-1 font-mono underline-offset-4 hover:underline"
             class:underline="{$page.url.pathname === route}"
             href="{route}"
           >
@@ -65,9 +65,9 @@
     <TopNavigation.Section>
       {#each routesArray as route, index (index)}
         <TopNavigation.Link
+          active="{$page.url.pathname === route}"
           class="font-mono"
           href="{route}"
-          isActive="{$page.url.pathname === route}"
         >
           {route}
         </TopNavigation.Link>
@@ -76,14 +76,10 @@
   </TopNavigation.Root>
 
   <div>
-    <header class="flex flex-row items-center justify-between gap-x-2 border-b border-border p-2">
+    <header class="border-b border-border p-2">
       <h1 class="text-xl font-bold">
         {$title}
       </h1>
-
-      <h3 class="text-md font-medium">
-        {$page.status}
-      </h3>
     </header>
 
     <main class="p-2">
diff --git a/src/routes/accordion/+page.svelte b/src/routes/accordion/+page.svelte
new file mode 100644
index 0000000..2744a0f
--- /dev/null
+++ b/src/routes/accordion/+page.svelte
@@ -0,0 +1,86 @@
+<script context="module" lang="ts">
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
+
+  import * as Accordion from '$lib/components/accordion/index.js';
+  import * as Form from '$lib/components/form/index.js';
+  import Switch from '$lib/components/switch/index.js';
+
+  const adapter = zod(
+    z
+      .object({
+        disabled: z.boolean().default(false),
+      })
+      .partial(),
+  );
+</script>
+
+<script lang="ts">
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
+  });
+  const { form: superFormData } = superForm;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
+
+          <Form.Description>
+            <span>When</span>
+
+            <code>true</code>
+
+            <span>, prevents the user from interacting with the accordion.</span>
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Accordion.Root class="rounded-lg border border-border bg-muted/50 p-2" {...$superFormData}>
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+
+          <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
+        </Accordion.Item>
+
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+
+          <Accordion.Content>
+            Yes. It comes with default styles that matches the other components' aesthetic.
+          </Accordion.Content>
+        </Accordion.Item>
+
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+
+          <Accordion.Content>
+            Yes. It's animated by default, but you can disable it if you prefer.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/alert-dialog/+page.svelte b/src/routes/alert-dialog/+page.svelte
index c70ef32..ed1db5a 100644
--- a/src/routes/alert-dialog/+page.svelte
+++ b/src/routes/alert-dialog/+page.svelte
@@ -3,10 +3,10 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as AlertDialog from '$lib/components/alert-dialog/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -31,88 +31,100 @@
 
 <!-- <style lang="postcss">
 </style> -->
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on escape</Form.Label>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not to close the alert dialog when the escape key is pressed.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on outside click</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not to close the alert dialog when the escape key is pressed.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
-
-    <Form.Description>The open state of the alert dialog.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Prevent scroll</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not to prevent scrolling when the alert dialog is open.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<AlertDialog.Root
-  closeOnEscape="{$superFormData.closeOnEscape}"
-  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
-  preventScroll="{$superFormData.preventScroll}"
-  bind:open="{$superFormData.open}"
->
-  <AlertDialog.Trigger asChild let:builder>
-    <Button builders="{[builder]}" variant="outline">Show Dialog</Button>
-  </AlertDialog.Trigger>
-
-  <AlertDialog.Content>
-    <AlertDialog.Header>
-      <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-
-      <AlertDialog.Description>
-        This action cannot be undone. This will permanently delete your account and remove your data
-        from our servers.
-      </AlertDialog.Description>
-    </AlertDialog.Header>
-
-    <AlertDialog.Footer>
-      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-
-      <AlertDialog.Action>Continue</AlertDialog.Action>
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog.Root>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on escape</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to close the alert dialog when the escape key is pressed.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on outside click</Form.Label>
+
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.closeOnOutsideClick}"
+            />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to close the alert dialog when the escape key is pressed.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
+
+          <Form.Description>The open state of the alert dialog.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Prevent scroll</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to prevent scrolling when the alert dialog is open.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <AlertDialog.Root {...$superFormData} bind:open="{$superFormData.open}">
+        <AlertDialog.Trigger asChild let:builder>
+          <Button builders="{[builder]}" variant="outline">Show Dialog</Button>
+        </AlertDialog.Trigger>
+
+        <AlertDialog.Content>
+          <AlertDialog.Header>
+            <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+
+            <AlertDialog.Description>
+              This action cannot be undone. This will permanently delete your account and remove
+              your data from our servers.
+            </AlertDialog.Description>
+          </AlertDialog.Header>
+
+          <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+
+            <AlertDialog.Action>Continue</AlertDialog.Action>
+          </AlertDialog.Footer>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/alert/+page.svelte b/src/routes/alert/+page.svelte
index c6fe013..cbd3e06 100644
--- a/src/routes/alert/+page.svelte
+++ b/src/routes/alert/+page.svelte
@@ -1,13 +1,13 @@
 <script context="module" lang="ts">
-  import Terminal from 'lucide-svelte/icons/terminal';
+  import TerminalIcon from 'lucide-svelte/icons/terminal';
   import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Alert from '$lib/components/alert/index.js';
   import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
 
   const adapter = zod(
     z
@@ -29,55 +29,67 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="variant" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Variant</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Select.Root
-        items="{Alert.variants.map((variant) => ({
-          label: variant,
-          value: variant,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.variant = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.variant !== undefined
-          ? {
-              label: $superFormData.variant,
-              value: $superFormData.variant,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="variant" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Variant</Form.Label>
 
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
+            <Select.Root
+              items="{Alert.variants.map((variant) => ({
+                label: variant,
+                value: variant,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.variant = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.variant !== undefined
+                ? {
+                    label: $superFormData.variant,
+                    value: $superFormData.variant,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
 
-        <Select.Content>
-          {#each Alert.variants as variant, index (index)}
-            <Select.Item value="{variant}">
-              {variant}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
 
-    <Form.Description>The variant of the alert.</Form.Description>
+              <Select.Content>
+                {#each Alert.variants as variant, index (index)}
+                  <Select.Item value="{variant}">
+                    {variant}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.Description>The variant of the alert.</Form.Description>
 
-<Separator />
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-<Alert.Root variant="{$superFormData.variant}">
-  <Terminal class="h-4 w-4" />
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-  <Alert.Title>Heads up!</Alert.Title>
+    <Accordion.Content>
+      <Alert.Root {...$superFormData}>
+        <TerminalIcon class="h-4 w-4" />
 
-  <Alert.Description>You can add components to your app using the cli.</Alert.Description>
-</Alert.Root>
+        <Alert.Title>Heads up!</Alert.Title>
+
+        <Alert.Description>You can add components to your app using the CLI.</Alert.Description>
+      </Alert.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/breadcrumb/+page.svelte b/src/routes/breadcrumb/+page.svelte
index e564d24..750b43b 100644
--- a/src/routes/breadcrumb/+page.svelte
+++ b/src/routes/breadcrumb/+page.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Breadcrumb from '$lib/components/breadcrumb/index.js';
-  import Separator from '$lib/components/separator/index.js';
 </script>
 
 <script lang="ts">
@@ -9,30 +9,44 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Separator />
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-<Breadcrumb.Root>
-  <Breadcrumb.List>
-    <Breadcrumb.Item>
-      <Breadcrumb.Link href="#/">Home</Breadcrumb.Link>
-    </Breadcrumb.Item>
+    <Accordion.Content>
+      <!--  -->
+    </Accordion.Content>
+  </Accordion.Item>
 
-    <Breadcrumb.Separator />
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-    <Breadcrumb.Item>
-      <Breadcrumb.Ellipsis />
-    </Breadcrumb.Item>
+    <Accordion.Content>
+      <Breadcrumb.Root>
+        <Breadcrumb.List>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link href="#/">Home</Breadcrumb.Link>
+          </Breadcrumb.Item>
 
-    <Breadcrumb.Separator />
+          <Breadcrumb.Separator />
 
-    <Breadcrumb.Item>
-      <Breadcrumb.Link href="#/docs/components">Components</Breadcrumb.Link>
-    </Breadcrumb.Item>
+          <Breadcrumb.Item>
+            <Breadcrumb.Ellipsis />
+          </Breadcrumb.Item>
 
-    <Breadcrumb.Separator />
+          <Breadcrumb.Separator />
 
-    <Breadcrumb.Item>
-      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
-    </Breadcrumb.Item>
-  </Breadcrumb.List>
-</Breadcrumb.Root>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link href="#/docs/components">Components</Breadcrumb.Link>
+          </Breadcrumb.Item>
+
+          <Breadcrumb.Separator />
+
+          <Breadcrumb.Item>
+            <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+          </Breadcrumb.Item>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/button/+page.svelte b/src/routes/button/+page.svelte
index f28e799..4668df1 100644
--- a/src/routes/button/+page.svelte
+++ b/src/routes/button/+page.svelte
@@ -3,6 +3,7 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button, {
     defaultSize,
     defaultVariant,
@@ -11,7 +12,6 @@
   } from '$lib/components/button/index.js';
   import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -36,108 +36,114 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disabled</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
-    </Form.Control>
-
-    <Form.Description>Whether the button is disabled.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="size" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Size</Form.Label>
-
-      <Select.Root
-        items="{sizes.map((size) => ({
-          label: size,
-          value: size,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.size = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.size !== undefined
-          ? {
-              label: $superFormData.size,
-              value: $superFormData.size,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each sizes as size, index (index)}
-            <Select.Item value="{size}">
-              {size}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>The size of the button.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="variant" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Variant</Form.Label>
-
-      <Select.Root
-        items="{variants.map((variant) => ({
-          label: variant,
-          value: variant,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.variant = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.variant !== undefined
-          ? {
-              label: $superFormData.variant,
-              value: $superFormData.variant,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each variants as variant, index (index)}
-            <Select.Item value="{variant}">
-              {variant}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>The variant of the button.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Button
-  disabled="{$superFormData.disabled}"
-  size="{$superFormData.size}"
-  variant="{$superFormData.variant}"
->
-  Lorem ipsum
-</Button>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
+
+          <Form.Description>Whether the button is disabled.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="size" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Size</Form.Label>
+
+            <Select.Root
+              items="{sizes.map((size) => ({
+                label: size,
+                value: size,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.size = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.size !== undefined
+                ? {
+                    label: $superFormData.size,
+                    value: $superFormData.size,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each sizes as size, index (index)}
+                  <Select.Item value="{size}">
+                    {size}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>The size of the button.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="variant" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Variant</Form.Label>
+
+            <Select.Root
+              items="{variants.map((variant) => ({
+                label: variant,
+                value: variant,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.variant = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.variant !== undefined
+                ? {
+                    label: $superFormData.variant,
+                    value: $superFormData.variant,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each variants as variant, index (index)}
+                  <Select.Item value="{variant}">
+                    {variant}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>The variant of the button.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Button {...$superFormData}>Lorem ipsum</Button>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/calendar/+page.svelte b/src/routes/calendar/+page.svelte
index 15ad59a..bb441bf 100644
--- a/src/routes/calendar/+page.svelte
+++ b/src/routes/calendar/+page.svelte
@@ -3,11 +3,11 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Calendar from '$lib/components/calendar/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -47,220 +47,222 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disabled</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
 
-    <Form.Description>
-      Whether the calendar is disabled. When true, the user will not be able to focus or select
-      dates.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="fixedWeeks" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Fixed weeks</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.fixedWeeks}" />
-    </Form.Control>
-
-    <Form.Description>
-      Display 6 weeks per month, regardless the month's number of weeks. This is useful for
-      displaying a consistent calendar, where the size of the calendar doesn't change month to
-      month.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="numberOfMonths" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Number of months</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        variant="number"
-        bind:value="{$superFormData.numberOfMonths}"
-      />
-    </Form.Control>
-
-    <Form.Description>
-      Determines the number of months to display on the calendar simultaneously.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="pagedNavigation" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Paged navigation</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.pagedNavigation}" />
-    </Form.Control>
-
-    <Form.Description>
-      <p>Applicable only when numberOfMonths is greater than 1.</p>
-
-      <p>
-        Controls whether to use paged navigation for the next and previous buttons in the date
-        picker. With paged navigation set to true, clicking the next/prev buttons changes all months
-        in view. When set to false, it shifts the view by a single month.
-      </p>
-
-      <p>
-        For example, with pagedNavigation set to true and 2 months displayed (January and February),
-        clicking the next button changes the view to March and April. If pagedNavigation is false,
-        the view shifts to February and March.
-      </p>
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="preventDeselect" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Prevent deselect</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventDeselect}" />
-    </Form.Control>
-
-    <Form.Description>
-      Prevent deselecting the selected date(s), which would set the value to undefined. You can use
-      this to ensure a date is always selected in certain situations.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="readonly" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Readonly</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.readonly}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether the calendar is readonly. When true, the user will be able to focus and navigate the
-      calendar, but will not be able to select dates.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="weekStartsOn" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Week starts on</Form.Label>
-
-      <Select.Root
-        items="{Calendar.rootWeekStartsOn.map((weekStartsOn) => ({
-          label: weekStartsOn.toString(),
-          value: weekStartsOn,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.weekStartsOn = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.weekStartsOn !== undefined
-          ? {
-              label: $superFormData.weekStartsOn.toString(),
-              value: $superFormData.weekStartsOn,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each Calendar.rootWeekStartsOn as weekStartsOn, index (index)}
-            <Select.Item value="{weekStartsOn}">
-              {weekStartsOn}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>
-      The day of the week to start the calendar on, which must be a number between 0 and 6, where 0
-      is Sunday and 6 is Saturday.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="weekdayFormat" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Weekday format</Form.Label>
-
-      <Select.Root
-        items="{Calendar.rootWeekdayFormats.map((weekdayFormat) => ({
-          label: weekdayFormat,
-          value: weekdayFormat,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.weekdayFormat = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.weekdayFormat !== undefined
-          ? {
-              label: $superFormData.weekdayFormat,
-              value: $superFormData.weekdayFormat,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each Calendar.rootWeekdayFormats as weekdayFormat, index (index)}
-            <Select.Item value="{weekdayFormat}">
-              {weekdayFormat}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>
-      How the string representation of the weekdays provided via the weekdays state store should be
-      formatted.
-
-      <ul class="list-inside list-disc">
-        <li>"long": "Sunday", "Monday", "Tuesday", etc.</li>
-
-        <li>"short": "Sun", "Mon", "Tue", etc.</li>
-
-        <li>"narrow": "S", "M", "T", etc.</li>
-      </ul>
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Calendar.Root
-  class="inline-block rounded-md border border-border"
-  disabled="{$superFormData.disabled}"
-  fixedWeeks="{$superFormData.fixedWeeks}"
-  numberOfMonths="{$superFormData.numberOfMonths}"
-  pagedNavigation="{$superFormData.pagedNavigation}"
-  preventDeselect="{$superFormData.preventDeselect}"
-  readonly="{$superFormData.readonly}"
-  weekStartsOn="{$superFormData.weekStartsOn}"
-  weekdayFormat="{$superFormData.weekdayFormat}"
-/>
+          <Form.Description>
+            Whether the calendar is disabled. When true, the user will not be able to focus or
+            select dates.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="fixedWeeks" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Fixed weeks</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.fixedWeeks}" />
+          </Form.Control>
+
+          <Form.Description>
+            Display 6 weeks per month, regardless the month's number of weeks. This is useful for
+            displaying a consistent calendar, where the size of the calendar doesn't change month to
+            month.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="numberOfMonths" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Number of months</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              variant="number"
+              bind:value="{$superFormData.numberOfMonths}"
+            />
+          </Form.Control>
+
+          <Form.Description>
+            Determines the number of months to display on the calendar simultaneously.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="pagedNavigation" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Paged navigation</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.pagedNavigation}" />
+          </Form.Control>
+
+          <Form.Description>
+            <p>Applicable only when numberOfMonths is greater than 1.</p>
+
+            <p>
+              Controls whether to use paged navigation for the next and previous buttons in the date
+              picker. With paged navigation set to true, clicking the next/prev buttons changes all
+              months in view. When set to false, it shifts the view by a single month.
+            </p>
+
+            <p>
+              For example, with pagedNavigation set to true and 2 months displayed (January and
+              February), clicking the next button changes the view to March and April. If
+              pagedNavigation is false, the view shifts to February and March.
+            </p>
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="preventDeselect" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Prevent deselect</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventDeselect}" />
+          </Form.Control>
+
+          <Form.Description>
+            Prevent deselecting the selected date(s), which would set the value to undefined. You
+            can use this to ensure a date is always selected in certain situations.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="readonly" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Readonly</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.readonly}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether the calendar is readonly. When true, the user will be able to focus and navigate
+            the calendar, but will not be able to select dates.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="weekStartsOn" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Week starts on</Form.Label>
+
+            <Select.Root
+              items="{Calendar.rootWeekStartsOn.map((weekStartsOn) => ({
+                label: weekStartsOn.toString(),
+                value: weekStartsOn,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.weekStartsOn = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.weekStartsOn !== undefined
+                ? {
+                    label: $superFormData.weekStartsOn.toString(),
+                    value: $superFormData.weekStartsOn,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each Calendar.rootWeekStartsOn as weekStartsOn, index (index)}
+                  <Select.Item value="{weekStartsOn}">
+                    {weekStartsOn}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>
+            The day of the week to start the calendar on, which must be a number between 0 and 6,
+            where 0 is Sunday and 6 is Saturday.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="weekdayFormat" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Weekday format</Form.Label>
+
+            <Select.Root
+              items="{Calendar.rootWeekdayFormats.map((weekdayFormat) => ({
+                label: weekdayFormat,
+                value: weekdayFormat,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.weekdayFormat = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.weekdayFormat !== undefined
+                ? {
+                    label: $superFormData.weekdayFormat,
+                    value: $superFormData.weekdayFormat,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each Calendar.rootWeekdayFormats as weekdayFormat, index (index)}
+                  <Select.Item value="{weekdayFormat}">
+                    {weekdayFormat}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>
+            How the string representation of the weekdays provided via the weekdays state store
+            should be formatted.
+
+            <ul class="list-inside list-disc">
+              <li>"long": "Sunday", "Monday", "Tuesday", etc.</li>
+
+              <li>"short": "Sun", "Mon", "Tue", etc.</li>
+
+              <li>"narrow": "S", "M", "T", etc.</li>
+            </ul>
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Calendar.Root {...$superFormData} class="rounded-md border border-border" />
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/card/+page.svelte b/src/routes/card/+page.svelte
index a5c7346..c13f8c7 100644
--- a/src/routes/card/+page.svelte
+++ b/src/routes/card/+page.svelte
@@ -1,10 +1,10 @@
 <script context="module" lang="ts">
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Card from '$lib/components/card/index.js';
   import Input from '$lib/components/input/index.js';
   import Label from '$lib/components/label/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
 
   const frameworks = [
     {
@@ -32,48 +32,62 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Separator />
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-<Card.Root>
-  <Card.Header>
-    <Card.Title>Create project</Card.Title>
+    <Accordion.Content>
+      <!--  -->
+    </Accordion.Content>
+  </Accordion.Item>
 
-    <Card.Description>Deploy your new project in one-click.</Card.Description>
-  </Card.Header>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-  <Card.Content>
-    <form>
-      <div class="grid w-full items-center gap-4">
-        <div class="flex flex-col space-y-1.5">
-          <Label for="name">Name</Label>
+    <Accordion.Content>
+      <Card.Root>
+        <Card.Header>
+          <Card.Title>Create project</Card.Title>
 
-          <Input id="name" placeholder="Name of your project" variant="text" />
-        </div>
+          <Card.Description>Deploy your new project in one-click.</Card.Description>
+        </Card.Header>
 
-        <div class="flex flex-col space-y-1.5">
-          <Label for="framework">Framework</Label>
+        <Card.Content>
+          <form>
+            <div class="grid w-full items-center gap-4">
+              <div class="flex flex-col space-y-1.5">
+                <Label for="name">Name</Label>
 
-          <Select.Root>
-            <Select.Trigger id="framework">
-              <Select.Value placeholder="Select" />
-            </Select.Trigger>
+                <Input id="name" placeholder="Name of your project" variant="text" />
+              </div>
 
-            <Select.Content>
-              {#each frameworks as framework}
-                <Select.Item value="{framework.value}" label="{framework.label}">
-                  {framework.label}
-                </Select.Item>
-              {/each}
-            </Select.Content>
-          </Select.Root>
-        </div>
-      </div>
-    </form>
-  </Card.Content>
+              <div class="flex flex-col space-y-1.5">
+                <Label for="framework">Framework</Label>
 
-  <Card.Footer class="flex justify-between">
-    <Button variant="outline">Cancel</Button>
+                <Select.Root>
+                  <Select.Trigger id="framework">
+                    <Select.Value placeholder="Select" />
+                  </Select.Trigger>
 
-    <Button>Deploy</Button>
-  </Card.Footer>
-</Card.Root>
+                  <Select.Content>
+                    {#each frameworks as framework}
+                      <Select.Item value="{framework.value}" label="{framework.label}">
+                        {framework.label}
+                      </Select.Item>
+                    {/each}
+                  </Select.Content>
+                </Select.Root>
+              </div>
+            </div>
+          </form>
+        </Card.Content>
+
+        <Card.Footer class="flex justify-between">
+          <Button variant="outline">Cancel</Button>
+
+          <Button>Deploy</Button>
+        </Card.Footer>
+      </Card.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/checkbox/+page.svelte b/src/routes/checkbox/+page.svelte
new file mode 100644
index 0000000..9ba92f3
--- /dev/null
+++ b/src/routes/checkbox/+page.svelte
@@ -0,0 +1,91 @@
+<script context="module" lang="ts">
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
+
+  import * as Accordion from '$lib/components/accordion/index.js';
+  import Checkbox from '$lib/components/checkbox/index.js';
+  import * as Form from '$lib/components/form/index.js';
+  import Label from '$lib/components/label/index.js';
+  import Switch from '$lib/components/switch/index.js';
+
+  const adapter = zod(
+    z
+      .object({
+        checked: z.boolean().default(false),
+        disabled: z.boolean().default(false),
+      })
+      .partial(),
+  );
+</script>
+
+<script lang="ts">
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
+  });
+  const { form: superFormData } = superForm;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="checked" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Checked</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.checked}" />
+          </Form.Control>
+
+          <Form.Description>
+            The state of the checkbox. You can bind this to a boolean value to programmatically
+            control the checked state.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
+
+          <Form.Description>
+            <span>When</span>
+
+            <code>true</code>
+
+            <span>, the checkbox will be disabled.</span>
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <div class="flex items-center space-x-2">
+        <Checkbox
+          {...$superFormData}
+          id="terms"
+          aria-labelledby="terms-label"
+          bind:checked="{$superFormData.checked}"
+        />
+
+        <Label for="terms" id="terms-label">Accept terms and conditions</Label>
+      </div>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/collapsible/+page.svelte b/src/routes/collapsible/+page.svelte
index 57b6cca..7370775 100644
--- a/src/routes/collapsible/+page.svelte
+++ b/src/routes/collapsible/+page.svelte
@@ -3,10 +3,10 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Collapsible from '$lib/components/collapsible/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -30,46 +30,58 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disabled</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
 
-    <Form.Description>
-      Whether the collapsible is disabled which prevents it from being opened.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>
+            Whether the collapsible is disabled which prevents it from being opened.
+          </Form.Description>
 
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
 
-    <Form.Description>The open state of the collapsible.</Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.Description>The open state of the collapsible.</Form.Description>
 
-<Separator />
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-<Collapsible.Root disabled="{$superFormData.disabled}" bind:open="{$superFormData.open}">
-  <Collapsible.Trigger asChild let:builder>
-    <Button builders="{[builder]}">
-      State: {builder['data-state']}
-    </Button>
-  </Collapsible.Trigger>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-  <Collapsible.Content class="bg-slate-300">
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quo velit facilis illum placeat
-    numquam consectetur culpa ab laboriosam aliquid! Facere, consequatur ex maiores dolorum aut
-    commodi quis nostrum impedit?
-  </Collapsible.Content>
-</Collapsible.Root>
+    <Accordion.Content>
+      <Collapsible.Root {...superFormData} bind:open="{$superFormData.open}">
+        <Collapsible.Trigger asChild let:builder>
+          <Button builders="{[builder]}">
+            State: {builder['data-state']}
+          </Button>
+        </Collapsible.Trigger>
+
+        <Collapsible.Content class="bg-slate-300">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quo velit facilis illum
+          placeat numquam consectetur culpa ab laboriosam aliquid! Facere, consequatur ex maiores
+          dolorum aut commodi quis nostrum impedit?
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/combobox/+page.svelte b/src/routes/combobox/+page.svelte
new file mode 100644
index 0000000..b0232fd
--- /dev/null
+++ b/src/routes/combobox/+page.svelte
@@ -0,0 +1,61 @@
+<script context="module" lang="ts">
+  import * as Accordion from '$lib/components/accordion/index.js';
+  import * as Combobox from '$lib/components/combobox/index.js';
+</script>
+
+<script lang="ts">
+  const fruits = [
+    { value: 'mango', label: 'Mango' },
+    { value: 'watermelon', label: 'Watermelon' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'pineapple', label: 'Pineapple' },
+    { value: 'orange', label: 'Orange' },
+  ];
+
+  let inputValue = '';
+  let touchedInput = false;
+
+  $: filteredFruits =
+    inputValue && touchedInput
+      ? fruits.filter((fruit) => fruit.label.toLowerCase().includes(inputValue.toLowerCase()))
+      : fruits;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <!--  -->
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Combobox.Root
+        items="{filteredFruits}"
+        bind:inputValue="{inputValue}"
+        bind:touchedInput="{touchedInput}"
+      >
+        <Combobox.Input placeholder="Search a fruit" />
+
+        <Combobox.Content>
+          {#each filteredFruits as fruit (fruit.value)}
+            <Combobox.Item label="{fruit.label}" value="{fruit.value}">
+              {fruit.label}
+            </Combobox.Item>
+          {:else}
+            <div class="px-5 py-2 text-sm text-muted-foreground">No results found</div>
+          {/each}
+        </Combobox.Content>
+
+        <Combobox.HiddenInput name="favoriteFruit" />
+      </Combobox.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/command/+page.svelte b/src/routes/command/+page.svelte
index c6d1c8b..47304a7 100644
--- a/src/routes/command/+page.svelte
+++ b/src/routes/command/+page.svelte
@@ -1,18 +1,18 @@
 <script context="module" lang="ts">
-  import Calculator from 'lucide-svelte/icons/calculator';
-  import Calendar from 'lucide-svelte/icons/calendar';
-  import CreditCard from 'lucide-svelte/icons/credit-card';
-  import Settings from 'lucide-svelte/icons/settings';
-  import Smile from 'lucide-svelte/icons/smile';
-  import User from 'lucide-svelte/icons/user';
+  import CalculatorIcon from 'lucide-svelte/icons/calculator';
+  import CalendarIcon from 'lucide-svelte/icons/calendar';
+  import CreditCardIcon from 'lucide-svelte/icons/credit-card';
+  import SettingsIcon from 'lucide-svelte/icons/settings';
+  import SmileIcon from 'lucide-svelte/icons/smile';
+  import UserIcon from 'lucide-svelte/icons/user';
   import { onMount } from 'svelte';
   import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Command from '$lib/components/command/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -37,7 +37,7 @@
       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
         event.preventDefault();
 
-        $superFormData.open = !$superFormData.open;
+        $superFormData.open = true;
       }
     }
 
@@ -50,107 +50,119 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="loop" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Loop</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="loop" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Loop</Form.Label>
 
-    <Form.Description>
-      Optionally set to
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
+          </Form.Control>
 
-      <code>true</code>
+          <Form.Description>
+            Optionally set to
 
-      to enable looping through the items when the user reaches the end of the list using the
-      keyboard.
-    </Form.Description>
+            <code>true</code>
 
-    <Form.FieldErrors />
-  </Form.Field>
+            to enable looping through the items when the user reaches the end of the list using the
+            keyboard.
+          </Form.Description>
 
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
 
-    <Form.Description>The open state of the command dialog.</Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.Description>The open state of the command dialog.</Form.Description>
 
-<Separator />
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-<p class="text-sm text-muted-foreground">
-  Press
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-  <kbd
-    class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
-  >
-    <span class="text-xs">⌘</span>
+    <Accordion.Content>
+      <p class="text-sm text-muted-foreground">
+        Press
 
-    <span>+</span>
+        <kbd
+          class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+        >
+          <span class="text-xs">⌘</span>
 
-    <span>K</span>
-  </kbd>
-</p>
+          <span>+</span>
 
-<Command.Dialog loop="{$superFormData.loop}" bind:open="{$superFormData.open}">
-  <Command.Input placeholder="Type a command or search..." />
+          <span>K</span>
+        </kbd>
+      </p>
 
-  <Command.List>
-    <Command.Empty>No results found.</Command.Empty>
+      <Command.Dialog {...$superFormData} bind:open="{$superFormData.open}">
+        <Command.Input placeholder="Type a command or search..." />
 
-    <Command.Group heading="Suggestions">
-      <Command.Item>
-        <Calendar class="mr-2 h-4 w-4" />
+        <Command.List>
+          <Command.Empty>No results found.</Command.Empty>
 
-        <span>Calendar</span>
-      </Command.Item>
+          <Command.Group heading="Suggestions">
+            <Command.Item class="gap-x-2">
+              <CalendarIcon />
 
-      <Command.Item>
-        <Smile class="mr-2 h-4 w-4" />
+              <span>Calendar</span>
+            </Command.Item>
 
-        <span>Search Emoji</span>
-      </Command.Item>
+            <Command.Item class="gap-x-2">
+              <SmileIcon />
 
-      <Command.Item>
-        <Calculator class="mr-2 h-4 w-4" />
+              <span>Search Emoji</span>
+            </Command.Item>
 
-        <span>Calculator</span>
-      </Command.Item>
-    </Command.Group>
+            <Command.Item class="gap-x-2">
+              <CalculatorIcon />
 
-    <Command.Separator />
+              <span>Calculator</span>
+            </Command.Item>
+          </Command.Group>
 
-    <Command.Group heading="Settings">
-      <Command.Item>
-        <User class="mr-2 h-4 w-4" />
+          <Command.Separator />
 
-        <span>Profile</span>
+          <Command.Group heading="Settings">
+            <Command.Item class="gap-x-2">
+              <UserIcon />
 
-        <Command.Shortcut>⌘P</Command.Shortcut>
-      </Command.Item>
+              <span>Profile</span>
 
-      <Command.Item>
-        <CreditCard class="mr-2 h-4 w-4" />
+              <Command.Shortcut>⌘P</Command.Shortcut>
+            </Command.Item>
 
-        <span>Billing</span>
+            <Command.Item class="gap-x-2">
+              <CreditCardIcon />
 
-        <Command.Shortcut>⌘B</Command.Shortcut>
-      </Command.Item>
+              <span>Billing</span>
 
-      <Command.Item>
-        <Settings class="mr-2 h-4 w-4" />
+              <Command.Shortcut>⌘B</Command.Shortcut>
+            </Command.Item>
 
-        <span>Settings</span>
+            <Command.Item class="gap-x-2">
+              <SettingsIcon />
 
-        <Command.Shortcut>⌘S</Command.Shortcut>
-      </Command.Item>
-    </Command.Group>
-  </Command.List>
-</Command.Dialog>
+              <span>Settings</span>
+
+              <Command.Shortcut>⌘S</Command.Shortcut>
+            </Command.Item>
+          </Command.Group>
+        </Command.List>
+      </Command.Dialog>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/container/+page.svelte b/src/routes/container/+page.svelte
index 78cb0fb..144a860 100644
--- a/src/routes/container/+page.svelte
+++ b/src/routes/container/+page.svelte
@@ -3,9 +3,9 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Container from '$lib/components/container/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -29,52 +29,60 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="xAxis" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>X axis</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.xAxis}" />
-    </Form.Control>
-
-    <Form.Description>Whether to add horizontal padding.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="yAxis" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Y axis</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.yAxis}" />
-    </Form.Control>
-
-    <Form.Description>Whether to add vertical padding.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<p>
-  Lorem ipsum dolor sit amet consectetur adipisicing elit. Non beatae, cupiditate unde cumque facere
-  laboriosam, ipsa quo, veritatis in similique est corrupti quibusdam. Itaque, unde laboriosam.
-  Aliquid autem dolorem magni.
-</p>
-
-<Container
-  class="bg-slate-300 transition-all duration-75"
-  xAxis="{$superFormData.xAxis}"
-  yAxis="{$superFormData.yAxis}"
->
-  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam sapiente nisi omnis temporibus
-  veritatis nihil eligendi impedit similique quo, neque sequi voluptate, ipsum optio odit repellat
-  ipsam quidem delectus libero.
-</Container>
-
-<p>
-  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur tempora pariatur numquam quae
-  enim cum aliquam rerum accusamus necessitatibus culpa, cupiditate, minima modi doloribus! Iure
-  aperiam libero veniam aspernatur distinctio?
-</p>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="xAxis" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>X axis</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.xAxis}" />
+          </Form.Control>
+
+          <Form.Description>Whether to add horizontal padding.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="yAxis" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Y axis</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.yAxis}" />
+          </Form.Control>
+
+          <Form.Description>Whether to add vertical padding.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Non beatae, cupiditate unde cumque
+        facere laboriosam, ipsa quo, veritatis in similique est corrupti quibusdam. Itaque, unde
+        laboriosam. Aliquid autem dolorem magni.
+      </p>
+
+      <Container {...$superFormData} class="bg-muted transition-all duration-75">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam sapiente nisi omnis
+        temporibus veritatis nihil eligendi impedit similique quo, neque sequi voluptate, ipsum
+        optio odit repellat ipsam quidem delectus libero.
+      </Container>
+
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur tempora pariatur
+        numquam quae enim cum aliquam rerum accusamus necessitatibus culpa, cupiditate, minima modi
+        doloribus! Iure aperiam libero veniam aspernatur distinctio?
+      </p>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/dialog/+page.svelte b/src/routes/dialog/+page.svelte
index 8c97f74..ebc305c 100644
--- a/src/routes/dialog/+page.svelte
+++ b/src/routes/dialog/+page.svelte
@@ -3,12 +3,12 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Dialog from '$lib/components/dialog/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
   import Label from '$lib/components/label/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -34,102 +34,113 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on escape</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
-    </Form.Control>
-
-    <Form.Description>
-      If true, the dialog will close when the user presses the escape key.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on outside click</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
-    </Form.Control>
-
-    <Form.Description>
-      If true, the dialog will close when the user clicks outside of it.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
-
-    <Form.Description>
-      The open state of the Dialog. You can bind to this value to programatically open/close the
-      Dialog.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Prevent scroll</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
-    </Form.Control>
-
-    <Form.Description>
-      If true, the dialog will prevent scrolling on the body when it is open.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Dialog.Root
-  closeOnEscape="{$superFormData.closeOnEscape}"
-  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
-  preventScroll="{$superFormData.preventScroll}"
-  bind:open="{$superFormData.open}"
->
-  <Dialog.Trigger asChild let:builder>
-    <Button builders="{[builder]}" variant="outline">Edit Profile</Button>
-  </Dialog.Trigger>
-
-  <Dialog.Content class="sm:max-w-[425px]">
-    <Dialog.Header>
-      <Dialog.Title>Edit profile</Dialog.Title>
-
-      <Dialog.Description>
-        Make changes to your profile here. Click save when you're done.
-      </Dialog.Description>
-    </Dialog.Header>
-
-    <div class="grid gap-4 py-4">
-      <div class="grid grid-cols-4 items-center gap-4">
-        <Label class="text-right" for="name">Name</Label>
-
-        <Input class="col-span-3" id="name" value="Pedro Duarte" variant="text" />
-      </div>
-
-      <div class="grid grid-cols-4 items-center gap-4">
-        <Label class="text-right" for="username">Username</Label>
-
-        <Input class="col-span-3" id="username" value="@peduarte" variant="text" />
-      </div>
-    </div>
-
-    <Dialog.Footer>
-      <Button type="submit">Save changes</Button>
-    </Dialog.Footer>
-  </Dialog.Content>
-</Dialog.Root>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on escape</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+          </Form.Control>
+
+          <Form.Description>
+            If true, the dialog will close when the user presses the escape key.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on outside click</Form.Label>
+
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.closeOnOutsideClick}"
+            />
+          </Form.Control>
+
+          <Form.Description>
+            If true, the dialog will close when the user clicks outside of it.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
+
+          <Form.Description>
+            The open state of the Dialog. You can bind to this value to programatically open/close
+            the Dialog.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Prevent scroll</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
+          </Form.Control>
+
+          <Form.Description>
+            If true, the dialog will prevent scrolling on the body when it is open.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Dialog.Root {...$superFormData} bind:open="{$superFormData.open}">
+        <Dialog.Trigger asChild let:builder>
+          <Button builders="{[builder]}" variant="outline">Edit Profile</Button>
+        </Dialog.Trigger>
+
+        <Dialog.Content class="sm:max-w-[425px]">
+          <Dialog.Header>
+            <Dialog.Title>Edit profile</Dialog.Title>
+
+            <Dialog.Description>
+              Make changes to your profile here. Click save when you're done.
+            </Dialog.Description>
+          </Dialog.Header>
+
+          <div class="grid gap-4 py-4">
+            <div class="grid grid-cols-4 items-center gap-4">
+              <Label class="text-right" for="name">Name</Label>
+
+              <Input class="col-span-3" id="name" value="Pedro Duarte" variant="text" />
+            </div>
+
+            <div class="grid grid-cols-4 items-center gap-4">
+              <Label class="text-right" for="username">Username</Label>
+
+              <Input class="col-span-3" id="username" value="@peduarte" variant="text" />
+            </div>
+          </div>
+
+          <Dialog.Footer>
+            <Button type="submit">Save changes</Button>
+          </Dialog.Footer>
+        </Dialog.Content>
+      </Dialog.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/drawer/+page.svelte b/src/routes/drawer/+page.svelte
index 7a51b0c..5af1738 100644
--- a/src/routes/drawer/+page.svelte
+++ b/src/routes/drawer/+page.svelte
@@ -1,14 +1,14 @@
 <script context="module" lang="ts">
-  import Minus from 'lucide-svelte/icons/minus';
-  import Plus from 'lucide-svelte/icons/plus';
+  import MinusIcon from 'lucide-svelte/icons/minus';
+  import PlusIcon from 'lucide-svelte/icons/plus';
   import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Drawer from '$lib/components/drawer/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -39,115 +39,130 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on escape</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
-    </Form.Control>
-
-    <Form.Description>
-      If true, the dialog will close when the user presses the escape key.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on outside click</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
-    </Form.Control>
-
-    <Form.Description>
-      If true, the dialog will close when the user clicks outside of it.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
-
-    <Form.Description>
-      The open state of the Drawer. You can bind to this value to programatically open/close the
-      Drawer.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Drawer.Root
-  closeOnEscape="{$superFormData.closeOnEscape}"
-  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
-  dismissible
-  shouldScaleBackground
-  bind:open="{$superFormData.open}"
->
-  <Drawer.Trigger asChild let:builder>
-    <Button builders="{[builder]}" variant="outline">Open Drawer</Button>
-  </Drawer.Trigger>
-
-  <Drawer.Content>
-    <div class="mx-auto w-full max-w-sm">
-      <Drawer.Header>
-        <Drawer.Title>Move Goal</Drawer.Title>
-
-        <Drawer.Description>Set your daily activity goal.</Drawer.Description>
-      </Drawer.Header>
-
-      <div class="p-4 pb-0">
-        <div class="flex items-center justify-center space-x-2">
-          <Button
-            class="h-8 w-8 shrink-0 rounded-full"
-            disabled="{goal <= 200}"
-            size="icon"
-            variant="outline"
-            on:click="{() => handleClick(-10)}"
-          >
-            <Minus class="h-4 w-4" />
-
-            <span class="sr-only">Decrease</span>
-          </Button>
-
-          <div class="flex-1 text-center">
-            <div class="text-7xl font-bold tracking-tighter">
-              {goal}
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on escape</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+          </Form.Control>
+
+          <Form.Description>
+            If true, the dialog will close when the user presses the escape key.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on outside click</Form.Label>
+
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.closeOnOutsideClick}"
+            />
+          </Form.Control>
+
+          <Form.Description>
+            If true, the dialog will close when the user clicks outside of it.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
+
+          <Form.Description>
+            The open state of the Drawer. You can bind to this value to programatically open/close
+            the Drawer.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Drawer.Root
+        {...$superFormData}
+        dismissible
+        shouldScaleBackground
+        bind:open="{$superFormData.open}"
+      >
+        <Drawer.Trigger asChild let:builder>
+          <Button builders="{[builder]}" variant="outline">Open Drawer</Button>
+        </Drawer.Trigger>
+
+        <Drawer.Content>
+          <div class="mx-auto w-full max-w-sm">
+            <Drawer.Header>
+              <Drawer.Title>Move Goal</Drawer.Title>
+
+              <Drawer.Description>Set your daily activity goal.</Drawer.Description>
+            </Drawer.Header>
+
+            <div class="p-4 pb-0">
+              <div class="flex items-center justify-center space-x-2">
+                <Button
+                  class="h-8 w-8 shrink-0 rounded-full"
+                  disabled="{goal <= 200}"
+                  size="icon"
+                  variant="outline"
+                  on:click="{() => handleClick(-10)}"
+                >
+                  <MinusIcon class="h-4 w-4" />
+
+                  <span class="sr-only">Decrease</span>
+                </Button>
+
+                <div class="flex-1 text-center">
+                  <div class="text-7xl font-bold tracking-tighter">
+                    {goal}
+                  </div>
+
+                  <div class="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
+                </div>
+
+                <Button
+                  class="h-8 w-8 shrink-0 rounded-full"
+                  disabled="{goal >= 400}"
+                  size="icon"
+                  variant="outline"
+                  on:click="{() => handleClick(10)}"
+                >
+                  <PlusIcon class="h-4 w-4" />
+
+                  <span class="sr-only">Increase</span>
+                </Button>
+              </div>
             </div>
 
-            <div class="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
-          </div>
+            <Drawer.Footer>
+              <Button>Submit</Button>
 
-          <Button
-            class="h-8 w-8 shrink-0 rounded-full"
-            disabled="{goal >= 400}"
-            size="icon"
-            variant="outline"
-            on:click="{() => handleClick(10)}"
-          >
-            <Plus class="h-4 w-4" />
-
-            <span class="sr-only">Increase</span>
-          </Button>
-        </div>
-      </div>
-
-      <Drawer.Footer>
-        <Button>Submit</Button>
-
-        <Drawer.Close asChild let:builder>
-          <Button builders="{[builder]}" variant="outline">Cancel</Button>
-        </Drawer.Close>
-      </Drawer.Footer>
-    </div>
-  </Drawer.Content>
-</Drawer.Root>
+              <Drawer.Close asChild let:builder>
+                <Button builders="{[builder]}" variant="outline">Cancel</Button>
+              </Drawer.Close>
+            </Drawer.Footer>
+          </div>
+        </Drawer.Content>
+      </Drawer.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/dropdown-menu/+page.svelte b/src/routes/dropdown-menu/+page.svelte
index 052f1e7..41f63e8 100644
--- a/src/routes/dropdown-menu/+page.svelte
+++ b/src/routes/dropdown-menu/+page.svelte
@@ -1,27 +1,27 @@
 <script context="module" lang="ts">
-  import CirclePlus from 'lucide-svelte/icons/circle-plus';
-  import Cloud from 'lucide-svelte/icons/cloud';
-  import CreditCard from 'lucide-svelte/icons/credit-card';
-  import Github from 'lucide-svelte/icons/github';
-  import Keyboard from 'lucide-svelte/icons/keyboard';
-  import LifeBuoy from 'lucide-svelte/icons/life-buoy';
-  import LogOut from 'lucide-svelte/icons/log-out';
-  import Mail from 'lucide-svelte/icons/mail';
-  import MessageSquare from 'lucide-svelte/icons/message-square';
-  import Plus from 'lucide-svelte/icons/plus';
-  import Settings from 'lucide-svelte/icons/settings';
-  import User from 'lucide-svelte/icons/user';
-  import UserPlus from 'lucide-svelte/icons/user-plus';
-  import Users from 'lucide-svelte/icons/users';
+  import CirclePlusIcon from 'lucide-svelte/icons/circle-plus';
+  import CloudIcon from 'lucide-svelte/icons/cloud';
+  import CreditCardIcon from 'lucide-svelte/icons/credit-card';
+  import GithubIcon from 'lucide-svelte/icons/github';
+  import KeyboardIcon from 'lucide-svelte/icons/keyboard';
+  import LifeBuoyIcon from 'lucide-svelte/icons/life-buoy';
+  import LogOutIcon from 'lucide-svelte/icons/log-out';
+  import MailIcon from 'lucide-svelte/icons/mail';
+  import MessageSquareIcon from 'lucide-svelte/icons/message-square';
+  import PlusIcon from 'lucide-svelte/icons/plus';
+  import SettingsIcon from 'lucide-svelte/icons/settings';
+  import UserIcon from 'lucide-svelte/icons/user';
+  import UserPlusIcon from 'lucide-svelte/icons/user-plus';
+  import UsersIcon from 'lucide-svelte/icons/users';
   import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as DropdownMenu from '$lib/components/dropdown-menu/index.js';
   import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -52,284 +52,300 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on escape</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on escape</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to close the menu when the escape key is pressed.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnItemClick" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on item click</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnItemClick}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to close the menu when an internal item is clicked.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on outside click</Form.Label>
+
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.closeOnOutsideClick}"
+            />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to close the menu when a click occurs outside of it.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="dir" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Direction</Form.Label>
+
+            <Select.Root
+              items="{DropdownMenu.rootDirs.map((dir) => ({
+                label: dir,
+                value: dir,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.dir = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.dir !== undefined
+                ? {
+                    label: $superFormData.dir,
+                    value: $superFormData.dir,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each DropdownMenu.rootDirs as dir, index (index)}
+                  <Select.Item value="{dir}">
+                    {dir}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>The direction of the text in the dropdown menu.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="disableFocusFirstItem" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disable focus first item</Form.Label>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
-    </Form.Control>
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.disableFocusFirstItem}"
+            />
+          </Form.Control>
 
-    <Form.Description>
-      Whether or not to close the menu when the escape key is pressed.
-    </Form.Description>
+          <Form.Description
+            >Optionally prevent focusing the first item in the menu.</Form.Description
+          >
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.FieldErrors />
+        </Form.Field>
 
-  <Form.Field name="closeOnItemClick" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on item click</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnItemClick}" />
-    </Form.Control>
+        <Form.Field name="loop" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Loop</Form.Label>
 
-    <Form.Description>
-      Whether or not to close the menu when an internal item is clicked.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>Whether or not to loop the menu navigation.</Form.Description>
 
-  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on outside click</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
-    </Form.Control>
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
 
-    <Form.Description>
-      Whether or not to close the menu when a click occurs outside of it.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>
+            The open state of the context menu. You can bind this to a boolean value to
+            programmatically control the open state.
+          </Form.Description>
 
-  <Form.Field name="dir" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Direction</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Select.Root
-        items="{DropdownMenu.rootDirs.map((dir) => ({
-          label: dir,
-          value: dir,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.dir = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.dir !== undefined
-          ? {
-              label: $superFormData.dir,
-              value: $superFormData.dir,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
+        <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Prevent scroll</Form.Label>
 
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
+          </Form.Control>
 
-        <Select.Content>
-          {#each DropdownMenu.rootDirs as dir, index (index)}
-            <Select.Item value="{dir}">
-              {dir}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
+          <Form.Description
+            >Whether or not to prevent scrolling when the menu is open.</Form.Description
+          >
 
-    <Form.Description>The direction of the text in the dropdown menu.</Form.Description>
+          <Form.FieldErrors />
+        </Form.Field>
 
-    <Form.FieldErrors />
-  </Form.Field>
+        <Form.Field name="typeahead" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Typeahead</Form.Label>
 
-  <Form.Field name="disableFocusFirstItem" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disable focus first item</Form.Label>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.typeahead}" />
+          </Form.Control>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disableFocusFirstItem}" />
-    </Form.Control>
+          <Form.Description
+            >Whether to use typeahead to automatically focus elements.</Form.Description
+          >
 
-    <Form.Description>Optionally prevent focusing the first item in the menu.</Form.Description>
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-    <Form.FieldErrors />
-  </Form.Field>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-  <Form.Field name="loop" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Loop</Form.Label>
+    <Accordion.Content>
+      <DropdownMenu.Root {...$superFormData} bind:open="{$superFormData.open}">
+        <DropdownMenu.Trigger asChild let:builder>
+          <Button builders="{[builder]}" variant="outline">Open</Button>
+        </DropdownMenu.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
-    </Form.Control>
+        <DropdownMenu.Content class="w-56">
+          <DropdownMenu.Label>My Account</DropdownMenu.Label>
 
-    <Form.Description>Whether or not to loop the menu navigation.</Form.Description>
+          <DropdownMenu.Separator />
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <DropdownMenu.Group>
+            <DropdownMenu.Item>
+              <UserIcon class="mr-2 h-4 w-4" />
 
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
+              <span>Profile</span>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
+              <DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
 
-    <Form.Description>
-      The open state of the context menu. You can bind this to a boolean value to programmatically
-      control the open state.
-    </Form.Description>
+            <DropdownMenu.Item>
+              <CreditCardIcon class="mr-2 h-4 w-4" />
 
-    <Form.FieldErrors />
-  </Form.Field>
+              <span>Billing</span>
 
-  <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Prevent scroll</Form.Label>
+              <DropdownMenu.Shortcut>⌘B</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
-    </Form.Control>
+            <DropdownMenu.Item>
+              <SettingsIcon class="mr-2 h-4 w-4" />
 
-    <Form.Description>Whether or not to prevent scrolling when the menu is open.</Form.Description>
+              <span>Settings</span>
 
-    <Form.FieldErrors />
-  </Form.Field>
+              <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
 
-  <Form.Field name="typeahead" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Typeahead</Form.Label>
+            <DropdownMenu.Item>
+              <KeyboardIcon class="mr-2 h-4 w-4" />
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.typeahead}" />
-    </Form.Control>
+              <span>Keyboard shortcuts</span>
 
-    <Form.Description>Whether to use typeahead to automatically focus elements.</Form.Description>
+              <DropdownMenu.Shortcut>⌘K</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <DropdownMenu.Separator />
 
-<Separator />
+          <DropdownMenu.Group>
+            <DropdownMenu.Item>
+              <UsersIcon class="mr-2 h-4 w-4" />
 
-<DropdownMenu.Root
-  closeOnEscape="{$superFormData.closeOnEscape}"
-  closeOnItemClick="{$superFormData.closeOnItemClick}"
-  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
-  dir="{$superFormData.dir}"
-  disableFocusFirstItem="{$superFormData.disableFocusFirstItem}"
-  loop="{$superFormData.loop}"
-  preventScroll="{$superFormData.preventScroll}"
-  typeahead="{$superFormData.typeahead}"
-  bind:open="{$superFormData.open}"
->
-  <DropdownMenu.Trigger asChild let:builder>
-    <Button builders="{[builder]}" variant="outline">Open</Button>
-  </DropdownMenu.Trigger>
+              <span>Team</span>
+            </DropdownMenu.Item>
 
-  <DropdownMenu.Content class="w-56">
-    <DropdownMenu.Label>My Account</DropdownMenu.Label>
+            <DropdownMenu.Sub>
+              <DropdownMenu.SubTrigger>
+                <UserPlusIcon class="mr-2 h-4 w-4" />
 
-    <DropdownMenu.Separator />
+                <span>Invite users</span>
+              </DropdownMenu.SubTrigger>
 
-    <DropdownMenu.Group>
-      <DropdownMenu.Item>
-        <User class="mr-2 h-4 w-4" />
+              <DropdownMenu.SubContent>
+                <DropdownMenu.Item>
+                  <MailIcon class="mr-2 h-4 w-4" />
 
-        <span>Profile</span>
+                  <span>Email</span>
+                </DropdownMenu.Item>
 
-        <DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
-      </DropdownMenu.Item>
+                <DropdownMenu.Item>
+                  <MessageSquareIcon class="mr-2 h-4 w-4" />
 
-      <DropdownMenu.Item>
-        <CreditCard class="mr-2 h-4 w-4" />
+                  <span>Message</span>
+                </DropdownMenu.Item>
 
-        <span>Billing</span>
+                <DropdownMenu.Item>
+                  <CirclePlusIcon class="mr-2 h-4 w-4" />
 
-        <DropdownMenu.Shortcut>⌘B</DropdownMenu.Shortcut>
-      </DropdownMenu.Item>
+                  <span>More...</span>
+                </DropdownMenu.Item>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
 
-      <DropdownMenu.Item>
-        <Settings class="mr-2 h-4 w-4" />
+            <DropdownMenu.Item>
+              <PlusIcon class="mr-2 h-4 w-4" />
 
-        <span>Settings</span>
+              <span>New Team</span>
 
-        <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
-      </DropdownMenu.Item>
+              <DropdownMenu.Shortcut>⌘+T</DropdownMenu.Shortcut>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
 
-      <DropdownMenu.Item>
-        <Keyboard class="mr-2 h-4 w-4" />
+          <DropdownMenu.Separator />
 
-        <span>Keyboard shortcuts</span>
-
-        <DropdownMenu.Shortcut>⌘K</DropdownMenu.Shortcut>
-      </DropdownMenu.Item>
-    </DropdownMenu.Group>
-
-    <DropdownMenu.Separator />
-
-    <DropdownMenu.Group>
-      <DropdownMenu.Item>
-        <Users class="mr-2 h-4 w-4" />
-
-        <span>Team</span>
-      </DropdownMenu.Item>
-
-      <DropdownMenu.Sub>
-        <DropdownMenu.SubTrigger>
-          <UserPlus class="mr-2 h-4 w-4" />
-
-          <span>Invite users</span>
-        </DropdownMenu.SubTrigger>
-
-        <DropdownMenu.SubContent>
           <DropdownMenu.Item>
-            <Mail class="mr-2 h-4 w-4" />
+            <GithubIcon class="mr-2 h-4 w-4" />
 
-            <span>Email</span>
+            <span>GitHub</span>
           </DropdownMenu.Item>
 
           <DropdownMenu.Item>
-            <MessageSquare class="mr-2 h-4 w-4" />
+            <LifeBuoyIcon class="mr-2 h-4 w-4" />
 
-            <span>Message</span>
+            <span>Support</span>
           </DropdownMenu.Item>
 
           <DropdownMenu.Item>
-            <CirclePlus class="mr-2 h-4 w-4" />
+            <CloudIcon class="mr-2 h-4 w-4" />
 
-            <span>More...</span>
+            <span>API</span>
           </DropdownMenu.Item>
-        </DropdownMenu.SubContent>
-      </DropdownMenu.Sub>
-
-      <DropdownMenu.Item>
-        <Plus class="mr-2 h-4 w-4" />
-
-        <span>New Team</span>
-
-        <DropdownMenu.Shortcut>⌘+T</DropdownMenu.Shortcut>
-      </DropdownMenu.Item>
-    </DropdownMenu.Group>
 
-    <DropdownMenu.Separator />
+          <DropdownMenu.Separator />
 
-    <DropdownMenu.Item>
-      <Github class="mr-2 h-4 w-4" />
-
-      <span>GitHub</span>
-    </DropdownMenu.Item>
-
-    <DropdownMenu.Item>
-      <LifeBuoy class="mr-2 h-4 w-4" />
-
-      <span>Support</span>
-    </DropdownMenu.Item>
-
-    <DropdownMenu.Item>
-      <Cloud class="mr-2 h-4 w-4" />
-
-      <span>API</span>
-    </DropdownMenu.Item>
-
-    <DropdownMenu.Separator />
-
-    <DropdownMenu.Item>
-      <LogOut class="mr-2 h-4 w-4" />
+          <DropdownMenu.Item>
+            <LogOutIcon class="mr-2 h-4 w-4" />
 
-      <span>Log out</span>
+            <span>Log out</span>
 
-      <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
-    </DropdownMenu.Item>
-  </DropdownMenu.Content>
-</DropdownMenu.Root>
+            <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/form/+page.svelte b/src/routes/form/+page.svelte
index 28f3f18..ec95bda 100644
--- a/src/routes/form/+page.svelte
+++ b/src/routes/form/+page.svelte
@@ -3,9 +3,9 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter1 = zod(
@@ -38,34 +38,51 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm1}">
-  <Form.Field name="debug" superForm="{superForm1}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Debug</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData1.debug}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm1}">
+        <Form.Field name="debug" superForm="{superForm1}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Debug</Form.Label>
 
-    <Form.Description>
-      Whether to display the form state in a debug panel underneath the form.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData1.debug}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.Description>
+            Whether to display the form state in a debug panel underneath the form.
+          </Form.Description>
 
-<Separator />
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-<Form.Root debug="{$superFormData1.debug}" superForm="{superForm2}">
-  <Form.Field name="username" superForm="{superForm2}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Placeholder</Form.Label>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-      <Input {...attrs} {...constraints} variant="text" bind:value="{$superFormData2.username}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root {...$superFormData1} superForm="{superForm2}">
+        <Form.Field name="username" superForm="{superForm2}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Placeholder</Form.Label>
 
-    <Form.Description>This is your public display name.</Form.Description>
+            <Input
+              {...attrs}
+              {...constraints}
+              variant="text"
+              bind:value="{$superFormData2.username}"
+            />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.Description>This is your public display name.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/input/+page.svelte b/src/routes/input/+page.svelte
index e03e90a..bea2017 100644
--- a/src/routes/input/+page.svelte
+++ b/src/routes/input/+page.svelte
@@ -1,22 +1,21 @@
 <script context="module" lang="ts">
+  import type { Selected } from 'bits-ui';
   import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Input, { variants } from '$lib/components/input/index.js';
+  import Input, { variants, type Variant } from '$lib/components/input/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
-    z
-      .object({
-        disabled: z.boolean().default(false),
-        placeholder: z.string().default(''),
-        variant: z.enum(variants).default('text'),
-      })
-      .partial(),
+    z.object({
+      disabled: z.boolean().default(false).optional(),
+      placeholder: z.string().default('').optional(),
+      variant: z.enum(variants).default('text'),
+    }),
   );
 </script>
 
@@ -26,82 +25,97 @@
     validators: adapter,
   });
   const { form: superFormData } = superForm;
+
+  function handleSelectedChange(selected: Selected<Variant> | undefined) {
+    $superFormData.variant = selected!.value;
+  }
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disabled</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
-    </Form.Control>
-
-    <Form.Description>Whether the input is disabled.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="placeholder" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Placeholder</Form.Label>
-
-      <Input {...attrs} {...constraints} variant="text" bind:value="{$superFormData.placeholder}" />
-    </Form.Control>
-
-    <Form.Description>The input placeholder.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="variant" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Variant</Form.Label>
-
-      <Select.Root
-        items="{variants.map((variant) => ({
-          label: variant,
-          value: variant,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.variant = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.variant !== undefined
-          ? {
-              label: $superFormData.variant,
-              value: $superFormData.variant,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each variants as variant, index (index)}
-            <Select.Item value="{variant}">
-              {variant}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>The variant of the input.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Input
-  disabled="{$superFormData.disabled}"
-  placeholder="{$superFormData.placeholder}"
-  variant="{$superFormData.variant ?? 'text'}"
-/>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
+
+          <Form.Description>Whether the input is disabled.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="placeholder" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Placeholder</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              variant="text"
+              bind:value="{$superFormData.placeholder}"
+            />
+          </Form.Control>
+
+          <Form.Description>The input placeholder.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="variant" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Variant</Form.Label>
+
+            <Select.Root
+              items="{variants.map((variant) => ({
+                label: variant,
+                value: variant,
+              }))}"
+              onSelectedChange="{handleSelectedChange}"
+              portal="{null}"
+              selected="{$superFormData.variant !== undefined
+                ? {
+                    label: $superFormData.variant,
+                    value: $superFormData.variant,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each variants as variant, index (index)}
+                  <Select.Item value="{variant}">
+                    {variant}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>The variant of the input.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Input {...$superFormData} />
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/label/+page.svelte b/src/routes/label/+page.svelte
index 5216647..232f643 100644
--- a/src/routes/label/+page.svelte
+++ b/src/routes/label/+page.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
+  import * as Accordion from '$lib/components/accordion/index.js';
+  import Checkbox from '$lib/components/checkbox/index.js';
   import Label from '$lib/components/label/index.js';
-  import Separator from '$lib/components/separator/index.js';
 </script>
 
 <script lang="ts">
@@ -9,10 +10,24 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Separator />
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-<div class="flex items-center space-x-2">
-  <!-- <Checkbox id="terms" /> -->
+    <Accordion.Content>
+      <!--  -->
+    </Accordion.Content>
+  </Accordion.Item>
 
-  <Label for="terms">Accept terms and conditions</Label>
-</div>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <div class="flex items-center space-x-2">
+        <Checkbox id="terms" />
+
+        <Label for="terms">Accept terms and conditions</Label>
+      </div>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/pagination/+page.svelte b/src/routes/pagination/+page.svelte
index 95a9a9a..027b9bc 100644
--- a/src/routes/pagination/+page.svelte
+++ b/src/routes/pagination/+page.svelte
@@ -1,24 +1,22 @@
 <script context="module" lang="ts">
-  import Separator from '$lib/components/separator/index.js';
-  import ChevronLeft from 'lucide-svelte/icons/chevron-left';
-  import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import ChevronLeftIcon from 'lucide-svelte/icons/chevron-left';
+  import ChevronRightIcon from 'lucide-svelte/icons/chevron-right';
   import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
   import * as Pagination from '$lib/components/pagination/index.js';
 
   const adapter = zod(
-    z
-      .object({
-        count: z.number().int().min(0).default(20),
-        perPage: z.number().int().min(1).default(10),
-        page: z.number().int().min(1).default(1),
-        siblingCount: z.number().int().min(1).default(1),
-      })
-      .partial(),
+    z.object({
+      count: z.number().int().min(0).default(20),
+      perPage: z.number().int().min(1).default(10).optional(),
+      page: z.number().int().min(1).default(1).optional(),
+      siblingCount: z.number().int().min(1).default(1).optional(),
+    }),
   );
 </script>
 
@@ -33,126 +31,138 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="count" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Count</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        step="{1}"
-        variant="number"
-        bind:value="{$superFormData.count}"
-      />
-    </Form.Control>
-
-    <Form.Description>The total number of items to be paginated.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="perPage" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Per page</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        step="{1}"
-        variant="number"
-        bind:value="{$superFormData.perPage}"
-      />
-    </Form.Control>
-
-    <Form.Description>Number of items per page.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="page" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Page</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        step="{1}"
-        variant="number"
-        bind:value="{$superFormData.page}"
-      />
-    </Form.Control>
-
-    <Form.Description>
-      The selected page. This updates as the users selects new pages. You can bind this to a value
-      to programmatically control the value state.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="siblingCount" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Sibling count</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        step="{1}"
-        variant="number"
-        bind:value="{$superFormData.siblingCount}"
-      />
-    </Form.Control>
-
-    <Form.Description>Number of visible items before and after the current page.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Pagination.Root
-  count="{$superFormData.count ?? 0}"
-  perPage="{$superFormData.perPage}"
-  siblingCount="{$superFormData.siblingCount}"
-  bind:page="{$superFormData.page}"
-  let:pages
-  let:currentPage
->
-  <Pagination.Content>
-    <Pagination.Item>
-      <Pagination.PreviousButton>
-        <ChevronLeft class="h-4 w-4" />
-
-        <span class="hidden sm:block">Previous</span>
-      </Pagination.PreviousButton>
-    </Pagination.Item>
-
-    {#each pages as page (page.key)}
-      {#if page.type === 'ellipsis'}
-        <Pagination.Item>
-          <Pagination.Ellipsis />
-        </Pagination.Item>
-      {:else}
-        <Pagination.Item>
-          <Pagination.Link isActive="{currentPage === page.value}" page="{page}">
-            {page.value}
-          </Pagination.Link>
-        </Pagination.Item>
-      {/if}
-    {/each}
-
-    <Pagination.Item>
-      <Pagination.NextButton>
-        <span class="hidden sm:block">Next</span>
-
-        <ChevronRight class="h-4 w-4" />
-      </Pagination.NextButton>
-    </Pagination.Item>
-  </Pagination.Content>
-</Pagination.Root>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="count" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Count</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              step="{1}"
+              variant="number"
+              bind:value="{$superFormData.count}"
+            />
+          </Form.Control>
+
+          <Form.Description>The total number of items to be paginated.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="perPage" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Per page</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              step="{1}"
+              variant="number"
+              bind:value="{$superFormData.perPage}"
+            />
+          </Form.Control>
+
+          <Form.Description>Number of items per page.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="page" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Page</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              step="{1}"
+              variant="number"
+              bind:value="{$superFormData.page}"
+            />
+          </Form.Control>
+
+          <Form.Description>
+            The selected page. This updates as the users selects new pages. You can bind this to a
+            value to programmatically control the value state.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="siblingCount" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Sibling count</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              step="{1}"
+              variant="number"
+              bind:value="{$superFormData.siblingCount}"
+            />
+          </Form.Control>
+
+          <Form.Description
+            >Number of visible items before and after the current page.</Form.Description
+          >
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Pagination.Root
+        {...$superFormData}
+        bind:page="{$superFormData.page}"
+        let:pages
+        let:currentPage
+      >
+        <Pagination.Content>
+          <Pagination.Item>
+            <Pagination.PreviousButton>
+              <ChevronLeftIcon class="h-4 w-4" />
+
+              <span class="hidden sm:block">Previous</span>
+            </Pagination.PreviousButton>
+          </Pagination.Item>
+
+          {#each pages as page (page.key)}
+            {#if page.type === 'ellipsis'}
+              <Pagination.Item>
+                <Pagination.Ellipsis />
+              </Pagination.Item>
+            {:else}
+              <Pagination.Item>
+                <Pagination.Link isActive="{currentPage === page.value}" page="{page}">
+                  {page.value}
+                </Pagination.Link>
+              </Pagination.Item>
+            {/if}
+          {/each}
+
+          <Pagination.Item>
+            <Pagination.NextButton>
+              <span class="hidden sm:block">Next</span>
+
+              <ChevronRightIcon class="h-4 w-4" />
+            </Pagination.NextButton>
+          </Pagination.Item>
+        </Pagination.Content>
+      </Pagination.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/popover/+page.svelte b/src/routes/popover/+page.svelte
index bf98ea8..d91f846 100644
--- a/src/routes/popover/+page.svelte
+++ b/src/routes/popover/+page.svelte
@@ -3,12 +3,12 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
   import Label from '$lib/components/label/index.js';
   import * as Popover from '$lib/components/popover/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -35,123 +35,132 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on escape</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on escape</Form.Label>
 
-    <Form.Description>
-      Whether or not to close the popover when the escape key is pressed.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>
+            Whether or not to close the popover when the escape key is pressed.
+          </Form.Description>
 
-  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on outside click</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
-    </Form.Control>
+        <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on outside click</Form.Label>
 
-    <Form.Description>
-      Whether or not to close the popover when the escape key is pressed.
-    </Form.Description>
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.closeOnOutsideClick}"
+            />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>
+            Whether or not to close the popover when the escape key is pressed.
+          </Form.Description>
 
-  <Form.Field name="disableFocusTrap" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disable focus trap</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disableFocusTrap}" />
-    </Form.Control>
+        <Form.Field name="disableFocusTrap" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disable focus trap</Form.Label>
 
-    <Form.Description>
-      Whether or not to disable the focus trap when the popover is open.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disableFocusTrap}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>
+            Whether or not to disable the focus trap when the popover is open.
+          </Form.Description>
 
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
 
-    <Form.Description>The open state of the popover.</Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>The open state of the popover.</Form.Description>
 
-  <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Prevent scroll</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
-    </Form.Control>
+        <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Prevent scroll</Form.Label>
 
-    <Form.Description>
-      Whether or not to prevent scrolling when the popover is open.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.Description>
+            Whether or not to prevent scrolling when the popover is open.
+          </Form.Description>
 
-<Separator />
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-<Popover.Root
-  closeOnEscape="{$superFormData.closeOnEscape}"
-  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
-  disableFocusTrap="{$superFormData.disableFocusTrap}"
-  portal="{null}"
-  preventScroll="{$superFormData.preventScroll}"
-  bind:open="{$superFormData.open}"
->
-  <Popover.Trigger asChild let:builder>
-    <Button builders="{[builder]}" variant="outline">Open</Button>
-  </Popover.Trigger>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-  <Popover.Content>
-    <div class="grid gap-4">
-      <div class="space-y-2">
-        <h4 class="font-medium leading-none">Dimensions</h4>
+    <Accordion.Content>
+      <Popover.Root {...$superFormData} portal="{null}" bind:open="{$superFormData.open}">
+        <Popover.Trigger asChild let:builder>
+          <Button builders="{[builder]}" variant="outline">Open</Button>
+        </Popover.Trigger>
 
-        <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-      </div>
+        <Popover.Content>
+          <div class="grid gap-4">
+            <div class="space-y-2">
+              <h4 class="font-medium leading-none">Dimensions</h4>
 
-      <div class="grid gap-2">
-        <div class="grid grid-cols-3 items-center gap-4">
-          <Label for="width">Width</Label>
+              <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+            </div>
 
-          <Input class="col-span-2 h-8" id="width" value="100%" variant="text" />
-        </div>
+            <div class="grid gap-2">
+              <div class="grid grid-cols-3 items-center gap-4">
+                <Label for="width">Width</Label>
 
-        <div class="grid grid-cols-3 items-center gap-4">
-          <Label for="maxWidth">Max. width</Label>
+                <Input class="col-span-2 h-8" id="width" value="100%" variant="text" />
+              </div>
 
-          <Input class="col-span-2 h-8" id="maxWidth" value="300px" variant="text" />
-        </div>
+              <div class="grid grid-cols-3 items-center gap-4">
+                <Label for="maxWidth">Max. width</Label>
 
-        <div class="grid grid-cols-3 items-center gap-4">
-          <Label for="height">Height</Label>
+                <Input class="col-span-2 h-8" id="maxWidth" value="300px" variant="text" />
+              </div>
 
-          <Input class="col-span-2 h-8" id="height" value="25px" variant="text" />
-        </div>
+              <div class="grid grid-cols-3 items-center gap-4">
+                <Label for="height">Height</Label>
 
-        <div class="grid grid-cols-3 items-center gap-4">
-          <Label for="maxHeight">Max. height</Label>
+                <Input class="col-span-2 h-8" id="height" value="25px" variant="text" />
+              </div>
 
-          <Input class="col-span-2 h-8" id="maxHeight" value="none" variant="text" />
-        </div>
-      </div>
-    </div>
-  </Popover.Content>
-</Popover.Root>
+              <div class="grid grid-cols-3 items-center gap-4">
+                <Label for="maxHeight">Max. height</Label>
+
+                <Input class="col-span-2 h-8" id="maxHeight" value="none" variant="text" />
+              </div>
+            </div>
+          </div>
+        </Popover.Content>
+      </Popover.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/select/+page.svelte b/src/routes/select/+page.svelte
index 16ec274..15edcbb 100644
--- a/src/routes/select/+page.svelte
+++ b/src/routes/select/+page.svelte
@@ -4,9 +4,9 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -37,118 +37,131 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on escape</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on escape</Form.Label>
 
-    <Form.Description>
-      Whether or not to close the listbox menu when the user presses the escape key.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on outside click</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnOutsideClick}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not to close the listbox menu when the user clicks outside of the listbox.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disabled</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
-    </Form.Control>
-
-    <Form.Description>Whether the select is disabled.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="loop" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Loop</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not the listbox should loop through the list when the end or beginning is reached.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
-
-    <Form.Description>The open state of the select menu.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Prevent scroll</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not to prevent scrolling the page when the listbox menu is open.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Select.Root
-  closeOnEscape="{$superFormData.closeOnEscape}"
-  closeOnOutsideClick="{$superFormData.closeOnOutsideClick}"
-  disabled="{$superFormData.disabled}"
-  items="{fruits.map((fruit) => ({
-    label: fruit,
-    value: fruit,
-  }))}"
-  loop="{$superFormData.loop}"
-  onSelectedChange="{(selected) => {
-    selectedFruit = selected;
-  }}"
-  portal="{null}"
-  preventScroll="{$superFormData.preventScroll}"
-  selected="{selectedFruit}"
-  bind:open="{$superFormData.open}"
->
-  <Select.Input id="fruit" name="fruit" />
-
-  <Select.Trigger>
-    <Select.Value placeholder="Select a fruit" />
-  </Select.Trigger>
-
-  <Select.Content>
-    {#each fruits as fruit, index (index)}
-      <Select.Item value="{fruit}">
-        {fruit}
-      </Select.Item>
-    {/each}
-  </Select.Content>
-</Select.Root>
+          <Form.Description>
+            Whether or not to close the listbox menu when the user presses the escape key.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnOutsideClick" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on outside click</Form.Label>
+
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.closeOnOutsideClick}"
+            />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to close the listbox menu when the user clicks outside of the listbox.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
+
+          <Form.Description>Whether the select is disabled.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="loop" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Loop</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not the listbox should loop through the list when the end or beginning is
+            reached.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
+
+          <Form.Description>The open state of the select menu.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="preventScroll" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Prevent scroll</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.preventScroll}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not to prevent scrolling the page when the listbox menu is open.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Select.Root
+        {...$superFormData}
+        items="{fruits.map((fruit) => ({
+          label: fruit,
+          value: fruit,
+        }))}"
+        onSelectedChange="{(selected) => {
+          selectedFruit = selected;
+        }}"
+        portal="{null}"
+        selected="{selectedFruit}"
+        bind:open="{$superFormData.open}"
+      >
+        <Select.Input id="fruit" name="fruit" />
+
+        <Select.Trigger>
+          <Select.Value placeholder="Select a fruit" />
+        </Select.Trigger>
+
+        <Select.Content>
+          {#each fruits as fruit, index (index)}
+            <Select.Item value="{fruit}">
+              {fruit}
+            </Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/separator/+page.svelte b/src/routes/separator/+page.svelte
index 580c6aa..2f2bb98 100644
--- a/src/routes/separator/+page.svelte
+++ b/src/routes/separator/+page.svelte
@@ -3,6 +3,7 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
   import Separator, { defaultOrientation, orientations } from '$lib/components/separator/index.js';
@@ -27,63 +28,76 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="orientation" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Orientation</Form.Label>
-
-      <Select.Root
-        items="{orientations.map((orientation) => ({
-          label: orientation,
-          value: orientation,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.orientation = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.orientation !== undefined
-          ? {
-              label: $superFormData.orientation,
-              value: $superFormData.orientation,
-            }
-          : undefined}"
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="orientation" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Orientation</Form.Label>
+
+            <Select.Root
+              items="{orientations.map((orientation) => ({
+                label: orientation,
+                value: orientation,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.orientation = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.orientation !== undefined
+                ? {
+                    label: $superFormData.orientation,
+                    value: $superFormData.orientation,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each orientations as orientation, index (index)}
+                  <Select.Item value="{orientation}">
+                    {orientation}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>The orientation of the separator.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <div
+        class="flex items-center justify-evenly text-sm"
+        class:h-5="{$superFormData.orientation === 'vertical'}"
+        class:flex-col="{$superFormData.orientation === 'horizontal'}"
+        class:flex-row="{$superFormData.orientation === 'vertical'}"
       >
-        <Select.Input {...attrs} {...constraints} />
+        <div>Foo</div>
 
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
+        <Separator {...$superFormData} />
 
-        <Select.Content>
-          {#each orientations as orientation, index (index)}
-            <Select.Item value="{orientation}">
-              {orientation}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
+        <div>Bar</div>
 
-    <Form.Description>The orientation of the separator.</Form.Description>
+        <Separator {...$superFormData} />
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<div
-  class="flex h-5 items-center justify-evenly text-sm"
-  class:flex-col="{$superFormData.orientation === 'horizontal'}"
-  class:flex-row="{$superFormData.orientation === 'vertical'}"
->
-  <div>Foo</div>
-
-  <Separator orientation="{$superFormData.orientation}" />
-
-  <div>Bar</div>
-
-  <Separator orientation="{$superFormData.orientation}" />
-
-  <div>Baz</div>
-</div>
+        <div>Baz</div>
+      </div>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/sonner/+page.svelte b/src/routes/sonner/+page.svelte
index 9d4f627..d6ff603 100644
--- a/src/routes/sonner/+page.svelte
+++ b/src/routes/sonner/+page.svelte
@@ -4,11 +4,11 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Sonner, {
     defaultDir,
     defaultPosition,
@@ -49,285 +49,285 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeButton" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close button</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeButton}" />
-    </Form.Control>
-
-    <Form.Description>Adds a close button to all toasts, shows on hover.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="dir" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Direction</Form.Label>
-
-      <Select.Root
-        items="{dirs.map((dir) => ({
-          label: dir,
-          value: dir,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.dir = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.dir !== undefined
-          ? {
-              label: $superFormData.dir,
-              value: $superFormData.dir,
-            }
-          : undefined}"
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeButton" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close button</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeButton}" />
+          </Form.Control>
+
+          <Form.Description>Adds a close button to all toasts, shows on hover.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="dir" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Direction</Form.Label>
+
+            <Select.Root
+              items="{dirs.map((dir) => ({
+                label: dir,
+                value: dir,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.dir = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.dir !== undefined
+                ? {
+                    label: $superFormData.dir,
+                    value: $superFormData.dir,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each dirs as dir, index (index)}
+                  <Select.Item value="{dir}">
+                    {dir}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>Directionality of toast's text.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="duration" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Duration</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              min="{100}"
+              step="{100}"
+              variant="number"
+              bind:value="{$superFormData.duration}"
+            />
+          </Form.Control>
+
+          <Form.Description>The duration of the toast in milliseconds.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="expand" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Expand</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.expand}" />
+          </Form.Control>
+
+          <Form.Description>Toasts will be expanded by default.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="gap" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Gap</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              min="{0}"
+              step="{1}"
+              variant="number"
+              bind:value="{$superFormData.gap}"
+            />
+          </Form.Control>
+
+          <Form.Description>Gap between toasts when expanded, in pixels.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="invert" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Invert</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.invert}" />
+          </Form.Control>
+
+          <Form.Description>Dark toasts in light mode and vice versa.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="offset" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Offset</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              min="{0}"
+              step="{1}"
+              variant="number"
+              bind:value="{$superFormData.offset}"
+            />
+          </Form.Control>
+
+          <Form.Description>Offset from the edges of the screen.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="position" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Position</Form.Label>
+
+            <Select.Root
+              items="{positions.map((position) => ({
+                label: position,
+                value: position,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.position = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.position !== undefined
+                ? {
+                    label: $superFormData.position,
+                    value: $superFormData.position,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each positions as position, index (index)}
+                  <Select.Item value="{position}">
+                    {position}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>Directionality of toast's text.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="richColors" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Rich colors</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.richColors}" />
+          </Form.Control>
+
+          <Form.Description>Makes error and success state more colorful.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="theme" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Theme</Form.Label>
+
+            <Select.Root
+              items="{themes.map((theme) => ({
+                label: theme,
+                value: theme,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.theme = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.theme !== undefined
+                ? {
+                    label: $superFormData.theme,
+                    value: $superFormData.theme,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each themes as theme, index (index)}
+                  <Select.Item value="{theme}">
+                    {theme}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>Toast's theme, either light, dark, or system.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="visibleToasts" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Visible toasts</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="numeric"
+              min="{1}"
+              step="{1}"
+              variant="number"
+              bind:value="{$superFormData.visibleToasts}"
+            />
+          </Form.Control>
+
+          <Form.Description>Amount of visible toasts.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Button
+        variant="outline"
+        on:click="{() =>
+          toast.success('Event has been created', {
+            description: 'Sunday, December 03, 2023 at 9:00 AM',
+            action: {
+              label: 'Undo',
+              onClick: () => console.info('Undo'),
+            },
+          })}"
       >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each dirs as dir, index (index)}
-            <Select.Item value="{dir}">
-              {dir}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>Directionality of toast's text.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="duration" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Duration</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        min="{100}"
-        step="{100}"
-        variant="number"
-        bind:value="{$superFormData.duration}"
-      />
-    </Form.Control>
-
-    <Form.Description>The duration of the toast in milliseconds.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="expand" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Expand</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.expand}" />
-    </Form.Control>
-
-    <Form.Description>Toasts will be expanded by default.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="gap" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Gap</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        min="{0}"
-        step="{1}"
-        variant="number"
-        bind:value="{$superFormData.gap}"
-      />
-    </Form.Control>
-
-    <Form.Description>Gap between toasts when expanded, in pixels.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="invert" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Invert</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.invert}" />
-    </Form.Control>
-
-    <Form.Description>Dark toasts in light mode and vice versa.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="offset" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Offset</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        min="{0}"
-        step="{1}"
-        variant="number"
-        bind:value="{$superFormData.offset}"
-      />
-    </Form.Control>
-
-    <Form.Description>Offset from the edges of the screen.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="position" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Position</Form.Label>
-
-      <Select.Root
-        items="{positions.map((position) => ({
-          label: position,
-          value: position,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.position = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.position !== undefined
-          ? {
-              label: $superFormData.position,
-              value: $superFormData.position,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each positions as position, index (index)}
-            <Select.Item value="{position}">
-              {position}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>Directionality of toast's text.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="richColors" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Rich colors</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.richColors}" />
-    </Form.Control>
-
-    <Form.Description>Makes error and success state more colorful.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="theme" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Theme</Form.Label>
-
-      <Select.Root
-        items="{themes.map((theme) => ({
-          label: theme,
-          value: theme,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.theme = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.theme !== undefined
-          ? {
-              label: $superFormData.theme,
-              value: $superFormData.theme,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each themes as theme, index (index)}
-            <Select.Item value="{theme}">
-              {theme}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>Toast's theme, either light, dark, or system.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="visibleToasts" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Visible toasts</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="numeric"
-        min="{1}"
-        step="{1}"
-        variant="number"
-        bind:value="{$superFormData.visibleToasts}"
-      />
-    </Form.Control>
-
-    <Form.Description>Amount of visible toasts.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Button
-  variant="outline"
-  on:click="{() =>
-    toast.success('Event has been created', {
-      description: 'Sunday, December 03, 2023 at 9:00 AM',
-      action: {
-        label: 'Undo',
-        onClick: () => console.info('Undo'),
-      },
-    })}"
->
-  Show Toast
-</Button>
-
-<Separator />
-
-<Sonner
-  closeButton="{$superFormData.closeButton}"
-  dir="{$superFormData.dir}"
-  duration="{$superFormData.duration}"
-  expand="{$superFormData.expand}"
-  gap="{$superFormData.gap}"
-  invert="{$superFormData.invert}"
-  offset="{$superFormData.offset}"
-  position="{$superFormData.position}"
-  richColors="{$superFormData.richColors}"
-  theme="{$superFormData.theme}"
-  visibleToasts="{$superFormData.visibleToasts}"
-/>
+        Show Toast
+      </Button>
+
+      <Sonner {...$superFormData} />
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/switch/+page.svelte b/src/routes/switch/+page.svelte
index 0664062..60acea2 100644
--- a/src/routes/switch/+page.svelte
+++ b/src/routes/switch/+page.svelte
@@ -3,8 +3,8 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
 
   const adapter = zod(
@@ -28,34 +28,46 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="checked" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Checked</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.checked}" />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="checked" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Checked</Form.Label>
 
-    <Form.Description>The checked state of the switch.</Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.checked}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>The checked state of the switch.</Form.Description>
 
-  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disabled</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
-    </Form.Control>
+        <Form.Field name="disabled" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
 
-    <Form.Description>
-      When <code>true</code>, prevents the user from interacting with the switch.
-    </Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.Description>
+            When <code>true</code>, prevents the user from interacting with the switch.
+          </Form.Description>
 
-<Separator />
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-<Switch disabled="{$superFormData.disabled}" bind:checked="{$superFormData.checked}" />
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Switch {...$superFormData} bind:checked="{$superFormData.checked}" />
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/table/+page.svelte b/src/routes/table/+page.svelte
index b78ffe4..607ab47 100644
--- a/src/routes/table/+page.svelte
+++ b/src/routes/table/+page.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import Separator from '$lib/components/separator/index.js';
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Table from '$lib/components/table/index.js';
 
   const invoices = [
@@ -54,34 +54,46 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Separator />
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-<Table.Root>
-  <Table.Caption>A list of your recent invoices.</Table.Caption>
+    <Accordion.Content></Accordion.Content>
+  </Accordion.Item>
 
-  <Table.Header>
-    <Table.Row>
-      <Table.Head class="w-[100px]">Invoice</Table.Head>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-      <Table.Head>Status</Table.Head>
+    <Accordion.Content>
+      <Table.Root>
+        <Table.Caption>A list of your recent invoices.</Table.Caption>
 
-      <Table.Head>Method</Table.Head>
+        <Table.Header>
+          <Table.Row>
+            <Table.Head class="w-[100px]">Invoice</Table.Head>
 
-      <Table.Head class="text-right">Amount</Table.Head>
-    </Table.Row>
-  </Table.Header>
+            <Table.Head>Status</Table.Head>
 
-  <Table.Body>
-    {#each invoices as invoice, index (index)}
-      <Table.Row>
-        <Table.Cell class="font-medium">{invoice.invoice}</Table.Cell>
+            <Table.Head>Method</Table.Head>
 
-        <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+            <Table.Head class="text-right">Amount</Table.Head>
+          </Table.Row>
+        </Table.Header>
 
-        <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+        <Table.Body>
+          {#each invoices as invoice, index (index)}
+            <Table.Row>
+              <Table.Cell class="font-medium">{invoice.invoice}</Table.Cell>
 
-        <Table.Cell class="text-right">{invoice.totalAmount}</Table.Cell>
-      </Table.Row>
-    {/each}
-  </Table.Body>
-</Table.Root>
+              <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+
+              <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+
+              <Table.Cell class="text-right">{invoice.totalAmount}</Table.Cell>
+            </Table.Row>
+          {/each}
+        </Table.Body>
+      </Table.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/tabs/+page.svelte b/src/routes/tabs/+page.svelte
index 9b180bc..e467d9f 100644
--- a/src/routes/tabs/+page.svelte
+++ b/src/routes/tabs/+page.svelte
@@ -3,13 +3,13 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Card from '$lib/components/card/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
   import Label from '$lib/components/label/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
   import * as Tabs from '$lib/components/tabs/index.js';
 
@@ -35,156 +35,163 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="activateOnFocus" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Activate on focus</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.activateOnFocus}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not the tabs should activate when the trigger is focused.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="loop" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Loop</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
-    </Form.Control>
-
-    <Form.Description>
-      Whether or not the tabs should loop around when the end is reached.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="orientation" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Orientation</Form.Label>
-
-      <Select.Root
-        items="{Tabs.rootOrientations.map((orientation) => ({
-          label: orientation,
-          value: orientation,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.orientation = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.orientation !== undefined
-          ? {
-              label: $superFormData.orientation,
-              value: $superFormData.orientation,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each Tabs.rootOrientations as orientation, index (index)}
-            <Select.Item value="{orientation}">
-              {orientation}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>
-      The orientation of the tabs, which determines how keyboard navigation works.
-    </Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Tabs.Root
-  activateOnFocus="{$superFormData.activateOnFocus}"
-  loop="{$superFormData.loop}"
-  orientation="{$superFormData.orientation}"
-  value="account"
->
-  <Tabs.List
-    class="
-      grid
-      {$superFormData.orientation === 'horizontal' ? 'grid-cols-2' : ''}
-      {$superFormData.orientation === 'vertical' ? 'h-auto grid-cols-1' : ''}
-    "
-  >
-    <Tabs.Trigger value="account">Account</Tabs.Trigger>
-
-    <Tabs.Trigger value="password">Password</Tabs.Trigger>
-  </Tabs.List>
-
-  <Tabs.Content value="account">
-    <Card.Root>
-      <Card.Header>
-        <Card.Title>Account</Card.Title>
-
-        <Card.Description>
-          Make changes to your account here. Click save when you're done.
-        </Card.Description>
-      </Card.Header>
-
-      <Card.Content class="space-y-2">
-        <div class="space-y-1">
-          <Label for="name">Name</Label>
-
-          <Input id="name" value="Pedro Duarte" variant="text" />
-        </div>
-
-        <div class="space-y-1">
-          <Label for="username">Username</Label>
-
-          <Input id="username" value="@peduarte" variant="text" />
-        </div>
-      </Card.Content>
-
-      <Card.Footer>
-        <Button>Save changes</Button>
-      </Card.Footer>
-    </Card.Root>
-  </Tabs.Content>
-
-  <Tabs.Content value="password">
-    <Card.Root>
-      <Card.Header>
-        <Card.Title>Password</Card.Title>
-
-        <Card.Description>
-          Change your password here. After saving, you'll be logged out.
-        </Card.Description>
-      </Card.Header>
-
-      <Card.Content class="space-y-2">
-        <div class="space-y-1">
-          <Label for="current">Current password</Label>
-
-          <Input id="current" type="password" variant="text" />
-        </div>
-
-        <div class="space-y-1">
-          <Label for="new">New password</Label>
-
-          <Input id="new" type="password" variant="text" />
-        </div>
-      </Card.Content>
-
-      <Card.Footer>
-        <Button>Save password</Button>
-      </Card.Footer>
-    </Card.Root>
-  </Tabs.Content>
-</Tabs.Root>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="activateOnFocus" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Activate on focus</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.activateOnFocus}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not the tabs should activate when the trigger is focused.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="loop" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Loop</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.loop}" />
+          </Form.Control>
+
+          <Form.Description>
+            Whether or not the tabs should loop around when the end is reached.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="orientation" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Orientation</Form.Label>
+
+            <Select.Root
+              items="{Tabs.rootOrientations.map((orientation) => ({
+                label: orientation,
+                value: orientation,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.orientation = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.orientation !== undefined
+                ? {
+                    label: $superFormData.orientation,
+                    value: $superFormData.orientation,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each Tabs.rootOrientations as orientation, index (index)}
+                  <Select.Item value="{orientation}">
+                    {orientation}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>
+            The orientation of the tabs, which determines how keyboard navigation works.
+          </Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Tabs.Root {...$superFormData} value="account">
+        <Tabs.List
+          class="
+            grid
+            {$superFormData.orientation === 'horizontal' ? 'grid-cols-2' : ''}
+            {$superFormData.orientation === 'vertical' ? 'h-auto grid-cols-1' : ''}
+          "
+        >
+          <Tabs.Trigger value="account">Account</Tabs.Trigger>
+
+          <Tabs.Trigger value="password">Password</Tabs.Trigger>
+        </Tabs.List>
+
+        <Tabs.Content value="account">
+          <Card.Root>
+            <Card.Header>
+              <Card.Title>Account</Card.Title>
+
+              <Card.Description>
+                Make changes to your account here. Click save when you're done.
+              </Card.Description>
+            </Card.Header>
+
+            <Card.Content class="space-y-2">
+              <div class="space-y-1">
+                <Label for="name">Name</Label>
+
+                <Input id="name" value="Pedro Duarte" variant="text" />
+              </div>
+
+              <div class="space-y-1">
+                <Label for="username">Username</Label>
+
+                <Input id="username" value="@peduarte" variant="text" />
+              </div>
+            </Card.Content>
+
+            <Card.Footer>
+              <Button>Save changes</Button>
+            </Card.Footer>
+          </Card.Root>
+        </Tabs.Content>
+
+        <Tabs.Content value="password">
+          <Card.Root>
+            <Card.Header>
+              <Card.Title>Password</Card.Title>
+
+              <Card.Description>
+                Change your password here. After saving, you'll be logged out.
+              </Card.Description>
+            </Card.Header>
+
+            <Card.Content class="space-y-2">
+              <div class="space-y-1">
+                <Label for="current">Current password</Label>
+
+                <Input id="current" type="password" variant="text" />
+              </div>
+
+              <div class="space-y-1">
+                <Label for="new">New password</Label>
+
+                <Input id="new" type="password" variant="text" />
+              </div>
+            </Card.Content>
+
+            <Card.Footer>
+              <Button>Save password</Button>
+            </Card.Footer>
+          </Card.Root>
+        </Tabs.Content>
+      </Tabs.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/textarea/+page.svelte b/src/routes/textarea/+page.svelte
index 4ec586d..99019b6 100644
--- a/src/routes/textarea/+page.svelte
+++ b/src/routes/textarea/+page.svelte
@@ -1,77 +1,136 @@
 <script context="module" lang="ts">
+  import { toast } from 'svelte-sonner';
   import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
+  import Button from '$lib/components/button/index.js';
   import * as Form from '$lib/components/form/index.js';
-  import Separator from '$lib/components/separator/index.js';
+  import Sonner from '$lib/components/sonner/index.js';
   import Switch from '$lib/components/switch/index.js';
   import Textarea from '$lib/components/textarea/index.js';
 
-  const adapter = zod(
+  const textareaAdapter = zod(
     z
       .object({
         disabled: z.boolean().default(false),
-        placeholder: z.string().default(''),
+        placeholder: z.string().default('Tell us a little bit about yourself'),
         readonly: z.boolean().default(false),
       })
       .partial(),
   );
+  const demoAdapter = zod(
+    z.object({
+      bio: z.string(),
+    }),
+  );
 </script>
 
 <script lang="ts">
-  const superForm = createSuperForm(defaults(adapter), {
+  const textareaSuperForm = createSuperForm(defaults(textareaAdapter), {
+    SPA: true,
+    validators: textareaAdapter,
+  });
+  const demoSuperForm = createSuperForm(defaults(demoAdapter), {
+    onUpdated: ({ form }) => {
+      if (form.valid) {
+        toast.info(`You submitted ${JSON.stringify(form.data, null, 2)}`);
+      } else {
+        toast.error('Please fix the errors in the form.');
+      }
+    },
     SPA: true,
-    validators: adapter,
+    validators: demoAdapter,
   });
-  const { form: superFormData } = superForm;
+  const { form: textareaSuperFormData } = textareaSuperForm;
+  const { form: demoSuperFormData } = demoSuperForm;
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="disabled" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disabled</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{textareaSuperForm}">
+        <Form.Field name="disabled" superForm="{textareaSuperForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disabled</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$textareaSuperFormData.disabled}" />
+          </Form.Control>
+
+          <Form.Description>Whether the textarea is disabled.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="placeholder" superForm="{textareaSuperForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Placeholder</Form.Label>
+
+            <Textarea
+              {...attrs}
+              {...constraints}
+              bind:value="{$textareaSuperFormData.placeholder}"
+            />
+          </Form.Control>
+
+          <Form.Description>The textarea placeholder.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disabled}" />
-    </Form.Control>
+        <Form.Field name="readonly" superForm="{textareaSuperForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Readonly</Form.Label>
 
-    <Form.Description>Whether the textarea is disabled.</Form.Description>
+            <Switch {...attrs} {...constraints} bind:checked="{$textareaSuperFormData.readonly}" />
+          </Form.Control>
 
-    <Form.FieldErrors />
-  </Form.Field>
+          <Form.Description>Whether the textarea is read-only.</Form.Description>
 
-  <Form.Field name="placeholder" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Placeholder</Form.Label>
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
 
-      <Textarea {...attrs} {...constraints} bind:value="{$superFormData.placeholder}" />
-    </Form.Control>
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
 
-    <Form.Description>The textarea placeholder.</Form.Description>
+    <Accordion.Content>
+      <Form.Root class="flex flex-col gap-y-2" debug superForm="{demoSuperForm}">
+        <Form.Field name="bio" superForm="{demoSuperForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Bio</Form.Label>
 
-    <Form.FieldErrors />
-  </Form.Field>
+            <Textarea
+              {...attrs}
+              {...constraints}
+              {...$textareaSuperFormData}
+              bind:value="{$demoSuperFormData.bio}"
+            />
+          </Form.Control>
 
-  <Form.Field name="readonly" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Readonly</Form.Label>
+          <Form.Description>
+            <span>You can</span>
 
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.readonly}" />
-    </Form.Control>
+            <code>@mention</code>
 
-    <Form.Description>Whether the textarea is read-only.</Form.Description>
+            <span>other users and organizations.</span>
+          </Form.Description>
 
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
+          <Form.FieldErrors />
+        </Form.Field>
 
-<Separator />
+        <Button class="w-full" type="submit">Submit</Button>
+      </Form.Root>
 
-<Textarea
-  disabled="{$superFormData.disabled}"
-  placeholder="{$superFormData.placeholder}"
-  readonly="{$superFormData.readonly}"
-/>
+      <Sonner closeButton duration="{10_000}" position="bottom-right" />
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/tooltip/+page.svelte b/src/routes/tooltip/+page.svelte
index 1ed6d15..9c4900e 100644
--- a/src/routes/tooltip/+page.svelte
+++ b/src/routes/tooltip/+page.svelte
@@ -3,10 +3,10 @@
   import { zod } from 'sveltekit-superforms/adapters';
   import z from 'zod';
 
+  import * as Accordion from '$lib/components/accordion/index.js';
   import Button from '$lib/components/button/index.js';
   import * as Form from '$lib/components/form/index.js';
   import Input from '$lib/components/input/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import Switch from '$lib/components/switch/index.js';
   import * as Tooltip from '$lib/components/tooltip/index.js';
 
@@ -35,109 +35,122 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="closeDelay" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close delay</Form.Label>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
 
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="decimal"
-        step="{0.05}"
-        variant="number"
-        bind:value="{$superFormData.closeDelay}"
-      />
-    </Form.Control>
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="closeDelay" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close delay</Form.Label>
 
-    <Form.Description>The tooltip close delay (in ms).</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on escape</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
-    </Form.Control>
-
-    <Form.Description>Whether to close the tooltip on escape.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="closeOnPointerDown" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Close on pointer down</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnPointerDown}" />
-    </Form.Control>
-
-    <Form.Description>Whether to close the tooltip on pointer down.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="disableHoverableContent" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Disable hoverable content</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.disableHoverableContent}" />
-    </Form.Control>
-
-    <Form.Description>Whether to disbale the hoverable content.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="open" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open</Form.Label>
-
-      <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
-    </Form.Control>
-
-    <Form.Description>Whether to open the tooltip.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-
-  <Form.Field name="openDelay" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Open delay</Form.Label>
-
-      <Input
-        {...attrs}
-        {...constraints}
-        inputmode="decimal"
-        step="{0.05}"
-        variant="number"
-        bind:value="{$superFormData.openDelay}"
-      />
-    </Form.Control>
-
-    <Form.Description>The tooltip open delay (in ms).</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<Tooltip.Root
-  closeDelay="{$superFormData.closeDelay}"
-  closeOnEscape="{$superFormData.closeOnEscape}"
-  closeOnPointerDown="{$superFormData.closeOnPointerDown}"
-  disableHoverableContent="{$superFormData.disableHoverableContent}"
-  openDelay="{$superFormData.openDelay}"
-  bind:open="{$superFormData.open}"
->
-  <Tooltip.Trigger asChild let:builder>
-    <Button builders="{[builder]}" variant="outline">Hover</Button>
-  </Tooltip.Trigger>
-
-  <Tooltip.Content>
-    <p>Add to library</p>
-  </Tooltip.Content>
-</Tooltip.Root>
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="decimal"
+              step="{0.05}"
+              variant="number"
+              bind:value="{$superFormData.closeDelay}"
+            />
+          </Form.Control>
+
+          <Form.Description>The tooltip close delay (in ms).</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnEscape" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on escape</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.closeOnEscape}" />
+          </Form.Control>
+
+          <Form.Description>Whether to close the tooltip on escape.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="closeOnPointerDown" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Close on pointer down</Form.Label>
+
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.closeOnPointerDown}"
+            />
+          </Form.Control>
+
+          <Form.Description>Whether to close the tooltip on pointer down.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="disableHoverableContent" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Disable hoverable content</Form.Label>
+
+            <Switch
+              {...attrs}
+              {...constraints}
+              bind:checked="{$superFormData.disableHoverableContent}"
+            />
+          </Form.Control>
+
+          <Form.Description>Whether to disbale the hoverable content.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="open" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open</Form.Label>
+
+            <Switch {...attrs} {...constraints} bind:checked="{$superFormData.open}" />
+          </Form.Control>
+
+          <Form.Description>Whether to open the tooltip.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+
+        <Form.Field name="openDelay" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Open delay</Form.Label>
+
+            <Input
+              {...attrs}
+              {...constraints}
+              inputmode="decimal"
+              step="{0.05}"
+              variant="number"
+              bind:value="{$superFormData.openDelay}"
+            />
+          </Form.Control>
+
+          <Form.Description>The tooltip open delay (in ms).</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Tooltip.Root {...$superFormData} bind:open="{$superFormData.open}">
+        <Tooltip.Trigger asChild let:builder>
+          <Button builders="{[builder]}" variant="outline">Hover</Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content>
+          <p>Add to library</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/src/routes/top-navigation/+page.svelte b/src/routes/top-navigation/+page.svelte
index 2f35388..8e9957b 100644
--- a/src/routes/top-navigation/+page.svelte
+++ b/src/routes/top-navigation/+page.svelte
@@ -4,9 +4,9 @@
   import z from 'zod';
 
   import { afterNavigate } from '$app/navigation';
+  import * as Accordion from '$lib/components/accordion/index.js';
   import * as Form from '$lib/components/form/index.js';
   import * as Select from '$lib/components/select/index.js';
-  import Separator from '$lib/components/separator/index.js';
   import * as TopNavigation from '$lib/components/top-navigation/index.js';
 
   const adapter = zod(
@@ -40,57 +40,67 @@
 <!-- <style lang="postcss">
 </style> -->
 
-<Form.Root superForm="{superForm}">
-  <Form.Field name="breakpoint" superForm="{superForm}" let:constraints>
-    <Form.Control let:attrs>
-      <Form.Label>Breakpoint</Form.Label>
-
-      <Select.Root
-        items="{TopNavigation.breakpoints.map((breakpoint) => ({
-          label: breakpoint,
-          value: breakpoint,
-        }))}"
-        onSelectedChange="{(selected) => {
-          $superFormData.breakpoint = selected?.value;
-        }}"
-        portal="{null}"
-        selected="{$superFormData.breakpoint !== undefined
-          ? {
-              label: $superFormData.breakpoint,
-              value: $superFormData.breakpoint,
-            }
-          : undefined}"
-      >
-        <Select.Input {...attrs} {...constraints} />
-
-        <Select.Trigger>
-          <Select.Value />
-        </Select.Trigger>
-
-        <Select.Content>
-          {#each TopNavigation.breakpoints as breakpoint, index (index)}
-            <Select.Item value="{breakpoint}">
-              {breakpoint}
-            </Select.Item>
-          {/each}
-        </Select.Content>
-      </Select.Root>
-    </Form.Control>
-
-    <Form.Description>The breakpoint of the navigation.</Form.Description>
-
-    <Form.FieldErrors />
-  </Form.Field>
-</Form.Root>
-
-<Separator />
-
-<TopNavigation.Root breakpoint="{$superFormData.breakpoint}" bind:open="{open}">
-  <TopNavigation.Section breakpoint="{$superFormData.breakpoint}">
-    <TopNavigation.Button breakpoint="{$superFormData.breakpoint}">Button</TopNavigation.Button>
-
-    <TopNavigation.Link breakpoint="{$superFormData.breakpoint}" href="https://www.example.com/">
-      Link
-    </TopNavigation.Link>
-  </TopNavigation.Section>
-</TopNavigation.Root>
+<Accordion.Root multiple value="{['demo']}">
+  <Accordion.Item value="config">
+    <Accordion.Trigger>Config</Accordion.Trigger>
+
+    <Accordion.Content>
+      <Form.Root superForm="{superForm}">
+        <Form.Field name="breakpoint" superForm="{superForm}" let:constraints>
+          <Form.Control let:attrs>
+            <Form.Label>Breakpoint</Form.Label>
+
+            <Select.Root
+              items="{TopNavigation.breakpoints.map((breakpoint) => ({
+                label: breakpoint,
+                value: breakpoint,
+              }))}"
+              onSelectedChange="{(selected) => {
+                $superFormData.breakpoint = selected?.value;
+              }}"
+              portal="{null}"
+              selected="{$superFormData.breakpoint !== undefined
+                ? {
+                    label: $superFormData.breakpoint,
+                    value: $superFormData.breakpoint,
+                  }
+                : undefined}"
+            >
+              <Select.Input {...attrs} {...constraints} />
+
+              <Select.Trigger>
+                <Select.Value />
+              </Select.Trigger>
+
+              <Select.Content>
+                {#each TopNavigation.breakpoints as breakpoint, index (index)}
+                  <Select.Item value="{breakpoint}">
+                    {breakpoint}
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+          </Form.Control>
+
+          <Form.Description>The breakpoint of the navigation.</Form.Description>
+
+          <Form.FieldErrors />
+        </Form.Field>
+      </Form.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+
+  <Accordion.Item value="demo">
+    <Accordion.Trigger>Demo</Accordion.Trigger>
+
+    <Accordion.Content>
+      <TopNavigation.Root {...$superFormData} bind:open="{open}">
+        <TopNavigation.Section>
+          <TopNavigation.Button>Button</TopNavigation.Button>
+
+          <TopNavigation.Link href="https://www.example.com/">Link</TopNavigation.Link>
+        </TopNavigation.Section>
+      </TopNavigation.Root>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>