2026-03-16 13:00

✨ New

• EditableText - New inline-editing component for text and headings. Click-to-edit with auto-sized input that matches the text width, keyboard support (Enter to confirm, Escape to cancel), error state with message, read-only mode, and optional auto-focus. Supports as="heading" with headingLevel 1–5.
• KeyValueField - New form component for managing dynamic lists of key-value pairs. Supports add/delete rows, duplicate key detection, per-row error messages, maxItems limit, and optional Combobox mode for keys or values via keyFieldProps/valueFieldProps. Exports KeyValueField, KeyValuePair, KeyValueFieldConfig, and KeyValueFieldError.
• input-utils - New utility library for dynamic input list patterns. Exports findDuplicateIndices, keyValuePairsSchema (Zod schema with duplicate/pattern/length validation), getKeyValueDiff (diff utility for change tracking), useInputListFocus (focus management for dynamic rows), useMemoizedArray (stable reference optimization), and useUndoRemoval (soft-delete with timed confirm).

🚧 Updated

• Combobox - Added start prop for a customizable start-slot icon (defaults to a search icon; pass null to hide). Added createLabel prop to customize the noun in the "Type to create a new…" placeholder. Creatable UX improved: the create action is now a persistent footer button (disabled when input is empty or matches an existing option) instead of an inline CommandItem.
• Input - InputProps interface is now exported, enabling type-safe composition when building custom input wrappers.
• DataTable - DataTableColumnHeader sort trigger updated to use the secondary-ghost button variant for improved visual consistency.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r editable-text key-value-field combobox input data-table

2026-03-12 12:00

🚨 Breaking Changes

• Typography - The Link component's router integration now uses @tanstack/react-router instead of react-router-dom. If you use <Link as={ReactRouterLink} to="...">, update to <Link as={TanStackLink} to="..."> and change the import to import { Link as TanStackLink } from '@tanstack/react-router'. The to prop type also changed from To (react-router-dom) to string.

🚧 Updated

• JSONField - Added type="button" to internal action buttons to prevent unintended form submissions when JSONField is used inside a <form> element.

Update Script

To update existing components in your project:

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

2026-03-09 16:30

✨ New

• JSONField - New form component for editing JSON data against a JSON Schema. Renders a smart form UI (text inputs, number inputs, checkboxes, dropdowns, nested object/array fields) derived from a JSONSchemaType schema, with a toggle to switch to a raw JSON editor. Supports maxDepth, showPlaceholder, customFields for Combobox overrides, onBlur for react-hook-form integration, and full read-through of oneOf, enum, format, and array item schemas. Exports JSONField component and types JSONValue, JSONSchemaType, JSONSchemaConst, JSONObject, CustomFieldConfig.

Update Script

To update existing components in your project:

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

2026-02-23 16:44

✨ New

• CountDot - New indicator component that displays a numeric count as a colored circular badge. Supports sm, md, and lg sizes, all semantic color variants, and a stacked prop for use inside DotGroup.
• StatusDot - New indicator component for visualizing status as a pulsing or static colored dot. Supports xxs–lg sizes, all semantic color variants, pulsing animation, and a stacked prop for grouped layouts.
• StatusBadge - New composite badge that combines a StatusDot (or animated Spinner for transitional states) with a label. Supports success, info, warning, error, disabled, starting, and stopping variants in sm, md, and lg sizes.
• DotGroup - New container component for grouping StatusDot and CountDot indicators with automatic stacking styles and overflow support. Can be used standalone or anchored to a content element with configurable position (top-right, bottom-left, etc.).
• DataTableFilter - New filter UI component for data tables. Renders a filter trigger, active filter pills with operator selectors, and a clear action. Supports text, option, and multiOption filter types with full keyboard navigation and optional TanStack Table integration.
• useDataTableFilter - New hook for managing DataTableFilter state. Provides filters, actions (addFilter, removeFilter, setFilterValues, addFilterValue, removeFilterValue, setFilterOperator, removeAllFilters), and optional controlled mode via value/onValueChange. Automatically syncs filter state to a TanStack Table instance when table is provided.
• Command - Added submenu support via three new exports: CommandSub (context provider + Popover wrapper), CommandSubTrigger (item that opens the submenu), and CommandSubContent (popover content for the nested command list).
• Separator - Added variant prop (default, subtle, strong) for theme-aware divider styling. Exported separatorVariants CVA and SeparatorVariant type.
• Utils - Added shared indicator types and styles: SemanticVariant, DotSize, StackableProps, dotColorVariants, and dotStackedVariants. These are used internally by StatusDot, CountDot, and DotGroup.
• filter-utils - New utility module exporting filter types (FilterType, FilterModel, FiltersState, FilterOperatorMap), operator configs (textFilterOperators, optionFilterOperators, multiOptionFilterOperators), and filter functions (textFilterFn, optionFilterFn, multiOptionFilterFn, createFilterFn, getDefaultOperator, getOperatorsForType, determineNewOperator) for use with DataTableFilter and useDataTableFilter.

