Vehicle Details
Make: Toyota
Model: Camry
Year: 2024
Engine
Transmission
Drivetrain
Transmission
Drivetrain
Pricing
MSRP: $28,400
Dealer Price: $26,800
Your Price: $25,200
"use client"
import { Separator } from "@/components/ui/preskok-ui/separator"
export function SeparatorDemo() {
return (
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold">Vehicle Details</h3>
<Separator className="my-4" />
<div className="space-y-2">
<p>Make: Toyota</p>
<p>Model: Camry</p>
<p>Year: 2024</p>
</div>
</div>
<div className="flex items-center space-x-4">
<span>Engine</span>
<Separator orientation="vertical" className="h-4" />
<span>Transmission</span>
<Separator orientation="vertical" className="h-4" />
<span>Drivetrain</span>
</div>
<div>
<h3 className="text-lg font-semibold">Pricing</h3>
<Separator className="my-4" />
<div className="space-y-2">
<p>MSRP: $28,400</p>
<p>Dealer Price: $26,800</p>
<p>Your Price: $25,200</p>
</div>
</div>
</div>
)
}
Installation
CLI
Manual
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add separator
Usage
import { Separator } from "@/registry/preskok/ui/preskok-ui/separator"
export function SeparatorDemo() {
return (
<div>
<div>Header</div>
<Separator />
<div>Content</div>
</div>
)
}