Duck UI
55+ styled Tailwind components built on @gentleduck/primitives. The CLI copies source into your project so you own every file.
A UI kit you fully own
The styled layer of gentleduck: Tailwind and cva on top of a11y-first primitives. Scaffold with the CLI, copy source into your project, edit any class without forking.
55+ components
Buttons, Dialogs, Selects, Tabs, Sidebar, Data Table, Calendar, Command, Carousel. The full kit, styled and ready to ship.
Built on duck-primitives
Every component sits on top of the headless `@gentleduck/primitives` layer. Styled and unstyled are one family.
Tailwind + cva
Components are authored with `cva()` variants and `cn()` merging. Override className per instance without forking.
Theming + dark mode
OKLCH design tokens, CSS variables, and a built-in dark mode. Swap palettes by changing a few variables.
A11y inherited
Keyboard, focus, and ARIA behavior from duck-primitives flows up unchanged. The styled layer never breaks it.
Copy, don’t depend
The CLI writes source directly into your project. You own every file. Patch, restyle, or extend it.
Install
One command to scaffold, one per component. Works with Next.js, Vite, Remix, and Astro.
# Scaffold with the CLI
npx @gentleduck/cli init
# Add your first component
npx @gentleduck/cli add buttonComponent catalog
60 components grouped by category. Click any to jump straight to the docs.
Forms13
- buttonA customizable button component for triggering actions in your application.
- button-groupA container that groups related button like elements together with consistent styling.
- checkboxA control that allows the user to toggle between checked and not checked.
- inputDisplays a form input field or a component that looks like an input field.
- input-groupGroup inputs, in layouts, more easily.
- input-otpAccessible one-time password component with paste-to-fill support.
- labelRenders an accessible label associated with controls.
- radio-groupA set of checkable buttons - known as radio buttons - where no more than one of the buttons can be checked at a time.
- React Hook FormBuild forms in React using React Hook Form and Zod.
- sliderAn input where the user selects a value from within a given range.
- switchA control that allows the user to toggle between checked and not checked.
- TanStack FormBuild forms in React using TanStack Form and Zod.
- textareaDisplays a form textarea or a component that looks like a textarea.
Selection4
Navigation6
- breadcrumbDisplays the path to the current resource using a hierarchy of links.
- context-menuDisplays a context menu of actions triggered by right-click on a target.
- dropdown-menuDisplays a menu to the user - such as a set of actions or functions - triggered by a button.
- menubarA visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- navigation-menuA collection of links for navigating websites.
- paginationPagination with page navigation, next and previous links.
Disclosure3
Overlay8
- alert-dialogA modal dialog temporarily interrupts the user's workflow with important content, requiring immediate attention and a response before allowing further interaction.
- dialogA window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
- drawerA customizable drawer component for React.
- hover-cardFor sighted users to preview content available behind a link.
- popoverDisplays rich content in a floating layer, triggered by an anchor element.
- preview-panelA pan-zoom container with controls, fullscreen dialog, and synced state between views.
- sheetExtends the Dialog component to display content that complements the main content of the screen.
- tooltipA customizable and accessible tooltip component with Floating UI positioning, state-aware styling hooks, and flexible triggers.
Data Display9
- avatarAn image element with a fallback for representing the user.
- calendarA date field component that allows users to enter and edit date.
- chartBeautiful charts. Built using Recharts. Copy and paste into your apps.
- data-tablePowerful table and datagrids built using TanStack Table.
- fieldMake accessible forms with Field components.
- itemA component for displaying content with media, title, description, and actions.
- json-editorA form-aware JSON editor field with inline, popover, and expanded editing modes.
- kbdUsed to display textual user input from keyboard.
- tableA responsive table component.
Feedback5
- alertDisplays a callout for user attention.
- badgeA versatile badge component for labels, statuses, and more.
- progressDisplays an indicator showing the completion progress of a task, typically displayed as a progress bar.
- skeletonUse to show a placeholder while content is loading.
- sonnerAn opinionated toast component for React.
Layout6
- aspect-ratioDisplays content within a desired ratio.
- cardDisplays a card with header, content, and footer.
- resizableAccessible resizable panel groups and layouts with keyboard support.
- scroll-areaAugments native scroll functionality for custom, cross-browser styling.
- separatorVisually or semantically separates content.
- SidebarA composable, themeable and customizable sidebar component.
Media2
Toggle2
Free & open source
gentleduck is MIT licensed and will always be free and open source. Every package ships with full source access — fork it, modify it, own it.