Getting Started
Components
Text Animations
John Doe
john.doe@email.com
Profile
Billing
Security
"use client"
import * as React from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
export function SeparatorDemo() {
const settings = [
{ id: "profile", title: "Profile" },
{ id: "billing", title: "Billing" },
{ id: "security", title: "Security" },
]
return (
<div className="container mx-auto space-y-8 py-10">
<Card>
<CardContent className="space-y-6 p-6">
{/* Profile Section */}
<div>
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">Profile</h3>
<Button variant="outline" size="sm">
Edit
</Button>
</div>
<div className="space-y-4">
<div className="flex items-center space-x-3">
<Avatar className="h-10 w-10">
<AvatarImage src="/avatar.jpg" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<div className="space-y-0.5">
<p className="text-sm font-medium">John Doe</p>
<p className="text-muted-foreground text-sm">
john.doe@email.com
</p>
</div>
</div>
<Separator className="my-2" />
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label className="text-muted-foreground text-xs font-medium uppercase">
First name
</Label>
<Input defaultValue="John" />
</div>
<div className="space-y-2">
<Label className="text-muted-foreground text-xs font-medium uppercase">
Last name
</Label>
<Input defaultValue="Doe" />
</div>
</div>
</div>
</div>
{/* Section Divider */}
<Separator />
{/* Settings List */}
<div className="space-y-0">
{settings.map((setting, index) => (
<React.Fragment key={setting.id}>
<div className="flex items-center space-x-3 py-3">
<div className="bg-muted flex h-8 w-8 items-center justify-center rounded-md">
<span className="text-xs font-medium">
{setting.id.charAt(0).toUpperCase()}
</span>
</div>
<p className="text-sm font-medium">{setting.title}</p>
</div>
{index < settings.length - 1 && <Separator />}
</React.Fragment>
))}
</div>
</CardContent>
</Card>
</div>
)
}
pnpm dlx shadcn@latest add @ebonui/separator
import { Separator } from "@/components/ui/separator"<Separator />