2026-01-05 22:30

⛔ Breaking Changes

• Fixed a bug where Fumadocs CLI no longer worked.
• Resolved type errors.
• Linted/formatted components with Ultracite.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r auto-form button card chart code-block-dynamic code-comparison code-editor code-tabs data-table files hover-card input json-viewer motion-highlight multi-select popover select sheet sidebar slider stepper toggle-group tooltip typography use-controllable-state use-file-upload use-fullscreen

2025-12-11 10:42

🚨 Breaking Changes

• Theme - Extensive additions to design token system with 200+ new semantic tokens for colors, typography, and spacing. While all existing tokens remain (not technically breaking), you must update theme.css to use the redesigned Badge, Button, and Typography components. New tokens include: typography scales (--text-9xl through --text-caption-sm), font families (--font-sans, --font-display), letter-spacing tokens (--tracking-heading, --tracking-label, --tracking-number, --tracking-caption), semantic color surfaces (--surface-*, --background-*, --outline-*), and comprehensive alpha variants for all color scales.
• Button - Removed secondaryOutline variant. Migrate to the new secondary variant which now uses an outline style by default, or use accent-outline for brand-colored outline buttons.

🚧 Updated

• Badge - Completely redesigned variant system using semantic design tokens for better theme consistency. All existing variant names (default, secondary, destructive, outline, green, orange, blue, purple, indigo, yellow, cyan, teal, rose, emerald, amber, red, gray) remain available but with updated styling. Added 30+ new compound variants with -inverted and -outline suffixes (e.g., default-inverted, info-outline, accent-outline) providing filled, subtle, and outlined styles for each semantic color (default, simple, info, accent, success, warning, disabled, destructive, secondary, primary). Added new size option lg (32px height) alongside existing sm (20px) and default (24px). Icon sizing now automatically adjusts per size variant.
• Button - Major redesign using semantic design tokens with improved interaction states. All core variants (default, secondary, destructive, outline, ghost, link, dashed) remain but with enhanced styling including proper hover, active, and disabled states. Added new accent variant for brand/Redpanda Red colored buttons. Added 6 new compound variants: accent-outline, accent-ghost, destructive-outline, destructive-ghost, inverse-outline, inverse-ghost for expanded styling options. Added new xs size (24px height) and enhanced existing sizes (sm: 32px, default: 40px, lg: 48px) with proper spacing and typography. Added 3 new icon size variants: icon-xs (24px), icon-sm (32px), icon-lg (48px). All buttons now have active:scale-[0.98] for tactile feedback on press.
• Typography - Major expansion of the type system with 40+ new semantic variants based on Figma design system specifications. Legacy variants (default, lead, large, small, muted, label, xLarge) remain for backward compatibility but now map to new typography scales with updated styling. Added comprehensive variant categories: Titles (titleLarge through titleXSmall), Labels (labelLarge through labelXSmall with normal and strong weights), Body text (bodyXLarge through bodySmall with normal and strong weights), Buttons (buttonLarge through buttonXSmall), Numbers with tabular figures (numberLarge through numberXSmall with normal and strong weights), and Captions (captionMedium and captionSmall with normal and strong weights). Heading levels now support level={5} in addition to 1-4. Links updated with dotted underline style and 3px offset. Updated font stacks to use Inter and Inter Display. Added new tracking tokens for precise letter-spacing control.
• Form - FormSection component now uses Typography Heading and Text components internally for title and description rendering, ensuring consistent typography across forms.
• Auth0, Checkbox, Command, DataTable, JSONViewer, Label, Pagination, Skeleton, Sonner, Stepper, Tags - Updated to use new Typography components and semantic design tokens for consistent theming.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r theme badge button typography form auth0 checkbox command data-table json-viewer label pagination skeleton sonner stepper tags

2025-12-03 13:47

✨ New

• Accordion - Added variant prop with new "contained" style option providing card-like appearance with rounded borders and background colors. Added start and end props to AccordionTrigger for displaying custom elements like icons and badges alongside trigger content. Added AccordionVariant type export and new context hooks useAccordion for accessing variant state across the component tree.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r accordion

