Separator

1import { Fragment } from 'react';
2
3import { Separator } from '@/components/ui/separator';
4
5const navLinks = ['Docs', 'Components', 'Blog'] as const;
6
7export function Default() {
8  return (
9    <div className="w-full max-w-sm space-y-4">
10      <div>
11        <h4 className="text-sm font-medium">NachUI</h4>
12        <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
13      </div>
14      <Separator />
15      <div className="flex h-5 items-center gap-4 text-sm">
16        {navLinks.map((link, index) => (
17          <Fragment key={link}>
18            {index > 0 && <Separator orientation="vertical" />}
19            <span>{link}</span>
20          </Fragment>
21        ))}
22      </div>
23    </div>
24  );
25}

1import { Fragment } from 'react';
2
3import { Separator } from '@/components/ui/separator';
4
5const navLinks = ['Docs', 'Components', 'Blog'] as const;
6
7export function Default() {
8  return (
9    <div className="w-full max-w-sm space-y-4">
10      <div>
11        <h4 className="text-sm font-medium">NachUI</h4>
12        <p className="text-muted-foreground text-sm">An open-source UI component library.</p>
13      </div>
14      <Separator />
15      <div className="flex h-5 items-center gap-4 text-sm">
16        {navLinks.map((link, index) => (
17          <Fragment key={link}>
18            {index > 0 && <Separator orientation="vertical" />}
19            <span>{link}</span>
20          </Fragment>
21        ))}
22      </div>
23    </div>
24  );
25}

1import { Button } from '@/components/ui/button';
2import { Separator } from '@/components/ui/separator';
3
4export function WithLabel() {
5  return (
6    <div className="border-border bg-card w-full max-w-sm space-y-4 rounded-xl border p-6">
7      <div>
8        <h4 className="text-sm font-medium">Sign in to Acme Studio</h4>
9        <p className="text-muted-foreground text-sm">Use the account your team invited.</p>
10      </div>
11      <Button className="w-full">Continue with email</Button>
12      <Separator label="or continue with" />
13      <div className="grid grid-cols-2 gap-2">
14        <Button variant="outline">GitHub</Button>
15        <Button variant="outline">Google</Button>
16      </div>
17      <Separator />
18      <p className="text-muted-foreground text-xs">Single sign on is available on the Team plan.</p>
19    </div>
20  );
21}