Lorem Ipsum

import { H1 } from "@/components/ui/typography"

<H1>Lorem Ipsum</H1>

import { H2 } from "@/components/ui/typography"

<H2>Lorem Ipsum</H2>

import { H3 } from "@/components/ui/typography"

<H3>Lorem Ipsum</H3>

import { H4 } from "@/components/ui/typography"

<H4>Lorem Ipsum</H4>

import { H5 } from "@/components/ui/typography"

<H5>Lorem Ipsum</H5>

import { H6 } from "@/components/ui/typography"

<H6>Lorem Ipsum</H6>

import { P } from "@/components/ui/typography"

<P>Lorem Ipsum</P>

import { List, ListItem } from "@/components/ui/typography"

<List variant="unordered">
	<ListItem>Item 1</ListItem>
</List>

import { List, ListItem } from "@/components/ui/typography"

<List variant="ordered">
	<ListItem>Item 1</ListItem>
</List>

import { Blockquote } from "@/components/ui/typography"

<Blockquote>Lorem Ipsum</Blockquote>

import { Caption } from "@/components/ui/typography"

<Caption>Photo by...</Caption>

import { Badge } from "@/components/ui/badge"

<div className="flex w-full flex-wrap justify-center gap-2">
	<Badge>Badge</Badge>
	<Badge variant="secondary">Secondary</Badge>
	<Badge variant="destructive">Destructive</Badge>
	<Badge variant="outline">Outline</Badge>
</div>

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

<Avatar>
	<AvatarImage src="https://github.com/shadcn.png" />
	<AvatarFallback>CN</AvatarFallback>
</Avatar>

import Link from "next/link"
import { Button } from "@/components/ui/button"

<Button variant="link" nativeButton={false} render={<Link href="#" />}>
	View Documentation
</Button>

import { Button } from "@/components/ui/button"

<div className="flex w-full flex-wrap justify-center gap-2">
	<Button>Default</Button>
	<Button variant="secondary">Secondary</Button>
	<Button variant="outline">Outline</Button>
	<Button variant="destructive">Destructive</Button>
</div>

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

<DropdownMenu>
	<DropdownMenuTrigger render={<Button variant="outline" />}>Open Menu</DropdownMenuTrigger>
	<DropdownMenuContent>
		<DropdownMenuGroup>
			<DropdownMenuLabel>My Account</DropdownMenuLabel>
			<DropdownMenuSeparator />
			<DropdownMenuItem>Profile</DropdownMenuItem>
			<DropdownMenuItem>Settings</DropdownMenuItem>
			<DropdownMenuItem>Billing</DropdownMenuItem>
		</DropdownMenuGroup>
	</DropdownMenuContent>
</DropdownMenu>

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="starter">
	<Label><RadioGroupItem value="starter" />Starter</Label>
	<Label><RadioGroupItem value="pro" />Pro</Label>
</RadioGroup>

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<Field>
	<FieldLabel htmlFor="email-demo">Email</FieldLabel>
	<Input id="email-demo" type="email" placeholder="name@example.com" />
	<FieldDescription>
		We will never share your email.
	</FieldDescription>
</Field>

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"

<Select defaultValue="starter">
	<SelectTrigger className="w-full max-w-xs">
		<SelectValue placeholder="Choose a plan" />
	</SelectTrigger>
	<SelectContent>
		<SelectGroup>
			<SelectLabel>Plans</SelectLabel>
			<SelectItem value="starter">Starter</SelectItem>
			<SelectItem value="pro">Pro</SelectItem>
			<SelectItem value="enterprise">Enterprise</SelectItem>
		</SelectGroup>
	</SelectContent>
</Select>

import { Textarea } from "@/components/ui/textarea"

<Textarea placeholder="Type your message here." />

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

<div className="flex items-center gap-3">
	<Checkbox id="terms" defaultChecked />
	<Label htmlFor="terms">Accept terms and conditions</Label>
</div>

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

<Tabs defaultValue="overview">
	<TabsList>
		<TabsTrigger value="overview">Overview</TabsTrigger>
		<TabsTrigger value="analytics">Analytics</TabsTrigger>
	</TabsList>
	<TabsContent value="overview">Overview content.</TabsContent>
	<TabsContent value="analytics">Analytics content.</TabsContent>
</Tabs>

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/navigation-menu"

