GlassSeparator

A glassmorphism-styled divider line powered by Radix UI, supporting horizontal and vertical orientations.

Preview

Components

Docs

Examples

Usage

import { GlassSeparator } from "koori-ui";
 
<GlassSeparator />

Vertical

<div className="flex h-8 items-center gap-4">
  <span>Item A</span>
  <GlassSeparator orientation="vertical" className="h-full" />
  <span>Item B</span>
</div>

In a Card

import { GlassCard, GlassSeparator, GlassText } from "koori-ui";
 
<GlassCard>
  <GlassText>Section one</GlassText>
  <GlassSeparator className="my-4" />
  <GlassText>Section two</GlassText>
</GlassCard>

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Line direction
`decorative`	`boolean`	`true`	When `true`, hides from the accessibility tree
`className`	`string`	—	Additional CSS classes

All Radix Separator.Root props are also accepted.

Preview

Usage

Vertical

In a Card

Props

On this page