# Gummy UI > Open-source React and TypeScript component source with tactile Gel Pop material, native, Base UI, and Radix UI behavior, RTL, dark mode, and reduced motion. ## Canonical public resources - Documentation: https://gummyui.dev/docs - Next.js guide: https://gummyui.dev/docs/nextjs - Vite guide: https://gummyui.dev/docs/vite - Editor and agent setup: https://gummyui.dev/docs/editor-setup - Troubleshooting: https://gummyui.dev/docs/troubleshooting - Component catalogue: https://gummyui.dev/components - Markdown catalogue: https://gummyui.dev/docs/markdown/catalogue.md - Markdown component contracts: https://gummyui.dev/docs/markdown/components/{component-slug}.md - Markdown guides: https://gummyui.dev/docs/markdown/guides/{guide-slug}.md - Machine-readable catalogue: https://gummyui.dev/api/catalogue - Registry index: https://gummyui.dev/registry - Registry payloads: https://gummyui.dev/r/{registry-name}.json - MCP and agent guidance: https://gummyui.dev/mcp - Language publication status: https://gummyui.dev/locales - Localisation review guide: https://gummyui.dev/docs/markdown/guides/localisation.md - Coding-agent guide: https://gummyui.dev/AGENTS.md - Original articles: https://gummyui.dev/blog - Article RSS: https://gummyui.dev/rss.xml - Public changelog RSS: https://gummyui.dev/changelog.xml - Licence: https://gummyui.dev/license ## Components (57) - [Accordion](https://gummyui.dev/docs/markdown/components/accordion.md): Vertically stacked disclosure sections with coordinated open state. HTML: https://gummyui.dev/components/accordion Base registry: https://gummyui.dev/r/gummy-accordion.json Radix registry: https://gummyui.dev/r/gummy-radix-accordion.json - [Alert](https://gummyui.dev/docs/markdown/components/alert.md): Static or live feedback with a restrained status reservoir. HTML: https://gummyui.dev/components/alert Base registry: https://gummyui.dev/r/gummy-alert.json - [Alert Dialog](https://gummyui.dev/docs/markdown/components/alert-dialog.md): A modal confirmation surface for consequential decisions. HTML: https://gummyui.dev/components/alert-dialog Base registry: https://gummyui.dev/r/gummy-alert-dialog.json Radix registry: https://gummyui.dev/r/gummy-radix-alert-dialog.json - [Aspect Ratio](https://gummyui.dev/docs/markdown/components/aspect-ratio.md): A predictable media frame that preserves a numeric ratio. HTML: https://gummyui.dev/components/aspect-ratio Base registry: https://gummyui.dev/r/gummy-aspect-ratio.json - [Avatar](https://gummyui.dev/docs/markdown/components/avatar.md): Image, fallback, group, and named presence status. HTML: https://gummyui.dev/components/avatar Base registry: https://gummyui.dev/r/gummy-avatar.json - [Badge](https://gummyui.dev/docs/markdown/components/badge.md): A non-interactive semantic label in solid or translucent fruit material. HTML: https://gummyui.dev/components/badge Base registry: https://gummyui.dev/r/gummy-badge.json - [Breadcrumb](https://gummyui.dev/docs/markdown/components/breadcrumb.md): Hierarchy navigation with current-page and collapsed-path parts. HTML: https://gummyui.dev/components/breadcrumb Base registry: https://gummyui.dev/r/gummy-breadcrumb.json - [Button](https://gummyui.dev/docs/markdown/components/button.md): The approved fruit-gel action with chewy press physics. HTML: https://gummyui.dev/components/button Base registry: https://gummyui.dev/r/gummy-button.json - [Button Group](https://gummyui.dev/docs/markdown/components/button-group.md): Related native buttons joined by quiet shared material. HTML: https://gummyui.dev/components/button-group Base registry: https://gummyui.dev/r/gummy-button-group.json - [Calendar](https://gummyui.dev/docs/markdown/components/calendar.md): A locale-aware single-date grid with month navigation and constraints. HTML: https://gummyui.dev/components/calendar Base registry: https://gummyui.dev/r/gummy-calendar.json - [Card](https://gummyui.dev/docs/markdown/components/card.md): Passive, link, and button surfaces held in one continuous gel-pocket frame. HTML: https://gummyui.dev/components/card Base registry: https://gummyui.dev/r/gummy-card.json - [Carousel](https://gummyui.dev/docs/markdown/components/carousel.md): Controlled or uncontrolled labelled slides with finite or looping movement. HTML: https://gummyui.dev/components/carousel Base registry: https://gummyui.dev/r/gummy-carousel.json - [Checkbox](https://gummyui.dev/docs/markdown/components/checkbox.md): A native checkbox with mixed, validation, disabled, and read-only states. HTML: https://gummyui.dev/components/checkbox Base registry: https://gummyui.dev/r/gummy-checkbox.json - [Collapsible](https://gummyui.dev/docs/markdown/components/collapsible.md): One trigger and panel for optional supporting content. HTML: https://gummyui.dev/components/collapsible Base registry: https://gummyui.dev/r/gummy-collapsible.json Radix registry: https://gummyui.dev/r/gummy-radix-collapsible.json - [Combobox](https://gummyui.dev/docs/markdown/components/combobox.md): An editable option picker with filtering and collision-aware popup. HTML: https://gummyui.dev/components/combobox Base registry: https://gummyui.dev/r/gummy-combobox.json - [Command](https://gummyui.dev/docs/markdown/components/command.md): A filterable grouped action surface with decorative shortcuts. HTML: https://gummyui.dev/components/command Base registry: https://gummyui.dev/r/gummy-command.json - [Context Menu](https://gummyui.dev/docs/markdown/components/context-menu.md): Secondary commands opened by context click, keyboard, or long press. HTML: https://gummyui.dev/components/context-menu Base registry: https://gummyui.dev/r/gummy-context-menu.json Radix registry: https://gummyui.dev/r/gummy-radix-context-menu.json - [Data Table](https://gummyui.dev/docs/markdown/components/data-table.md): A generic typed table with filtering, sorting, paging, and selection. HTML: https://gummyui.dev/components/data-table Base registry: https://gummyui.dev/r/gummy-data-table.json - [Date Picker](https://gummyui.dev/docs/markdown/components/date-picker.md): A formatted trigger composing Gummy Popover and Calendar. HTML: https://gummyui.dev/components/date-picker Base registry: https://gummyui.dev/r/gummy-date-picker.json - [Dialog](https://gummyui.dev/docs/markdown/components/dialog.md): A modal reading plane with responsive focus containment. HTML: https://gummyui.dev/components/dialog Base registry: https://gummyui.dev/r/gummy-dialog.json Radix registry: https://gummyui.dev/r/gummy-radix-dialog.json - [Direction](https://gummyui.dev/docs/markdown/components/direction.md): A scoped native direction boundary aligned with Base UI behavior. HTML: https://gummyui.dev/components/direction Base registry: https://gummyui.dev/r/gummy-direction.json Radix registry: https://gummyui.dev/r/gummy-radix-direction.json - [Drawer](https://gummyui.dev/docs/markdown/components/drawer.md): A mobile-first bottom task surface built on modal dialog behavior. HTML: https://gummyui.dev/components/drawer Base registry: https://gummyui.dev/r/gummy-drawer.json Radix registry: https://gummyui.dev/r/gummy-radix-drawer.json - [Dropdown Menu](https://gummyui.dev/docs/markdown/components/dropdown-menu.md): Compact commands with typeahead, submenus, and selection items. HTML: https://gummyui.dev/components/dropdown-menu Base registry: https://gummyui.dev/r/gummy-dropdown-menu.json Radix registry: https://gummyui.dev/r/gummy-radix-dropdown-menu.json - [Empty](https://gummyui.dev/docs/markdown/components/empty.md): A structured zero-state with media, title, description, and actions. HTML: https://gummyui.dev/components/empty Base registry: https://gummyui.dev/r/gummy-empty.json - [Field](https://gummyui.dev/docs/markdown/components/field.md): One labelled control with descriptions, validation, and layout state. HTML: https://gummyui.dev/components/field Base registry: https://gummyui.dev/r/gummy-field.json - [Hover Card](https://gummyui.dev/docs/markdown/components/hover-card.md): A supporting preview for a focused or hovered link. HTML: https://gummyui.dev/components/hover-card Base registry: https://gummyui.dev/r/gummy-hover-card.json Radix registry: https://gummyui.dev/r/gummy-radix-hover-card.json - [Input](https://gummyui.dev/docs/markdown/components/input.md): A native single-line field with descriptions, adornments, and feedback. HTML: https://gummyui.dev/components/input Base registry: https://gummyui.dev/r/gummy-input.json - [Input Group](https://gummyui.dev/docs/markdown/components/input-group.md): Native input, addons, and real button actions in one shell. HTML: https://gummyui.dev/components/input-group Base registry: https://gummyui.dev/r/gummy-input-group.json - [Input OTP](https://gummyui.dev/docs/markdown/components/input-otp.md): Four to eight numeric slots with paste distribution and form value. HTML: https://gummyui.dev/components/input-otp Base registry: https://gummyui.dev/r/gummy-input-otp.json - [Item](https://gummyui.dev/docs/markdown/components/item.md): A dense passive, link, or button row with media, copy, and actions. HTML: https://gummyui.dev/components/item Base registry: https://gummyui.dev/r/gummy-item.json - [Kbd](https://gummyui.dev/docs/markdown/components/kbd.md): Keyboard notation for shortcuts and key sequences. HTML: https://gummyui.dev/components/kbd Base registry: https://gummyui.dev/r/gummy-kbd.json - [Label](https://gummyui.dev/docs/markdown/components/label.md): A native label with required, optional, disabled, and read-only cues. HTML: https://gummyui.dev/components/label Base registry: https://gummyui.dev/r/gummy-label.json - [Menubar](https://gummyui.dev/docs/markdown/components/menubar.md): Coordinated application command menus with compact scanning. HTML: https://gummyui.dev/components/menubar Base registry: https://gummyui.dev/r/gummy-menubar.json Radix registry: https://gummyui.dev/r/gummy-radix-menubar.json - [Native Select](https://gummyui.dev/docs/markdown/components/native-select.md): The platform single-select picker with Gummy shell and read-only extension. HTML: https://gummyui.dev/components/native-select Base registry: https://gummyui.dev/r/gummy-native-select.json - [Navigation Menu](https://gummyui.dev/docs/markdown/components/navigation-menu.md): Site discovery links arranged in a shared responsive popup viewport. HTML: https://gummyui.dev/components/navigation-menu Base registry: https://gummyui.dev/r/gummy-navigation-menu.json Radix registry: https://gummyui.dev/r/gummy-radix-navigation-menu.json - [Pagination](https://gummyui.dev/docs/markdown/components/pagination.md): Current-page navigation with previous, next, and ellipsis parts. HTML: https://gummyui.dev/components/pagination Base registry: https://gummyui.dev/r/gummy-pagination.json - [Popover](https://gummyui.dev/docs/markdown/components/popover.md): A non-modal contextual surface with title, description, and close parts. HTML: https://gummyui.dev/components/popover Base registry: https://gummyui.dev/r/gummy-popover.json Radix registry: https://gummyui.dev/r/gummy-radix-popover.json - [Progress](https://gummyui.dev/docs/markdown/components/progress.md): Determinate or indeterminate task progress with a visible label. HTML: https://gummyui.dev/components/progress Base registry: https://gummyui.dev/r/gummy-progress.json - [Radio Group](https://gummyui.dev/docs/markdown/components/radio-group.md): A native fieldset of same-name radios with controlled state and RTL. HTML: https://gummyui.dev/components/radio-group Base registry: https://gummyui.dev/r/gummy-radio-group.json - [Resizable](https://gummyui.dev/docs/markdown/components/resizable.md): A bounded two-panel split with pointer and keyboard control. HTML: https://gummyui.dev/components/resizable Base registry: https://gummyui.dev/r/gummy-resizable.json - [Scroll Area](https://gummyui.dev/docs/markdown/components/scroll-area.md): A native scroll viewport with custom overflow-only scrollbars. HTML: https://gummyui.dev/components/scroll-area Base registry: https://gummyui.dev/r/gummy-scroll-area.json Radix registry: https://gummyui.dev/r/gummy-radix-scroll-area.json - [Select](https://gummyui.dev/docs/markdown/components/select.md): A non-editable custom picker for richer option content. HTML: https://gummyui.dev/components/select Base registry: https://gummyui.dev/r/gummy-select.json Radix registry: https://gummyui.dev/r/gummy-radix-select.json - [Separator](https://gummyui.dev/docs/markdown/components/separator.md): A quiet horizontal or vertical divider with decorative or semantic mode. HTML: https://gummyui.dev/components/separator Base registry: https://gummyui.dev/r/gummy-separator.json - [Sheet](https://gummyui.dev/docs/markdown/components/sheet.md): A modal side workflow with configurable logical edge. HTML: https://gummyui.dev/components/sheet Base registry: https://gummyui.dev/r/gummy-sheet.json Radix registry: https://gummyui.dev/r/gummy-radix-sheet.json - [Sidebar](https://gummyui.dev/docs/markdown/components/sidebar.md): A controlled workspace shell with responsive navigation panel and inset. HTML: https://gummyui.dev/components/sidebar Base registry: https://gummyui.dev/r/gummy-sidebar.json - [Skeleton](https://gummyui.dev/docs/markdown/components/skeleton.md): A decorative loading placeholder with reduced-motion fallback. HTML: https://gummyui.dev/components/skeleton Base registry: https://gummyui.dev/r/gummy-skeleton.json - [Slider](https://gummyui.dev/docs/markdown/components/slider.md): Single or range numeric selection on a touch-safe track. HTML: https://gummyui.dev/components/slider Base registry: https://gummyui.dev/r/gummy-slider.json Radix registry: https://gummyui.dev/r/gummy-radix-slider.json - [Sonner](https://gummyui.dev/docs/markdown/components/sonner.md): Polite or urgent toast workflows with actions, promises, and swipe dismissal. HTML: https://gummyui.dev/components/sonner Base registry: https://gummyui.dev/r/gummy-sonner.json Radix registry: https://gummyui.dev/r/gummy-radix-sonner.json - [Spinner](https://gummyui.dev/docs/markdown/components/spinner.md): A compact named loading indicator with reduced-motion state. HTML: https://gummyui.dev/components/spinner Base registry: https://gummyui.dev/r/gummy-spinner.json - [Switch](https://gummyui.dev/docs/markdown/components/switch.md): A binary Base UI control with one connected track and gel thumb. HTML: https://gummyui.dev/components/switch Base registry: https://gummyui.dev/r/gummy-switch.json Radix registry: https://gummyui.dev/r/gummy-radix-switch.json - [Table](https://gummyui.dev/docs/markdown/components/table.md): Composable native table sections, captions, rows, headers, and cells. HTML: https://gummyui.dev/components/table Base registry: https://gummyui.dev/r/gummy-table.json - [Tabs](https://gummyui.dev/docs/markdown/components/tabs.md): One shared selection rail coordinating labelled tab panels. HTML: https://gummyui.dev/components/tabs Base registry: https://gummyui.dev/r/gummy-tabs.json Radix registry: https://gummyui.dev/r/gummy-radix-tabs.json - [Textarea](https://gummyui.dev/docs/markdown/components/textarea.md): A native multiline field with validation, resizing, and live count. HTML: https://gummyui.dev/components/textarea Base registry: https://gummyui.dev/r/gummy-textarea.json - [Toggle](https://gummyui.dev/docs/markdown/components/toggle.md): A pressed-state button for one independent option. HTML: https://gummyui.dev/components/toggle Base registry: https://gummyui.dev/r/gummy-toggle.json Radix registry: https://gummyui.dev/r/gummy-radix-toggle.json - [Toggle Group](https://gummyui.dev/docs/markdown/components/toggle-group.md): Single or multiple pressed choices coordinated as a labelled group. HTML: https://gummyui.dev/components/toggle-group Base registry: https://gummyui.dev/r/gummy-toggle-group.json Radix registry: https://gummyui.dev/r/gummy-radix-toggle-group.json - [Tooltip](https://gummyui.dev/docs/markdown/components/tooltip.md): A short descriptive popup with shared delay and collision handling. HTML: https://gummyui.dev/components/tooltip Base registry: https://gummyui.dev/r/gummy-tooltip.json Radix registry: https://gummyui.dev/r/gummy-radix-tooltip.json - [Typography](https://gummyui.dev/docs/markdown/components/typography.md): Headings, text, eyebrow, blockquote, and inline-code foundations. HTML: https://gummyui.dev/components/typography Base registry: https://gummyui.dev/r/gummy-typography.json ## Original articles (18) - [Designing the Gel Pop language](https://gummyui.dev/blog/designing-the-gel-pop-language): A practical account of how Gummy UI turns transmitted colour, attached reservoirs, stable reading planes, and restrained motion into one interface material. - [Semantics before surface](https://gummyui.dev/blog/semantics-before-surface): How Gummy UI keeps native HTML or Base UI behavior in charge while adding editable React source, forwarded refs, and Gel Pop visual anatomy. - [Reading a Gummy registry item](https://gummyui.dev/blog/reading-a-gummy-registry-item): A field guide to Gummy UI’s public registry payloads, shared style dependencies, editable component files, and current installation verification. - [One catalogue, 57 component categories](https://gummyui.dev/blog/one-catalogue-fifty-seven-components): Why Gummy UI derives its public component count, routes, source links, and registry names from a single catalogue instead of maintaining parallel claims. - [Documenting meaningful component states](https://gummyui.dev/blog/documenting-meaningful-component-states): A method for reviewing default, focus, filled, validation, disabled, read-only, selected, open, and responsive states without a decorative matrix. - [Keyboard contracts for overlays](https://gummyui.dev/blog/keyboard-contracts-for-overlays): How Gummy UI reasons about triggers, focus containment, dismissal, restoration, roving navigation, and non-modal surfaces across its Base UI overlay components. - [Native forms with visible context](https://gummyui.dev/blog/native-forms-with-visible-context): A close look at labels, descriptions, validation, read-only behavior, counts, groups, and form participation in Gummy UI’s public form foundations. - [RTL is behavior, not a mirror](https://gummyui.dev/blog/rtl-is-behavior-not-a-mirror): How logical CSS, native direction, Base UI context, text alignment, reservoir placement, and keyboard expectations combine in Gummy UI’s RTL work. - [Reduced motion without lost state](https://gummyui.dev/blog/reduced-motion-without-lost-state): A component-level approach to removing travel, rotation, squash, and animated settling while preserving focus, selection, loading, and validation information. - [Building light and dark from semantic tokens](https://gummyui.dev/blog/building-light-and-dark-from-semantic-tokens): How Gummy UI separates canvas, surface, ink, focus, fruit families, and component-local material so themes can change without rewriting behavior. - [Responsive components start with content](https://gummyui.dev/blog/responsive-components-start-with-content): A practical approach to 320-pixel reflow, long labels, touch targets, logical stacking, bounded decoration, and container-driven component layouts. - [Using the Component Lab as evidence](https://gummyui.dev/blog/using-the-component-lab-as-evidence): What Gummy UI’s Component Lab reveals, what automated tests add, and why a specimen page cannot replace browser and assistive-technology verification. - [Testing accessibility in layers](https://gummyui.dev/blog/testing-accessibility-in-layers): How semantic assertions, keyboard tests, axe, contrast, responsive review, reduced motion, RTL, and manual smoke tests fit without overstating coverage. - [Composing data interfaces from primitives](https://gummyui.dev/blog/composing-data-interfaces-from-primitives): How Table, Data Table, Pagination, Empty, Progress, Skeleton, Resizable, and Scroll Area divide semantic and visual responsibilities in dense interfaces. - [Interactive cards need real elements](https://gummyui.dev/blog/interactive-cards-need-real-elements): Why Gummy UI separates passive article cards, anchor cards, and button cards instead of attaching click and keyboard handlers to generic containers. - [Designing AI-readable component docs](https://gummyui.dev/blog/designing-ai-readable-component-docs): How catalogue JSON, llms.txt, registry payloads, canonical pages, and explicit status language help agents discover Gummy UI without exposing private source. - [Keeping public and Pro source separate](https://gummyui.dev/blog/keeping-public-and-pro-source-separate): The reasoning behind Gummy UI’s two-repository boundary and the practical rules for metadata, previews, registry payloads, releases, and credentials. - [Honest product status by design](https://gummyui.dev/blog/honest-product-status-by-design): Why Gummy UI separates specified, implemented, tested, deployed, and production-verified status across components, Pro, commerce, support, and legal pages. ## Source boundary The public catalogue is MIT licensed. Paid Pro block, template, design-kit, release, and entitlement source is not exposed by public routes or registry payloads.