Components
Separator
A horizontal or vertical divider, wrapping Morphos's Separator primitive.
Installation
npx kosmesis add separatorpnpm dlx kosmesis add separatoryarn dlx kosmesis add separatorbunx kosmesis add separatorInstall the following dependencies:
npm install @morphos/layoutpnpm add @morphos/layoutyarn add @morphos/layoutbun add @morphos/layoutCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import { Separator as MorphosSeparator, type SeparatorProps as MorphosSeparatorProps } from "@morphos/layout";import { cn } from "@/lib/utils";export type SeparatorProps = MorphosSeparatorProps;@Component()export class Separator extends StatelessComponent<SeparatorProps> { render() { const { class: cls, ...rest } = this.props; return ( <MorphosSeparator class={cn( "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", cls, )} {...rest} /> ); }}Install the following dependencies:
npm install @morphos/layout @praxisjs/csspnpm add @morphos/layout @praxisjs/cssyarn add @morphos/layout @praxisjs/cssbun add @morphos/layout @praxisjs/cssCopy and paste the following code into your project.
import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled, tokenVars } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import { Separator as MorphosSeparator, type SeparatorProps as MorphosSeparatorProps } from "@morphos/layout";import { KosmesisTokens } from "@/lib/kosmesis-theme";const t = tokenVars(KosmesisTokens);class SeparatorStyles extends Stylesheet { $root = this.css({ flexShrink: 0, backgroundColor: t.border }) .on('&[data-orientation="horizontal"]', { height: "1px", width: "100%" }) .on('&[data-orientation="vertical"]', { height: "100%", width: "1px" });}export type SeparatorProps = MorphosSeparatorProps;@Component()export class Separator extends StatelessComponent<SeparatorProps> { @Styled(SeparatorStyles) $s!: SeparatorStyles; render() { const { class: cls, ...rest } = this.props; return <MorphosSeparator class={cx(this.$s.$root, cls)} {...rest} />; }}Examples
Usage
import { Separator } from "@/components/ui/separator";
<div>
<p>Above</p>
<Separator class="my-4" />
<p>Below</p>
</div>
<div class="flex h-5 items-center">
<span>Item</span>
<Separator orientation="vertical" class="mx-2" />
<span>Item</span>
</div>Props
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
decorative | boolean | false — when true, renders aria-hidden instead of role="separator" |