Glass Separator

A divider line tuned for glass UI surfaces.

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices

import { GlassSeparator } from "@/components/ui/glasscn/glass-separator"

export function SeparatorDemo() {
  return <GlassSeparator glassVariant="liquid-bold" />

Installation

$ npx shadcn add @glasscn/glass-separator

API

Prop

Type

Default

Description

GlassSeparatorglassVariant

"clear" | "frosted" | "subtle" | "liquid" | "liquid-bold""clear"

Controls the glass surface treatment.

GlassSeparator...props

React.ComponentProps<typeof Separator>-

Props from the underlying shadcn/ui primitive.

Variants

clear

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices

frosted

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices

subtle

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices

liquid

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices

liquid-bold

Profile

Manage your account details

Notifications

Configure alerts and emails

Privacy

Control visibility and data

Billing

View plans and invoices