2025-11-21 00:00

✨ New

• Alert - Added icon prop for customizable icon display. Accepts ReactNode for custom icons, defaults to InfoIcon, or pass null to render without an icon for more flexible alert styling.

🚧 Updated

• Alert, AlertDialog, Avatar, AvatarGroup, Banner, Breadcrumb, ButtonGroup, Calendar, Chart, Choicebox, CodeBlock, CodeEditor, Collapsible, DataTable, DropdownMenu, Dropzone, Empty, Field, Files, Form, Group, InputGroup, Item, ListLayout, LoadingAnimation, Menubar, MotionHighlight, MultiSelect, RunningRedpanda, RunningRedpandaTreadmill, Spinner, Switch, Tags, Timeline, Typography, WaitingRedpanda - Enhanced with SharedProps type providing consistent testId prop support across all components for easier testing and debugging.
• AlertDialog, Combobox, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, LoadingAnimation, Menubar, MotionHighlight, MultiSelect, Popover, Select, Sheet, Tooltip - Added container prop to portal-based components, allowing custom portal container element for advanced layout scenarios like modals within specific DOM nodes.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r alert alert-dialog avatar avatar-group banner breadcrumb button-group calendar chart choicebox code-block code-editor collapsible combobox context-menu data-table dialog drawer dropdown-menu dropzone empty field files form group hover-card input-group item list-layout loading-animation menubar motion-highlight multi-select popover running-redpanda running-redpanda-treadmill select sheet spinner switch tabs tags timeline tooltip typography waiting-redpanda

2025-11-12 00:00

✨ New

• Badge - Added 13 color variant options (green, orange, blue, purple, indigo, yellow, cyan, teal, rose, emerald, amber, red, gray) with automatic dark mode support. Added flexible size system with sm and default sizes. New icon prop for displaying icons alongside badge content. Exports BadgeVariant and BadgeSize types for enhanced type safety. Includes 3 new demo files showcasing color variants, size options, and icon integration patterns.
• Button - Added secondaryOutline variant for outlined secondary buttons with hover states. Added router integration support with as and to props for seamless use with React Router or other routing libraries without wrapping in Link components. Includes 2 new demo files for secondaryOutline variant and router integration patterns.
• Input - Added InputStart and InputEnd slot components for adding icons, buttons, or other controls inside input fields. Enables better input decoration patterns without wrapper divs. Includes new demo file showcasing slot usage with icons and controls.
• Kbd - Added kbdVariants export for consistent keyboard shortcut styling. New variant prop supporting default and outline styles. Added size prop with xs, sm, and md options for different keyboard display contexts.

🚧 Updated

