import type { HTMLAttributes, ReactNode } from 'react' type Props = HTMLAttributes & { children?: ReactNode } const cx = (...classes: Array) => classes.filter(Boolean).join(' ') const field = 'rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-900 shadow-sm outline-none focus-visible:border-blue-600 focus-visible:ring-2 focus-visible:ring-blue-600/20 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100' const button = 'inline-flex h-10 items-center justify-center rounded-lg bg-blue-600 px-4 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950' export const CommandMenu = ({ children = 'Search actions', className, ...props }: Props) => (

) export const MultiSelect = ({ className, ...props }: Props) => (

Design × Code × Add…

) export const OTPInput = ({ className, ...props }: Props) => (

{[1, 2, 3, 4, 5, 6].map((slot) => ( ))}

) export const DragAndDropUpload = ({ className }: Props) => ( Drop files here or choose from your device ) export const Combobox = ({ className, ...props }: Props) => (

Project

) export const Calendar = ({ className, ...props }: Props) => (

July 2026 ‹ ›

{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day) => ( {day} ))} {Array.from({ length: 21 }, (_, index) => ( ))}

) export const DateField = ({ className }: Props) => ( Date ) export const ResizablePanels = ({ className, ...props }: Props) => (

Preview

) export const DashboardSidebar = ({ className, ...props }: Props) => ( ) export const Sidebar = DashboardSidebar export const CommandPalette = CommandMenu export const DatePicker = ({ className, ...props }: Props) => (

) export const DateInput = ({ className }: Props) => ( ) export const Dropdown = ({ className, ...props }: Props) => (

{['Rename', 'Duplicate', 'Archive'].map((item) => ( ))}

) export const Drawer = ({ className, ...props }: Props) => ( ) export const Modal = ({ className, ...props }: Props) => ( ) export const Tooltip = ({ children = 'More information', className, ...props }: Props) => ( )

Rebuilt Controls

Command menu

Multi-select

OTP input

Drag-and-drop upload

Combobox

Calendar

Date field

Resizable panels

Dashboard sidebar

Sidebar

Command palette

Date picker

Date input

Dropdown

Drawer

Modal

Tooltip

Related components

Breadcrumbs

Buttons

Dropdowns

Pagination

Rebuilt Dashboard