Separator

1'use client'
2
3import { Separator } from '@/components/ui/separator'
4
5export function SeparatorDemo() {
6    return (
7        <div className="space-y-6">
8            <div>
9                <div className="space-y-1">
10                    <h4 className="text-sm leading-none font-medium">
11                        User Information
12                    </h4>
13                    <p className="text-gray text-sm">
14                        Basic details about the user account.
15                    </p>
16                </div>
17                <Separator className="my-4" />
18                <div className="space-y-1 text-sm">
19                    <div className="font-medium">Rafael costa</div>
20                    <div className="text-muted-foreground">
21                        rafael.costa@example.com
22                    </div>
23                </div>
24            </div>
25
26            <Separator className="my-4" />
27
28            <div className="flex h-5 items-center space-x-4 text-sm">
29                <div>Overview</div>
30                <Separator orientation="vertical" />
31                <div>Projects</div>
32                <Separator orientation="vertical" />
33                <div>Team</div>
34                <Separator orientation="vertical" />
35                <div>Settings</div>
36            </div>
37        </div>
38    )
39}
40

1import { Separator } from '@/components/ui/separator'
2
3export function CustomSeparatorDemo() {
4    return (
5        <div className="space-y-6">
6            <div className="space-y-2 ">
7                <h4 className="text-sm text-primary font-medium">Gradient Separator</h4>
8                <p className="text-gray text-sm">
9                    A separator with a custom gradient and thickness.
10                </p>
11                <Separator className="from-primary via-secondary to-warning data-[orientation=horizontal]:h-0.5 rounded-full bg-gradient-to-r" />
12            </div>
13
14            <div className="flex items-center text-primary font-medium space-x-4 text-sm">
15                <span>Overview</span>
16                <Separator
17                    orientation="vertical"
18                    className="from-secondary to-warning data-[orientation=vertical]:h-5 data-[orientation=vertical]:w-0.5 rounded-full bg-gradient-to-b"
19                />
20                <span>Details</span>
21                <Separator
22                    orientation="vertical"
23                    className="from-secondary to-warning data-[orientation=vertical]:h-5 data-[orientation=vertical]:w-0.5 rounded-full bg-gradient-to-b"
24                />
25                <span>Settings</span>
26            </div>
27        </div>
28    )
29}
30