Production-ready components for building high-quality, accessible user interfaces that follow your design system guidelines.
Explore our extensive library of ready-to-use components
<Select><SelectTrigger>Select option</SelectTrigger></Select>Variants:
<RadioGroup><RadioGroupItem value="option1" /></RadioGroup>Variants:
<Form><FormField>Form field</FormField></Form>Variants:
<Tabs><TabsList><TabsTrigger>Tab</TabsTrigger></TabsList></Tabs>Variants:
<NavigationMenu><NavigationMenuItem>Item</NavigationMenuItem></NavigationMenu>Variants:
<Breadcrumb><BreadcrumbItem>Home</BreadcrumbItem></Breadcrumb>Variants:
<Pagination><PaginationItem>1</PaginationItem></Pagination>Variants:
<Command><CommandInput>Search...</CommandInput></Command>Variants:
This is a sample card with some content.
<Card><CardContent>Card content</CardContent></Card>Variants:
<Accordion><AccordionItem>Item</AccordionItem></Accordion>Variants:
<Collapsible><CollapsibleContent>Content</CollapsibleContent></Collapsible>Variants:
<Alert><AlertTitle>Alert</AlertTitle></Alert>Variants:
<Toast><ToastTitle>Notification</ToastTitle></Toast>Variants:
<Dialog><DialogContent>Dialog content</DialogContent></Dialog>Variants:
| Header |
|---|
| Body |
<Table><TableHeader>Header</TableHeader><TableBody>Body</TableBody></Table>Variants:
| No results. |
<DataTable columns={columns} data={data} />Variants:
<Avatar><AvatarImage src="..." /></Avatar>Variants:
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
<Calendar mode="single" />Variants:
Our powerful data table component handles complex data sets with features like sorting, filtering, pagination, and row selection while maintaining accessibility.
import {
flexRender,
getCoreRowModel,
useReactTable,
getPaginationRowModel,
getSortedRowModel,
getFilteredRowModel,
} from "@tanstack/react-table"
// Table component with accessibility features
export function DataTable({
columns,
data,
searchKey,
}) {
const [sorting, setSorting] = useState([])
const [columnFilters, setColumnFilters] = useState([])
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
state: {
sorting,
columnFilters,
},
})
return (
<div>
{/* Search input */}
{/* Table with ARIA attributes */}
{/* Pagination controls */}
</div>
)
}Follow these best practices when implementing components in your application
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"Helpful tools to enhance your component development workflow
Additional resources to help you get the most out of our component library
Subscribe to our newsletter to receive updates about new components, best practices, and design system tips.