<NavigationMenu>
	<NavigationMenuList>
		<NavigationMenuItem>
			<NavigationMenuTrigger>Overview</NavigationMenuTrigger>
			<NavigationMenuContent>
				<NavigationMenuLink href="#">Brand overview</NavigationMenuLink>
			</NavigationMenuContent>
		</NavigationMenuItem>
	</NavigationMenuList>
</NavigationMenu>

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

<Accordion>
	<AccordionItem value="item-1">
		<AccordionTrigger>Is it accessible?</AccordionTrigger>
		<AccordionContent>Yes. It follows WAI-ARIA patterns.</AccordionContent>
	</AccordionItem>
</Accordion>

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[40]} max={100} step={1} />

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

<Dialog>
	<DialogTrigger render={<Button variant="outline" />}>Open Modal</DialogTrigger>
	<DialogContent>
		<DialogHeader>
			<DialogTitle>Edit profile</DialogTitle>
			<DialogDescription>Make changes to your profile and save when done.</DialogDescription>
		</DialogHeader>
	</DialogContent>
</Dialog>

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

<Breadcrumb>
	<BreadcrumbList>
		<BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem>
		<BreadcrumbSeparator />
		<BreadcrumbItem><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem>
		<BreadcrumbSeparator />
		<BreadcrumbItem><BreadcrumbPage>Gallery</BreadcrumbPage></BreadcrumbItem>
	</BreadcrumbList>
</Breadcrumb>

import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"

<Pagination>
	<PaginationContent>
		<PaginationItem><PaginationPrevious href="#" /></PaginationItem>
		<PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
		<PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
		<PaginationItem><PaginationEllipsis /></PaginationItem>
		<PaginationItem><PaginationNext href="#" /></PaginationItem>
	</PaginationContent>
</Pagination>

import { Input } from "@/components/ui/input"

<Input type="file" />

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

<Carousel opts={{ align: "start", loop: true }} className="mx-auto w-full">
	<CarouselContent>
		{Array.from({ length: 4 }).map((_, index) => (
			<CarouselItem key={`single-view-slide-${index + 1}`} className="basis-full">
				<div className="rounded-lg border bg-white p-6 text-center text-sm">Slide {index + 1}</div>
			</CarouselItem>
		))}
	</CarouselContent>
	<CarouselPrevious className="left-2" />
	<CarouselNext className="right-2" />
</Carousel>

import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

<Carousel opts={{ align: "start", loop: true }} className="mx-auto w-full">
	<CarouselContent>
		{Array.from({ length: 8 }).map((_, index) => (
			<CarouselItem key={`slide-${index + 1}`} className="basis-full md:basis-1/2 lg:basis-1/4">
				<div className="rounded-lg border bg-white p-6 text-center text-sm">Slide {index + 1}</div>
			</CarouselItem>
		))}
	</CarouselContent>
	<CarouselPrevious className="left-2" />
	<CarouselNext className="right-2" />
</Carousel>

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

<Table>
	<TableCaption>A list of your recent invoices.</TableCaption>
	<TableHeader>
		<TableRow>
			<TableHead className="w-[100px]">Invoice</TableHead>
			<TableHead>Status</TableHead>
			<TableHead>Method</TableHead>
			<TableHead className="text-right">Amount</TableHead>
		</TableRow>
	</TableHeader>
	<TableBody>
		<TableRow>
			<TableCell className="font-medium">INV001</TableCell>
			<TableCell>Paid</TableCell>
			<TableCell>Credit Card</TableCell>
			<TableCell className="text-right">$250.00</TableCell>
		</TableRow>
	</TableBody>
</Table>

World Piece

Diane Fine

26" x 26"

$1400 buy — $70 try

Blue Drift

L. Ortega

20" x 20"

$900 buy — $45 try

import { ArtworkCard } from "@/components/ui/widget"

const picks = [...artworks].sort(() => Math.random() - 0.5).slice(0, 2)

<div className="flex flex-wrap gap-4">
	{picks.map((artwork) => (
		<ArtworkCard
			key={artwork.title}
			imageSrc={artwork.imageSrc}
			imageAlt={artwork.imageAlt}
			title={artwork.title}
			artist={artwork.artist}
			dimensions={artwork.dimensions}
			priceLine={artwork.priceLine}
			className="max-w-sm"
		/>
	))}
</div>