# Separator

Semantic or decorative divider in either orientation.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add separator
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Separator

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| id | string \| undefined | - | No | No | Id of the element. |
| style | string \| StyleProperties \| null \| undefined | - | No | No | Inline styles for the element. |
| orientation | Orientation \| undefined | 'horizontal' | No | No | The orientation of the separator. |
| decorative | boolean \| undefined | - | No | No | Whether the separator is decorative and should be hidden from assistive technologies. |
| element | HTMLDivElement \| null \| undefined | null | No | Yes | Bindable reference to the DOM element. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Separator as Primitive } from 'bits-ui';
import Separator from './separator.svelte';
export type SeparatorProps = Omit<Primitive.RootProps, 'child' | 'children' | 'ref'> & {
    /** Bindable reference to the DOM element. */
    element?: HTMLDivElement | null;
};
export { Separator };
export default Separator;
~~~~

## Examples

### Both Orientations

~~~~svelte
<script lang="ts">
    import { Separator } from '@mielui/svelte/components/separator';
</script>

<div class="flex w-full max-w-xs flex-col gap-4 text-sm">
    <p>Workspace</p>
    <Separator />
    <div class="flex h-5 items-center gap-4">
        <span>Projects</span>
        <Separator orientation="vertical" decorative />
        <span>Members</span>
    </div>
</div>
~~~~

### Sections

~~~~svelte
<script lang="ts">
    import { Separator } from '@mielui/svelte/components/separator';
</script>

<div class="flex w-full max-w-xs flex-col gap-4 text-sm">
    <div>
        <p class="font-medium">Notifications</p>
        <p class="mt-1 text-foreground-muted">Choose which updates you receive.</p>
    </div>
    <Separator />
    <div>
        <p class="font-medium">Privacy</p>
        <p class="mt-1 text-foreground-muted">Manage who can see your activity.</p>
    </div>
</div>
~~~~

For the rendered reference, visit [/docs/components/separator](/docs/components/separator).