🚨 Breaking Changes

• BadgeGroup - Refactored from an items-based API to a children composition pattern. The items: BadgeItem[] prop (and the BadgeItem type) have been removed. The defaultVariant prop has been removed. badgeSize has been renamed to size. overflowVariant has been renamed to variant. The renderOverflowContent callback signature changed from (overflowItems: BadgeItem[]) => ReactNode to (overflowChildren: ReactNode[]) => ReactNode. Migration: render <Badge> components directly as children instead of passing an items array.

🚧 Updated

• Badge - Improved text contrast for colored variants: primary, secondary, accent, and destructive variants now use text-inverse (white on dark backgrounds). info-inverted, success-inverted, and warning-inverted variants use text-info-foreground / text-success-foreground / text-warning-foreground for better WCAG compliance.
• Banner - Updated secondary, accent, and primary variants to use text-inverse for improved text contrast on dark backgrounds.
• Button - Updated accent and destructive variants to use text-inverse for improved text contrast.
• Checkbox - Updated checked state for primary and secondary variants to use text-inverse for improved icon contrast.
• CodeComparison - Updated text selection highlight to use text-inverse for consistent contrast with the bg-primary selection background.
• CopyButton - Updated primary and secondary variants to use text-inverse for improved contrast.
• Sonner - Updated toast action button to use text-inverse for improved contrast against the bg-primary background.
• Tooltip - Updated tooltip content text to use text-inverse for improved contrast against the bg-primary background.
• Popover - Fixed side prop not being forwarded to the underlying Radix PopoverContent, enabling explicit side control.
• Theme (CSS) - Improved light mode semantic background tokens: background-*-subtle tokens (success, warning, error, informative) now use -100 scale (previously -50) for better visual contrast. Updated foreground tokens (primary-foreground, secondary-foreground, brand-foreground, destructive-foreground, success-foreground, warning-foreground, info-foreground) for WCAG-compliant contrast ratios. Added new --color-divider-default, --color-divider-subtle, --color-divider-strong, and --color-divider-invert tokens. Extended alpha color scales for indigo, primary-brand, dark-blue, red, blue, green, and yellow with 700–900 steps.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r badge-group badge banner button checkbox code-comparison command copy-button count-dot data-table-filter dot-group popover separator sonner status-badge status-dot tooltip

2026-02-23 11:11

✨ New

• usePortalContainer - New hook providing a React context for controlling which DOM element portal-based components render into. Wrap your component tree with PortalContainerProvider to isolate all nested portal content (dialogs, dropdowns, tooltips, etc.) to a specific container element — useful for shadow DOM, CSS isolation, and custom stacking context scenarios.

🚧 Updated

• AlertDialog - Portal content now automatically renders into the nearest PortalContainerProvider context when no explicit container prop is provided. Existing container prop usage is unchanged.
• Dialog - Portal content now automatically renders into the nearest PortalContainerProvider context when no explicit container prop is provided. Existing container prop usage is unchanged.
• DropdownMenu - Portal content now automatically renders into the nearest PortalContainerProvider context when no explicit container prop is provided. Existing container prop usage is unchanged.
• Popover - Portal content now automatically renders into the nearest PortalContainerProvider context when no explicit container prop is provided. Existing container prop usage is unchanged.
• Select - Portal content now automatically renders into the nearest PortalContainerProvider context when no explicit container prop is provided. Existing container prop usage is unchanged.
• Sheet - Portal content now automatically renders into the nearest PortalContainerProvider context when no explicit container prop is provided. Existing container prop usage is unchanged.
• Tooltip - Portal content now automatically renders into the nearest PortalContainerProvider context when no explicit container prop is provided. Existing container prop usage is unchanged.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r alert-dialog dialog dropdown-menu popover select sheet tooltip use-portal-container

2026-02-03 09:21

✨ New

