@redrobui/react

React components for the Redrob AI Design System, built with Vite and Tailwind CSS.

🎨 Live Demo

View Interactive Component Demo →

Explore all components, variants, and design tokens in our interactive Storybook.

Installation

``bash
npm install @redrobui/react @redrobui/tailwind-config

or

yarn add @redrobui/react @redrobui/tailwind-config

or

pnpm add @redrobui/react @redrobui/tailwind-config
`

Setup

$3

Just import the pre-built CSS with all utilities included:

`css
/ src/index.css or src/App.css /
@import '@redrobui/tokens/utilities.css';
@import '@redrobui/react/styles.css';
`

That's it! All color classes and components are ready to use:
- bg-primary-600, text-primary-600, hover:bg-primary-700
- bg-secondary-600, bg-error-600, bg-success-600
- All component styles included

$3

If you want to customize or extend the design system:

1. Configure Tailwind CSS:

`js
// tailwind.config.js
const redrobConfig = require('@redrobui/tailwind-config');

module.exports = {
presets: [redrobConfig],
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/@redrobui/react/*/.{js,ts,jsx,tsx}',
],
};
`

2. Import styles:

`css
/ src/index.css or src/App.css /
@import '@redrobui/react/styles.css';
@import 'tailwindcss';
`

Components

$3

#### Button

Versatile button component with multiple variants and sizes.

`tsx
import { Button } from '@redrobui/react';

// Variants
Primary
Secondary
Outline
Ghost
Danger

// Sizes
Small
Medium
Large

// With icons
}>With Icon
}>With Icon

// States
Loading
Disabled
Full Width
`

#### Input

Text input component with label, helper text, and error states.

`tsx
import { Input } from '@redrobui/react';

label="Email"
placeholder="Enter email"
helperText="We'll never share your email"
error="This field is required"
size="md" // 'sm' | 'md' | 'lg'
disabled={false}
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
`

#### Textarea

Multi-line text input component.

`tsx
import { Textarea } from '@redrobui/react';

placeholder="Enter description..." <br /> className="min-h-[120px]" <br /> disabled={false} <br /> required={false} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Select <br /> <br />Dropdown select component with search and custom options. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import Select from '@redrobui/react/Select'; <br /> <br /><Select <br /> label="Country" <br /> placeholder="Select a country" <br /> options={[ <br /> { label: "United States", value: "us" }, <br /> { label: "Canada", value: "ca" }, <br /> { label: "Mexico", value: "mx", disabled: true }, <br /> ]} <br /> onChange={(option) => console.log(option)} <br /> error="Please select an option" <br /> helperText="Choose your country" <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Checkbox <br /> <br />Checkbox input with label support. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Checkbox } from '@redrobui/react'; <br />import { Label } from '@redrobui/react'; <br /> <br /><div className="flex items-center space-x-2"> <br /> <Checkbox id="terms" /> <br /> <Label htmlFor="terms">Accept terms and conditions</Label> <br /></div> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Radio <br /> <br />Radio button group component. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { RadioGroup, RadioGroupItem } from '@redrobui/react'; <br />import { Label } from '@redrobui/react'; <br /> <br /><RadioGroup defaultValue="option-1"> <br /> <div className="flex items-center space-x-2"> <br /> <RadioGroupItem value="option-1" id="option-1" /> <br /> <Label htmlFor="option-1">Option 1</Label> <br /> </div> <br /> <div className="flex items-center space-x-2"> <br /> <RadioGroupItem value="option-2" id="option-2" /> <br /> <Label htmlFor="option-2">Option 2</Label> <br /> </div> <br /></RadioGroup> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Switch <br /> <br />Toggle switch component with multiple sizes. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Switch } from '@redrobui/react'; <br />import { Label } from '@redrobui/react'; <br /> <br /><div className="flex items-center space-x-2"> <br /> <Switch id="airplane" size="default" /> // 'small' | 'medium' | 'default' <br /> <Label htmlFor="airplane">Airplane Mode</Label> <br /></div> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### Card <br /> <br />Container component for content grouping. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Card } from '@redrobui/react'; <br /> <br /><Card> <br /> <h2>Card Title</h2> <br /> <p>Card content goes here</p> <br /></Card> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Separator <br /> <br />Horizontal or vertical divider. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Separator } from '@redrobui/react'; <br /> <br /><Separator orientation="horizontal" /> <br /><Separator orientation="vertical" className="h-20" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Accordion <br /> <br />Collapsible content sections. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { <br /> Accordion, <br /> AccordionItem, <br /> AccordionTrigger, <br /> AccordionContent, <br />} from '@redrobui/react'; <br /> <br /><Accordion type="single" collapsible> <br /> <AccordionItem value="item-1"> <br /> <AccordionTrigger>Is it accessible?</AccordionTrigger> <br /> <AccordionContent> <br /> Yes. It adheres to the WAI-ARIA design pattern. <br /> </AccordionContent> <br /> </AccordionItem> <br /></Accordion> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Tabs <br /> <br />Tabbed navigation component. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Tabs } from '@redrobui/react'; <br /> <br /><Tabs <br /> tabs={[ <br /> { label: "Home", icon: <Icon /> }, <br /> { label: "Profile", badge: 3 }, <br /> { label: "Settings", disabled: true }, <br /> ]} <br /> activeTab={activeTab} <br /> onTabChange={(index) => setActiveTab(index)} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### Dialog / Modal <br /> <br />Modal dialog component. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { <br /> Dialog, <br /> DialogTrigger, <br /> DialogContent, <br /> DialogHeader, <br /> DialogFooter, <br /> DialogTitle, <br /> DialogDescription, <br />} from '@redrobui/react'; <br /> <br /><Dialog> <br /> <DialogTrigger asChild> <br /> <Button>Open Dialog</Button> <br /> </DialogTrigger> <br /> <DialogContent> <br /> <DialogHeader> <br /> <DialogTitle>Confirm Action</DialogTitle> <br /> <DialogDescription> <br /> Are you sure you want to continue? <br /> </DialogDescription> <br /> </DialogHeader> <br /> <DialogFooter> <br /> <Button variant="outline">Cancel</Button> <br /> <Button variant="primary">Confirm</Button> <br /> </DialogFooter> <br /> </DialogContent> <br /></Dialog> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Tooltip <br /> <br />Contextual information on hover. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Tooltip, TooltipTrigger, TooltipContent } from '@redrobui/react'; <br /> <br /><Tooltip> <br /> <TooltipTrigger asChild> <br /> <Button>Hover me</Button> <br /> </TooltipTrigger> <br /> <TooltipContent> <br /> <p>Helpful information</p> <br /> </TooltipContent> <br /></Tooltip> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Toast <br /> <br />Toast notification system. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { ToastProvider, useToast } from '@redrobui/react'; <br /> <br />// Wrap your app <br /><ToastProvider> <br /> <App /> <br /></ToastProvider> <br /> <br />// Use in components <br />const { toast } = useToast(); <br /> <br />toast({ <br /> title: "Success", <br /> description: "Your changes have been saved.", <br /> variant: "success", <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### Skeleton <br /> <br />Loading placeholder component. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Skeleton } from '@redrobui/react'; <br /> <br />// Different shapes <br /><Skeleton className="w-[200px] h-4" /> <br /><Skeleton className="w-12 h-12 rounded-full" /> <br /><Skeleton className="w-[300px] h-24" /> <br /> <br />// Card skeleton <br /><div className="space-y-3"> <br /> <Skeleton className="h-4 w-3/4" /> <br /> <Skeleton className="h-4 w-1/2" /> <br /> <Skeleton className="h-20 w-full" /> <br /></div> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Loader <br /> <br />Animated loading spinner. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Loader } from '@redrobui/react'; <br /> <br /><Loader /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### TextLoader <br /> <br />Text with loading animation. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import TextLoader from '@redrobui/react/TextLoader'; <br /> <br /><TextLoader text="Loading..." spinner={true} /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Tag <br /> <br />Status and label tags. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import Tag from '@redrobui/react/Tag'; <br /> <br /><Tag variant="completed" text="Done" /> <br /><Tag variant="pending" text="In Progress" /> <br /><Tag variant="declined" text="Rejected" /> <br /><Tag variant="draft" text="Draft" /> <br /><Tag variant="accepted" text="Approved" /> <br /><Tag variant="soon" text="Coming Soon" /> <br /> <br />// With icon <br /><Tag <br /> variant="completed" <br /> text="Done" <br /> startAdornment={<CheckIcon className="w-3 h-3" />} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### Breadcrumb <br /> <br />Hierarchical navigation trail. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { <br /> Breadcrumb, <br /> BreadcrumbList, <br /> BreadcrumbItem, <br /> BreadcrumbLink, <br /> BreadcrumbPage, <br /> BreadcrumbSeparator, <br />} from '@redrobui/react'; <br /> <br /><Breadcrumb> <br /> <BreadcrumbList> <br /> <BreadcrumbItem> <br /> <BreadcrumbLink href="/">Home</BreadcrumbLink> <br /> </BreadcrumbItem> <br /> <BreadcrumbSeparator /> <br /> <BreadcrumbItem> <br /> <BreadcrumbLink href="/docs">Docs</BreadcrumbLink> <br /> </BreadcrumbItem> <br /> <BreadcrumbSeparator /> <br /> <BreadcrumbItem> <br /> <BreadcrumbPage>Components</BreadcrumbPage> <br /> </BreadcrumbItem> <br /> </BreadcrumbList> <br /></Breadcrumb> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Pagination <br /> <br />Page navigation component. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Pagination } from '@redrobui/react'; <br /> <br /><Pagination <br /> currentPage={currentPage} <br /> totalPages={totalPages} <br /> onPageChange={(page) => setCurrentPage(page)} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### Avatar <br /> <br />User avatar with fallback. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Avatar, AvatarImage, AvatarFallback } from '@redrobui/react'; <br /> <br /><Avatar> <br /> <AvatarImage src="https://example.com/avatar.jpg" alt="User" /> <br /> <AvatarFallback>JD</AvatarFallback> <br /></Avatar> <br /> <br />// Different sizes <br /><Avatar className="h-8 w-8"> <br /> <AvatarImage src="..." /> <br /> <AvatarFallback>SM</AvatarFallback> <br /></Avatar> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Table <br /> <br />Data table component with sorting and pagination. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Table } from '@redrobui/react'; <br /> <br /><Table <br /> columns={[ <br /> { header: "Name", accessor: "name" }, <br /> { header: "Email", accessor: "email" }, <br /> { header: "Role", accessor: "role" }, <br /> ]} <br /> data={[ <br /> { name: "John Doe", email: "john@example.com", role: "Admin" }, <br /> { name: "Jane Smith", email: "jane@example.com", role: "User" }, <br /> ]} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />#### Dropdown Menu <br /> <br />Contextual menu with actions. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { DropdownMenu } from '@redrobui/react'; <br /> <br /><DropdownMenu <br /> trigger={<Button>Options</Button>} <br /> items={[ <br /> { label: "Edit", onClick: () => {} }, <br /> { label: "Delete", onClick: () => {}, variant: "danger" }, <br /> ]} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Popover <br /> <br />Floating content container. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Popover } from '@redrobui/react'; <br /> <br /><Popover <br /> trigger={<Button>Open</Button>} <br /> content={<div>Popover content</div>} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Calendar <br /> <br />Date picker component. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Calendar } from '@redrobui/react'; <br /> <br /><Calendar <br /> selected={date} <br /> onSelect={(date) => setDate(date)} <br />/> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Component Composition</h2> <br /> <br />Components are designed to be composable: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br /><Card className="p-6"> <br /> <div className="space-y-4"> <br /> <div className="flex items-center justify-between"> <br /> <h2 className="text-xl font-bold">User Profile</h2> <br /> <Tag variant="completed" text="Active" /> <br /> </div> <br /> <br /> <Separator /> <br /> <br /> <div className="flex items-center space-x-4"> <br /> <Avatar> <br /> <AvatarImage src="..." /> <br /> <AvatarFallback>JD</AvatarFallback> <br /> </Avatar> <br /> <div> <br /> <h3 className="font-medium">John Doe</h3> <br /> <p className="text-sm text-gray-500">john@example.com</p> <br /> </div> <br /> </div> <br /> <br /> <Separator /> <br /> <br /> <div className="space-y-2"> <br /> <Input label="Name" defaultValue="John Doe" /> <br /> <Input label="Email" defaultValue="john@example.com" /> <br /> <br /> <div className="flex items-center space-x-2"> <br /> <Switch id="notifications" /> <br /> <Label htmlFor="notifications">Email notifications</Label> <br /> </div> <br /> </div> <br /> <br /> <div className="flex gap-2"> <br /> <Button variant="outline" fullWidth>Cancel</Button> <br /> <Button variant="primary" fullWidth>Save Changes</Button> <br /> </div> <br /> </div> <br /></Card> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">TypeScript</h2> <br /> <br />Full TypeScript support with exported types: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import type { <br /> ButtonProps, <br /> CardProps, <br /> InputProps, <br /> SelectOptionType, <br />} from '@redrobui/react'; <br /> <br />const MyButton: React.FC<ButtonProps> = (props) => { <br /> return <Button {...props} />; <br />}; <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Accessibility</h2> <br /> <br />All components follow WAI-ARIA guidelines: <br />- Keyboard navigation support <br />- Screen reader friendly <br />- Focus management <br />- ARIA attributes <br />- Semantic HTML <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Customization</h2> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />import { Button, type ButtonProps } from '@redrobui/react'; <br /> <br />interface MyButtonProps extends ButtonProps { <br /> icon?: React.ReactNode; <br />} <br /> <br />export const MyButton: React.FC<MyButtonProps> = ({ icon, ...props }) => { <br /> return <Button leftIcon={icon} {...props} />; <br />}; <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx <br />// Use className for custom styles <br /><Button className="my-custom-class"> <br /> Custom Button <br /></Button> <br /> <br />// Or use Tailwind classes <br /><Button className="bg-purple-600 hover:bg-purple-700"> <br /> Purple Button <br /></Button> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js <br />// tailwind.config.js <br />const redrobConfig = require('@redrobui/tailwind-config'); <br /> <br />module.exports = { <br /> presets: [redrobConfig], <br /> theme: { <br /> extend: { <br /> colors: { <br /> brand: '#your-color', <br /> }, <br /> }, <br /> }, <br />}; <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Best Practices</h2> <br /> <br />1. <strong>Import styles once</strong> - In your main entry file <br />2. <strong>Use design tokens</strong> - Instead of hardcoded values <br />3. <strong>Leverage variants</strong> - Use variant props instead of custom styling <br />4. <strong>Type safety</strong> - Utilize TypeScript types for better DX <br />5. <strong>Composability</strong> - Compose complex UIs from simple components <br />6. <strong>Accessibility</strong> - Always include proper labels and ARIA attributes <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Examples</h2> <br /> <br />See the <a href="../../examples/react-app" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">React example app</a> for a complete implementation. <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Related Packages</h2> <br /> <br />- <a href="../tokens" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@redrobui/tokens</a> - Design tokens <br />- <a href="../tailwind-config" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@redrobui/tailwind-config</a> - Tailwind preset <br />- <a href="../icons" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@redrobui/icons</a> - Icon library <br />- <a href="../vue-components" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@redrobui/vue</a> - Vue 3 components <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Development</h2> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash <br />npm run dev <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash <br />npm run build <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash <br />npm run preview <br /></code>`` <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2> <br /> <br />MIT <br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}]\n2d:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.3.3\"}]\n2e:[\"$\",\"$L5\",\"@radix-ui/react-dialog\",{\"href\":\"/package/%40radix-ui%2Freact-dialog\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-dialog\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.15\"}]]}]\n2f:[\"$\",\"$L5\",\"@radix-ui/react-dropdown-menu\",{\"href\":\"/package/%40radix-ui%2Freact-dropdown-menu\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-dropdown-menu\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.1.16\"}]]}]\n30:[\"$\",\"$L5\",\"@radix-ui/react-popover\",{\"href\":\"/package/%40radix-ui%2Freact-popover\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-popover\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.15\"}]]}]\n31:[\"$\",\"$L5\",\"@radix-ui/react-radio-group\",{\"href\":\"/package/%40radix-ui%2Freact-radio-group\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-radio-group\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.3.8\"}]]}]\n32:[\"$\",\"$"])</script><script>self.__next_f.push([1,"L5\",\"@radix-ui/react-select\",{\"href\":\"/package/%40radix-ui%2Freact-select\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-select\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.6\"}]]}]\n33:[\"$\",\"$L5\",\"@radix-ui/react-separator\",{\"href\":\"/package/%40radix-ui%2Freact-separator\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-separator\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.7\"}]]}]\n34:[\"$\",\"$L5\",\"@radix-ui/react-slot\",{\"href\":\"/package/%40radix-ui%2Freact-slot\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-slot\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.3\"}]]}]\n35:[\"$\",\"$L5\",\"@radix-ui/react-switch\",{\"href\":\"/package/%40radix-ui%2Freact-switch\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-switch\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.6\"}]]}]\n36:[\"$\",\"$L5\",\"@radix-ui/react-toggle\",{\"href\":\"/package/%40radix-ui%2Freact-toggle\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 "])</script><script>self.__next_f.push([1,"text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-toggle\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.10\"}]]}]\n37:[\"$\",\"$L5\",\"@radix-ui/react-tooltip\",{\"href\":\"/package/%40radix-ui%2Freact-tooltip\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@radix-ui/react-tooltip\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.8\"}]]}]\n38:[\"$\",\"$L5\",\"@redrobui/tailwind-config\",{\"href\":\"/package/%40redrobui%2Ftailwind-config\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@redrobui/tailwind-config\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.4.0\"}]]}]\n39:[\"$\",\"$L5\",\"@redrobui/tokens\",{\"href\":\"/package/%40redrobui%2Ftokens\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@redrobui/tokens\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.4.0\"}]]}]\n3a:[\"$\",\"$L5\",\"class-variance-authority\",{\"href\":\"/package/class-variance-authority\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"class-variance-authority\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.7.0\"}]]}]\n3b:[\"$\",\"$L5\",\"clsx\",{\"href\":\"/package/clsx\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"r"])</script><script>self.__next_f.push([1,"ef\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"clsx\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n3c:[\"$\",\"$L5\",\"react-day-picker\",{\"href\":\"/package/react-day-picker\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-day-picker\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.11.2\"}]]}]\n3d:[\"$\",\"$L5\",\"sonner\",{\"href\":\"/package/sonner\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sonner\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.4.0\"}]]}]\n3e:[\"$\",\"$L5\",\"tailwind-merge\",{\"href\":\"/package/tailwind-merge\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tailwind-merge\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.0\"}]]}]\n"])</script><script>self.__next_f.push([1,"3f:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}],\"Peer Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=18.0.0\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=18.0.0\"}]]}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"40:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":13}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@jridgewell/sourcemap-codec\",{\"href\":\"/package/%40jridgewell%2Fsourcemap-codec\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@jridgewell/sourcemap-codec\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.5.5\"}]]}],[\"$\",\"$L5\",\"@tailwindcss/postcss\",{\"href\":\"/package/%40tailwindcss%2Fpostcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@tailwindcss/postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.17\"}]]}],[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L42\",\"$undefined\"]}],\"@types/react\"]}],\"$L43\"]}],\"$L44\",\"$L45\",\"$L46\",\"$L47\",\"$L48\",\"$L49\",\"$L4a\",\"$L4b\",\"$L4c\",\"$L4d\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"42:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n43:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.45\"}]\n44:[\"$\",\"$L5\",\"@types/react-dom\",{\"href\":\"/package/%40types%2Freact-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.18\"}]]}]\n45:[\"$\",\"$L5\",\"@vitejs/plugin-react\",{\"href\":\"/package/%40vitejs%2Fplugin-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vitejs/plugin-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.1\"}]]}]\n46:[\"$\",\"$L5\",\"autoprefixer\",{\"href\":\"/package/autoprefixer\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"autoprefixer\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^10.4.16\"}]]}]\n47:[\"$\",\"$L5\",\"postcss\",{\"href\":\"/package/postcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.4.32\"}]]}]\n48:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lu"])</script><script>self.__next_f.push([1,"cide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.0\"}]]}]\n49:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.2.0\"}]]}]\n4a:[\"$\",\"$L5\",\"tailwindcss\",{\"href\":\"/package/tailwindcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tailwindcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.0\"}]]}]\n4b:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.3.3\"}]]}]\n4c:[\"$\",\"$L5\",\"vite\",{\"href\":\"/package/vite\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vite\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.8\"}]]}]\n4d:[\"$\",\"$L5\",\"vite-plugin-dts\",{\"href\":\"/package/vite-plugin-dts\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"str"])</script><script>self.__next_f.push([1,"okeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vite-plugin-dts\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.7.0\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>