Separator

Shows a line between sections of content.

Account

Manage your profile and security.

Notifications

Choose which updates to receive.

separator-demo.tsx

import { Separator } from "@/components/vip-ui/separator";export function SeparatorDemo() {  return (    <div className="w-full max-w-sm rounded-lg bg-card p-4 text-sm ring-1 ring-border">      <p className="font-medium">Account</p>      <p className="mt-1 text-muted-foreground">        Manage your profile and security.      </p>      <Separator className="my-3" />      <p className="font-medium">Notifications</p>      <p className="mt-1 text-muted-foreground">        Choose which updates to receive.      </p>    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-separator.json

Vertical

Use it inside a flex row. The line takes the height of the row.

Profile

Security

Billing

separator-vertical-demo.tsx

import { Separator } from "@/components/vip-ui/separator";export function SeparatorVerticalDemo() {  return (    <div className="flex h-5 items-center gap-4 text-sm">      <span>Profile</span>      <Separator orientation="vertical" />      <span>Security</span>      <Separator orientation="vertical" />      <span>Billing</span>    </div>  );}

API reference

Separator takes the props of React Aria Separator (opens in a new tab).