• Utils - Added common portal component types for standardized prop definitions. Introduced PortalRootProps for controlled open state (open, defaultOpen, onOpenChange), ModalRootProps extending PortalRootProps with modal mode control, FocusScopeContentProps for auto-focus behavior (onOpenAutoFocus, onCloseAutoFocus), PortalContentProps combining focus scope with container prop for inline rendering, and FixedPositionContentProps extending PortalContentProps with showOverlay prop for modal overlays. These types provide a single source of truth for portal components used in visual regression testing.

🚧 Updated

• Alert-dialog - Updated AlertDialogContent to use common FixedPositionContentProps type via Pick utility for container, showOverlay, and onOpenAutoFocus props.
• Combobox - Updated ComboboxProps to use common PortalRootProps for defaultOpen prop and PortalContentProps for container prop via Pick utilities. Added support for controlled defaultOpen state.
• Command - Updated CommandDialog to use common FixedPositionContentProps type via Pick utility for showOverlay, container, and onOpenAutoFocus props.
• Context-menu - Updated ContextMenuContent to use common PortalContentProps type via Pick utility for container and onOpenAutoFocus props.
• Credenza - Updated CredenzaProps to use common FixedPositionContentProps type via Pick utility for container, showOverlay, and onOpenAutoFocus props.
• Dialog - Updated DialogContentProps to use common FixedPositionContentProps type via Pick utility for container, showOverlay, and onOpenAutoFocus props.
• Drawer - Updated DrawerContent to use common FixedPositionContentProps type via Pick utility for container, showOverlay, and onOpenAutoFocus props.
• Dropdown-menu - Updated DropdownMenuContent to use common PortalContentProps type via Pick utility for container and onOpenAutoFocus props.
• Hover-card - Updated HoverCardContent to use common PortalContentProps type via Pick utility for container and onOpenAutoFocus props.
• Menubar - Updated MenubarContent to use common PortalContentProps type via Pick utility for container and onOpenAutoFocus props.
• Multi-select - Updated SimpleMultiSelectProps to use common PortalRootProps and PortalContentProps types via Pick utilities for controlled state (open, defaultOpen, onOpenChange) and portal rendering (container, onOpenAutoFocus). Added support for controlled open state and auto-focus behavior.
• Popover - Updated PopoverContent to use common PortalContentProps type via Pick utility for container and onOpenAutoFocus props. Added onOpenAutoFocus support for auto-focus behavior when popover opens.
• Select - Updated SelectContent to use common PortalContentProps type via Pick utility for container prop.
• Sheet - Updated SheetContent to use common FixedPositionContentProps type via Pick utility for container, showOverlay, and onOpenAutoFocus props.
• Tooltip - Updated TooltipContent to use common PortalContentProps type via Pick utility for container and onOpenAutoFocus props.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r alert-dialog combobox command context-menu credenza dialog drawer dropdown-menu hover-card menubar multi-select popover select sheet tooltip utils

2026-02-02 15:45

🚧 Updated

• Button - Updated visual styling for primary and secondary variants. The primary variant now uses surface-secondary tokens (previously surface-primary), and secondary variant now uses surface-primary tokens (previously surface-neutral-dark). All existing variant names remain compatible.
• Copy-button - Synchronized variant styling with Button component updates. The primary variant now uses secondary color scheme, and secondary variant uses primary color scheme. All existing variant names remain compatible.
• Banner - Enhanced close button customization by adding ButtonVariants support to BannerClose component. Updated default close button to use inverse-ghost variant and icon-sm size. Added gap-4 spacing between banner content elements.
• Stepper - Updated inactive step button styling from secondary variant to outline variant for improved visual hierarchy in step progression.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r button copy-button banner stepper

2026-01-28 14:21

✨ New

• BadgeGroup - Added a component for displaying groups of badges with overflow handling. Shows a configurable number of visible badges (default: 3), with overflow items displayed in a tooltip. Supports gap variants (none, xs, sm, md, lg), wrapping, custom badge sizes, variant configuration, and custom overflow tooltip rendering. Exports BadgeGroup, BadgeItem type, BadgeGroupProps, and badgeGroupVariants.
• ListCard - Added a card component system designed for list and grid layouts with slot-based composition. Includes ListCard root component with click handling, ListCardHeader with start/end slots and auto-truncation, ListCardMeta for secondary info, ListCardBody for content, ListCardDescription with line-clamping (1-3 lines), and ListCardFooter with start/end slots for actions. Automatically wraps string children in Typography components.
• ListView - Added a horizontal list layout component with three-column grid system. Features ListViewStart slot for primary content with title/description props, ListViewIntermediary slot for badges/tags (hidden on mobile), and ListViewEnd slot for single action. Includes ListViewGroup container for grouped items with shared borders. Supports click handling, keyboard navigation, and multiple variants (standard, elevated, outlined, ghost, grouped). Automatically wraps string children in Typography components.

