DocsComponentsPrimitives
Separator
React example follows below.
ts
import { Separator } from "@grassroot/ui-react"; <Separator className="my-3" /> <Separator orientation="vertical" /> <Separator label="Section 02" />ts
<script setup lang="ts">import { Separator } from "@grassroot/ui-vue";</script> <template> <Separator class-name="my-3" /> <Separator orientation="vertical" /> <Separator label="Section 02" /></template>ts
import { Component } from "@angular/core";import { GrassrootSeparator } from "@grassroot/ui-angular"; @Component({ selector: "app-example", standalone: true, imports: [GrassrootSeparator], template: ` <grassroot-separator className="my-3" /> <grassroot-separator orientation="vertical" /> <grassroot-separator label="Section 02" /> `,})export class ExampleComponent {}ts
<script lang="ts"> import { Separator } from "@grassroot/ui-svelte";</script> <Separator className="my-3" /><Separator orientation="vertical" /><Separator label="Section 02" />ts
import { Separator } from "@grassroot/ui-solid"; export function Example() { return ( <> <Separator className="my-3" /> <Separator orientation="vertical" /> <Separator label="Section 02" /> </> );}Installation
bash
pnpm dlx grassroot add ui/separatorbash
npx grassroot@latest add ui/separatorbash
yarn dlx grassroot add ui/separatorbash
bunx grassroot add ui/separatorAPI Reference
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | undefined | "horizontal" |
labelCentered mono caption (horizontal only). | React.ReactNode | — |