• Badge - Restructured internal layout to wrap children in span for proper truncation. Removed hardcoded padding in favor of size-based variants.
• Button - Added cursor-pointer class for better UX consistency across interactive elements.
• Card - Enhanced with motion/react animation support. Now supports both static (default) and animated modes via animated prop. Improved TypeScript types with separate StaticCardProps and AnimatedCardProps for better type inference. Added CardVariant and CardSize type exports.
• Choicebox - Enhanced with forwardRef support for better form integration. Improved checked state styling to use dynamic checked prop instead of data-state attributes. Added hover:shadow-elevated for better visual feedback. Refined border styling for cleaner appearance.
• Code-block and Code-block-dynamic - Minor code cleanup removing extra spaces in className definitions.
• Combobox - Major UX improvements with memoization for better performance. Enhanced keyboard navigation with improved Enter key behavior and better autocomplete completion. Added onOpen and onClose callbacks for integration with other components. Added className and containerClassName props for styling flexibility. Fixed blur behavior to maintain user input for creatable mode. Improved cursor positioning on open.
• Data-table - Added use client directive for proper React Server Components compatibility. Enhanced DataTableFacetedFilter with labelClassName prop for custom label styling. Improved faceted filter layout with better spacing and flex handling for icons and counts.
• Input - Added containerClassName prop for styling the input wrapper. Enhanced readOnly support to properly disable password toggle and step control buttons. Fixed placeholder styling with !important to prevent override issues.
• Input-group - Added forwardRef support to InputGroupTextarea for better form library integration and ref forwarding.
• Multi-select - Enhanced with container prop for portal customization. Improved value display with better overflow handling (nowrap instead of wrap). Fixed truncation logic to preserve React node content. Better tooltip behavior for truncated string values only. Improved type safety in handleSelect and handleDeselect callbacks.
• Stepper - Added icon support directly in step definitions with automatic fallback to passed icon prop. Enhanced active state with ring-3 styling and secondary color variants. Added secondaryOutline variant for inactive steps. Fixed button variant logic for better visual hierarchy.
• Radio-group - Added orientation prop with horizontal layout support using CSS grid columns. Fixed googly-eye visual alignment bug with indicator positioning by adjusting margin-top offset. Maintains backward compatibility with vertical orientation as default.
• Tags - Refactored imports to use named imports instead of default React import with namespace.
• Toggle-group - Added attached mode support (default true) for visually connected toggle buttons. Proper border-radius handling for first, middle, and last positions in attached groups. When attached is false, adds gap between items. Enhanced with Group context integration for sophisticated layout control. Includes new demo file showcasing attached mode feature.
• Typography - Added react-router-dom Link integration for seamless routing. Exported textVariants for external styling consistency. Improved List component spacing (reduced margins and improved item spacing). Better default text variant sizing.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r badge button card choicebox code-block code-block-dynamic combobox data-table input input-group kbd multi-select radio-group stepper tags toggle-group typography

2025-10-20 16:00

✨ New

• ButtonGroup - Added a flexible container component for grouping buttons and other form controls together. Supports horizontal and vertical orientations with automatic border and border-radius adjustments. Includes ButtonGroup, ButtonGroupText, ButtonGroupSeparator, and buttonGroupVariants exports. Seamlessly integrates with buttons, inputs, selects, dropdowns, and more.
• Empty - Added a comprehensive empty state component for displaying no-data scenarios. Features flexible layout with support for icons, images, avatars, titles, descriptions, and actions. Includes Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent exports with multiple display variants.
• Field - Added a sophisticated form field component system with responsive layout support. Provides vertical, horizontal, and responsive orientation modes with comprehensive field group management. Includes Field, FieldLabel, FieldTitle, FieldDescription, FieldError, FieldContent, FieldGroup, FieldLegend, FieldSeparator, and FieldSet exports for building accessible, well-structured forms.
• InputGroup - Added an advanced input grouping component with support for inline and block addons. Enables combining inputs with labels, buttons, icons, spinners, and tooltips in a unified, styled container. Includes InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, and InputGroupTextarea exports with automatic focus state management.
• Item - Added a versatile list item component for building data displays, settings panels, and navigation lists. Supports multiple variants (default, outline, muted), size options, and flexible content layouts with media support. Includes Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup, ItemSeparator, ItemHeader, and ItemFooter exports.
• Spinner - Added a simple, accessible loading spinner component using Lucide's Loader2Icon with proper ARIA attributes for screen readers.
• useCopyToClipboard Hook - Added a custom React hook for managing clipboard copy operations with automatic timeout and callback support. Exports useCopyToClipboard function with isCopied state and copyToClipboard method.

🚧 Updated