🚧 Updated

• Utils - Enhanced wrapStringChild utility function to support string child wrapping with Typography components. Changed file extension from .ts to .tsx to support JSX rendering for component composition patterns.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r badge-group list-card list-view utils

2026-01-21 22:40

🚧 Updated

• Border Color Specificity - Enhanced border color specificity across 20 components by adding !important flags to border color utilities (e.g., border-input → !border-input) to ensure proper cascade precedence over conflicting global styles from external libraries. Components updated: Alert, Badge, Button, Calendar, Choicebox, Code-block, Code-editor, Code-tabs, Create-layout, Input, Input-group, Input-otp, Kbd, List-layout, Multi-select, Radio-group, Select, Tabs, Textarea, Toggle.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r alert badge button calendar choicebox code-block code-editor code-tabs create-layout input input-group input-otp kbd list-layout multi-select radio-group select tabs textarea toggle

2026-01-21 22:02

✨ New

• Alert - Added warning and success variants for expanded alert styling options. The warning variant uses blue color scheme for important warnings and cautionary messages, while success variant uses green color scheme for successful operations and confirmations.
• Button - Added icon prop for displaying icons alongside button text with automatic gap spacing. Icons are properly sized based on the button size variant (xs: 12px, sm: 14px, md: 16px, lg: 20px).

🚧 Updated

• Alert - Enhanced destructive variant styling with improved border transparency, background color, and better link color inheritance for dark mode support.
• Button - Improved icon sizing system with size-specific icon dimensions instead of global sizing. Icon-only button sizes now use appropriately scaled icons (icon-xs: 14px, icon-sm: 16px, icon: 20px, icon-lg: 24px). Exported ButtonProps type for better TypeScript integration.
• Badge - Improved icon sizing system with consistent descendant selector pattern ([&_svg]:size-*) matching Button component. Added dynamic padding adjustments when icons are present using has-[>svg]:px-* modifiers for better visual balance across all size variants (sm, md, lg). Fixed React.Children.only error when using asChild prop by implementing conditional rendering that passes single child element to Radix UI's Slot component.
• Button - Fixed React.Children.only error when using asChild prop with icon prop by implementing conditional rendering logic. In asChild mode, only children are rendered (icons must be included in children); in normal mode, both children and icon prop are supported. Enhanced icon sizing with size-specific dimensions for all button variants and icon-only sizes, ensuring proper scaling across xs (12px), sm (14px), md (16px), lg (20px), and icon-only variants (icon-xs: 14px, icon-sm: 16px, icon: 20px, icon-lg: 24px).

Update Script

To update existing components in your project:

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

2026-01-15 10:15

🚨 Breaking Changes

