Separator

A separator element accessible to screen readers.

Account Settings

Manage your account preferences

Profile

Update your photo and personal details

Security

Manage your password and authentication

import { Separator } from "@/components/ui/separator/separator";

export default function SeparatorDemo() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div>
        <h3 className="font-semibold text-lg">Account Settings</h3>
        <p className="text-muted-foreground text-sm">Manage your account preferences</p>
      </div>

      <Separator />

      <div className="space-y-2">
        <h4 className="font-medium text-sm">Profile</h4>
        <p className="text-muted-foreground text-sm">Update your photo and personal details</p>
      </div>

      <Separator />

      <div className="space-y-2">
        <h4 className="font-medium text-sm">Security</h4>
        <p className="text-muted-foreground text-sm">Manage your password and authentication</p>
      </div>
    </div>
  );
}

npx shadcn@latest add @roiui/separator

npx shadcn@latest add @roiui/separator-tailwind

<Separator />