Bits UI Primitives
An open-source UI component library.
Blog
Docs
Source
<script lang="ts">
import { Separator } from "$lib/components/ui/separator/index.js";
</script>
<div>
<div class="space-y-1">
<h4 class="text-sm leading-none font-medium">Bits UI Primitives</h4>
<p class="text-muted-foreground text-sm">
An open-source UI component library.
</p>
</div>
<Separator class="my-4" />
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
</div>
</div>Installation
pnpm dlx shadcn-svelte@latest add separatorInstall bits-ui:
pnpm add bits-ui -DCopy and paste the following code into your project.
import Root from './separator.svelte';
export {
Root,
//
Root as Separator
};
<script lang="ts">
import { Separator as SeparatorPrimitive } from 'bits-ui';
import { cn } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
'data-slot': dataSlot = 'separator',
...restProps
}: SeparatorPrimitive.RootProps = $props();
</script>
<SeparatorPrimitive.Root
bind:ref
data-slot={dataSlot}
class={cn(
'bg-zinc-800 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
// this is different in shadcn/ui but self-stretch breaks things for us
'data-[orientation=vertical]:h-full',
className
)}
{...restProps}
/>
Usage
<script lang="ts">
import { Separator } from '$lib/components/ui/separator/index.js';
</script><Separator />