Docs
Separator
Separator
Visually or semantically separates content.
import { Separator } from "@repo/tailwindcss/default/separator";
const SeparatorDemo = () => {
return (
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">Kobalte UI</h4>
<p class="text-sm text-muted-foreground">
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>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
<Separator orientation="vertical" />
<div>Changelog</div>
</div>
</div>
);
};
export default SeparatorDemo;import { Separator } from "@repo/tailwindcss/solid/separator";
const SeparatorDemo = () => {
return (
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">Kobalte UI</h4>
<p class="text-sm text-muted-foreground">
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>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
<Separator orientation="vertical" />
<div>Changelog</div>
</div>
</div>
);
};
export default SeparatorDemo;Installation
npx shadcn-solid@latest add separatorInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import { Separator } from "@/components/ui/separator";<Separator />