CLI previewInstall commands shown on this site are not released yet.

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/separator
bash
npx grassroot@latest add ui/separator
bash
yarn dlx grassroot add ui/separator
bash
bunx grassroot add ui/separator

API Reference

SeparatorProps
PropTypeDefault
orientation"horizontal" | "vertical" | undefined"horizontal"
labelCentered mono caption (horizontal only).React.ReactNode