• Accordion - Renamed default variant from default to simple. Migration: Update <Accordion variant="default"> to <Accordion variant="simple"> or remove the variant prop (defaults to simple).
• Alert - Renamed default variant from default to info. Migration: Update <Alert variant="default"> to <Alert variant="info"> or remove the variant prop (defaults to info).
• Badge - Renamed default variant from default to neutral, default-inverted to neutral-inverted, and default-outline to neutral-outline. Renamed default size from default to md. Migration: Update <Badge variant="default"> to <Badge variant="neutral">, variant="default-inverted" to variant="neutral-inverted", variant="default-outline" to variant="neutral-outline", and size="default" to <Badge> with no size prop (defaults to md).
• Banner - Renamed default variant from default to secondary. Migration: Update <Banner variant="default"> to <Banner variant="secondary"> or remove the variant prop (defaults to secondary).
• Card - Renamed variant from default to standard. Migration: Update <Card variant="default"> to <Card variant="standard"> or simply remove the variant prop (card defaults to elevated variant).
• CodeBlock - Renamed default size from default to md, default width from default to md, and default maxHeight from default to md. Migration: Update size="default" to size="md", width="default" to width="md", and maxHeight="default" to maxHeight="md", or remove these props (all default to md).
• CodeTabs - Renamed default variant from default to standard. Migration: Update <CodeTabs variant="default"> to <CodeTabs variant="standard"> or remove the variant prop (defaults to standard).
• Command - Renamed default variant from default to elevated and default size from default to md. Migration: Update <Command variant="default"> to <Command variant="elevated"> and size="default" to size="md", or remove these props (defaults to elevated and md).
• CopyButton - Renamed default variant from default to primary and default size from default to md. Migration: Update <CopyButton variant="default"> to <CopyButton variant="primary"> and size="default" to size="md", or remove these props (defaults to primary and md).
• Dialog - Renamed default variant from default to standard. Migration: Update <DialogContent variant="default"> to <DialogContent variant="standard"> or remove the variant prop (defaults to standard).
• Empty - Renamed default variant from default to transparent. Migration: Update <EmptyMedia variant="default"> to <EmptyMedia variant="transparent"> or remove the variant prop (defaults to transparent).
• Form - Renamed default layout from default to vertical, default spacing from default to md, and FormSection default variant from default to standard. Migration: Update layout/spacing/variant props from default to vertical/md/standard, or remove these props (defaults to vertical, md, and standard).
• Input - Renamed default variant from default to standard and default container layout from default to standard. Migration: Update <Input variant="default"> to <Input variant="standard"> or remove the variant prop (defaults to standard).
• Kbd - Renamed default variant from default to filled. Migration: Update <Kbd variant="default"> to <Kbd variant="filled"> or remove the variant prop (defaults to filled).
• Sidebar - Renamed SidebarMenuButton default variant from default to filled and default size from default to md. Migration: Update <SidebarMenuButton variant="default"> to <SidebarMenuButton variant="filled"> and size="default" to size="md", or remove these props (defaults to filled and md).
• Skeleton - Renamed default variant from default to rounded, default size from default to md, and removed default width option (use md instead). Migration: Update <Skeleton variant="default"> to <Skeleton variant="rounded">, size="default" to size="md", and width="default" to width="md", or remove these props (defaults to rounded, md size, and md width).
• Table - Renamed default variant from default to standard and default size from default to md. Migration: Update <Table variant="default"> to <Table variant="standard"> and size="default" to size="md", or remove these props (defaults to standard and md).
• Toggle - Renamed default variant from default to ghost and default size from default to md. Migration: Update <Toggle variant="default"> to <Toggle variant="ghost"> and size="default" to size="md", or remove these props (defaults to ghost and md).
• Typography - Renamed default variant from default to body. Migration: Update <Text variant="default"> to <Text variant="body"> or remove the variant prop (defaults to body).

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r accordion alert badge banner card code-block code-tabs command copy-button dialog empty form input kbd sidebar skeleton table toggle typography

2026-01-14 16:00

🚨 Breaking Changes

• Badge - Removed color alias variants (green, orange, blue, red, indigo, purple, yellow, cyan, teal, rose, emerald, amber, gray). These convenience aliases have been removed in favor of using semantic variants. Migration: use semantic variants like success (for green), warning (for orange/yellow), info (for blue/cyan), destructive (for red/rose), accent (for indigo/purple), or simple/neutral for grey tones.
• Button - Renamed default variant from default to primary. Update all <Button variant="default"> to <Button> with no variant as primary is the default value.
• Button - Renamed default size from default to md. Update all <Button size="default"> to <Button>.
• Button - Reorganized variant structure: primary now uses new primary theme tokens ("blurple", formerly brand color which was too similar to destructive), secondary is now a filled variant (was outline).
• Input - Renamed default size from default to md. Update all <Input size="default"> to <Input />.

🚧 Updated

• Badge - Updated styling for semantic variants with improved design token usage. Variant default now uses bg-background-inverse-subtle, simple variants updated with secondary text colors, warning now uses inverse text for better contrast. All existing semantic variant names remain functional.
• Button - Major variant system reorganization while maintaining all core functionality. Added new compound variants: secondary-outline, secondary-ghost, and reorganized existing compound variants for better semantic naming. All variants now use enhanced semantic design tokens with improved hover, active, and disabled states. Better visual hierarchy with primary actions using surface-primary tokens and secondary actions using neutral tokens.
• Tabs - Added disabled prop support to TabsTrigger component for disabling individual tabs. Disabled tabs receive pointer-events-none styling automatically.
• Toggle-group - Updated outline variant styling with improved semantic tokens. Outline variant now includes border wrapper with some padding. Active state uses primary surface tokens for stronger visual feedback.
• Theme - Updated CSS design tokens including background base color change (#fafafa → #f5f5f5), focus ring color now uses primary brand (--color-ring changed to --color-primary-600), added new surface brand subtle variants (--color-surface-brand-subtle, --color-surface-brand-subtle-hover), added destructive alpha variants (--color-destructive-alpha-subtle/default/strong), reorganized outline primary tokens, and removed deprecated --color-surface-accent in favor of brand surface tokens.

Update Script

To update existing components in your project:

yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r badge button tabs toggle-group theme

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