• AutoForm - Enhanced with Typography component integration for headings and text elements. Improved accessibility with better semantic structure for required field indicators and error messages. Updated ArrayWrapper, BooleanField, FieldWrapper, NumberField, and ObjectWrapper components.
• Banner - Added variant support with new bannerVariants export. Now supports default, accent, muted, and primary color schemes with automatic button text color adjustments based on variant.
• Breadcrumb - Added new BreadcrumbHeader component for consistent breadcrumb positioning in layouts. Integrates seamlessly with sidebar layouts and responsive designs.
• Checkbox - Major refactor with new variant system supporting default, primary, secondary, and outline styles. Fixed infinite loop issue with controlled checkbox state management. Added proper controlled/uncontrolled mode handling and exported checkboxVariants for styling consistency.
• CodeTabs - Enhanced to support both object-based codes and array-based items with JSX labels. Added new CodeTabItem type and items prop for more flexible tab configuration. Improved responsive design with horizontal scrolling on mobile and better tab spacing.
• Command - Removed unnecessary text-color styling from SVG icons in command items, allowing icons to inherit proper colors from parent contexts.
• CopyButton - Added children prop support, allowing the button to display custom content alongside the copy icon. Maintains backward compatibility with icon-only mode.
• DataTable - Improved faceted filter styling by removing gap classes and updating checkbox variant to default. Better visual consistency in filter dropdown menus.
• Dialog - Enhanced overlay with improved transparency and backdrop blur effect (changed from bg-black/80 to bg-black/40 backdrop-blur-xs). Added padding to close button for better hit area.
• Icons - Added 4 new AI coding assistant icons: CursorIcon, WindsurfIcon, ClineIcon, ClaudeDesktopIcon, and ClaudeCodeIcon (Anthropic logo).
• Kbd - Complete redesign with simplified styling system. Removed variant and size props in favor of a single, consistent design. Added new KbdGroup component for displaying keyboard shortcut combinations. Enhanced tooltip integration with automatic style adjustments.
• Sheet - Enhanced with size variants and improved accessibility. Added proper ARIA attributes and better keyboard navigation support.
• Slider - Minor styling improvements and accessibility enhancements.

🐛 Fixed

• Checkbox - Resolved infinite loop issue in controlled mode where state updates would trigger unnecessary re-renders. Fixed background color inconsistencies across different themes.
• Dialog/Credenza - Adjusted close button positioning and sizing for better accessibility and visual balance.
• RadioGroup - Fixed spacing issues in attached demo mode for better visual consistency.
• Registry Build - Resolved build issues with fumadocs registry generation, ensuring proper TypeScript analysis and dependency resolution.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r button-group empty field input-group item spinner auto-form banner breadcrumb checkbox code-tabs command copy-button data-table dialog icons kbd sheet slider use-copy-to-clipboard

2025-10-20 00:00

🚧 Updated

• use-shiki Hook - Fixed TypeScript type checking errors by adding @types/hast as a dev dependency. This resolves type inference issues when working with Shiki's syntax highlighting AST nodes.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r use-shiki

2025-09-09 14:00

✨ New

• Combobox - Added a searchable select input component with intelligent autocomplete functionality. Features include typeahead suggestions, creatable options support, keyboard navigation, and accessibility compliance. Exports Combobox function and ComboboxOption type interface.
• Group - Added a layout component for grouping related form elements together. Supports both attached mode (visually connected elements) and unattached mode (spaced elements) with context-aware styling. Exports Group component, useGroup hook, and type definitions.

🚧 Updated

• Button - Enhanced with Group context integration for seamless attached group styling. Buttons now automatically adjust border radius and borders when used within attached groups. Added 'use client' directive for React 18 compatibility.
• Input - Major enhancement with slot support including new InputStart and InputEnd components for icons and controls. Enhanced with Group context integration, improved focus states, and better accessibility. Added inputVariants export for styling consistency.
• Select - Enhanced with Group context integration for attached group styling. Select triggers now automatically adjust styling when used within attached groups. Added 'use client' directive.
• Card - Improved sizing system with more practical padding values (reduced from larger px/py values to more reasonable spacing). Enhanced CardTitle and CardDescription components with automatic Typography component integration. Added CardProps interface export and improved shadow styling from shadow-shadow-elevated to shadow-elevated.
• Choicebox - Refined visual styling with improved hover states (hover:shadow-elevated) and enhanced sizing options for better form integration. Updated border styling and spacing improvements.
• Sheet - Enhanced with Typography integration for titles, improved overlay transparency (from bg-black/80 to bg-black/50), adjusted padding values, and increased close button size for better accessibility.
• Tabs - Updated underline variant styling, changing background from muted to background color for improved visual consistency.
• Typography - Enhanced Heading component with forward ref support for better React integration and DOM manipulation capabilities.
• Label - Updated layout from flex items-center gap-2 to flex gap-1.5 flex-col for improved form field alignment and spacing.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r combobox group button input select card choicebox sheet tabs typography label