# Iconiq UI > Detailed AI-readable product index for Iconiq UI ## Product Summary Iconiq UI is an open-source React component library built around the shadcn registry workflow. Browse motion-powered UI primitives, install them as local files, and adapt them directly inside modern interfaces. ## Discovery Endpoints - Overview: https://iconiqui.com/llms.txt - Full index: https://iconiqui.com/llms-full.txt - JSON catalog: https://iconiqui.com/ai-index.json ## Guides - Overview URL: https://iconiqui.com Summary: Homepage with the full live component playground and the primary installation path for the registry. - Introduction URL: https://iconiqui.com/introduction Summary: Product overview, design principles, and the delivery model behind the Iconiq component library. - Installation URL: https://iconiqui.com/installation Summary: Installation guide for the shadcn registry flow, direct registry JSON URLs, and sample component entries. - MCP URL: https://iconiqui.com/mcp Summary: MCP setup guide for connecting Iconiq to AI coding tools through the shadcn registry workflow. ## Component Catalog ## Prompt Box - URL: https://iconiqui.com/blocks/prompt-box - Package: @iconiq/prompt-box - Install: npx shadcn@latest add @iconiq/prompt-box - Registry JSON: https://iconiqui.com/r/prompt-box.json - Summary: Expandable prompt surface that grows from a compact pill into a textarea with model controls, attachment action, and send or voice affordances. - Dependencies: @base-ui/react, motion, lucide-react ### Documented APIs - PromptInput: Expandable prompt surface that grows from a compact pill into a textarea with model controls, attachment action, and send or voice affordances. - onSubmit (type: (value: string) => void): Called with the trimmed prompt when the user presses Enter without Shift or clicks the send button. - placeholder (type: string): Placeholder copy for the collapsed and expanded prompt field. - menuActions (type: PromptMenuAction[]): Optional dropdown actions rendered above setting groups. Each action has `label`, optional `icon`, and `onSelect`. - plusMenuItems (type: PromptPlusMenuItem[]): Items for the plus-button add menu. Actions use `onSelect` with optional `shortcut`. Submenus pass `options` and `onOptionSelect`. - settingGroups (type: PromptSettingGroup[]): Grouped settings for the footer menu. Use `display: "featured"` for a selected summary row, `display: "submenu"` for a value row with flyout, and `moreMenuLabel` for an extra picker row (e.g. More models). Options support optional `description` text. - settings (type: Record): Controlled map of selected values keyed by setting group id. - defaultSettings (type: Record): Initial selected values for uncontrolled usage, keyed by setting group id. - onSettingsChange (type: (settings: Record) => void): Called when the user picks a new option in any settings group. ## Button - URL: https://iconiqui.com/buttons-and-actions/button - Package: @iconiq/b-button - Install: npx shadcn@latest add @iconiq/b-button - Registry JSON: https://iconiqui.com/r/b-button.json - Summary: Base UI button with the shadcn-style variant recipe, spring press feedback, optional intrinsic width animation, and Motion ripple layer. - Dependencies: @base-ui/react, motion, class-variance-authority ### Documented APIs - Button: Base UI button with the shadcn-style variant recipe, spring press feedback, optional intrinsic width animation, and Motion ripple layer. - variant (type: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link", default: default): Chooses the visual recipe from the exported buttonVariants map. - linkUnderline (type: "motion" | "static", default: "motion" (when variant is link)): Link variant only. motion keeps foreground text with a grey baseline underline that fills darker on hover. static uses the same text size as other variants with hover:underline. - size (type: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg", default: default): Controls the shadcn-style height, padding, gap, radius, and icon sizing for text and icon-only buttons. - animateSize (type: boolean, default: false): Animates the button width with a spring as its intrinsic content changes, which is useful for labels like Continue, Saving..., and Saved on the same control. - disableRipple (type: boolean, default: false): Skips the pointer ripple when you want only the press-state feedback. Link buttons also skip the ripple by default to avoid a contained splash on text-only actions. - type (type: "button" | "submit" | "reset", default: button): Passed directly to the underlying motion.button so the component does not submit forms accidentally by default. - children (type: ReactNode): Content rendered above the ripple layer inside a z-10 span. - icon (type: ReactNode): Optional icon rendered inline with the label. Nested SVGs inherit the built-in 1rem sizing utility. - iconPosition (type: "start" | "end", default: "start"): Chooses whether the optional icon renders before or after the button text inside the same inline content row. - className (type: string): Merged after the generated CVA classes, making it the main escape hatch for one-off layout changes. - disabled (type: boolean): Native disabled state. It also prevents ripple creation because the pointer-down handler exits early. - buttonVariants: The CVA recipe exported alongside the component so matching button classes can be reused on links or custom wrappers. - variant (type: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link", default: "default"): Visual recipe passed to the CVA helper when composing classes outside the Button component. - size (type: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg", default: "default"): Size token passed to the CVA helper for text and icon-only button recipes. - className (type: string): Optional classes merged after the generated variant and size classes. ## Button Group - URL: https://iconiqui.com/buttons-and-actions/button-group - Package: @iconiq/button-group - Install: npx shadcn@latest add @iconiq/button-group - Registry JSON: https://iconiqui.com/r/button-group.json - Summary: Compact bordered action button with muted idle text, darker hover text, optional ripple feedback, and shadcn-style size controls. - Dependencies: @base-ui/react, motion, class-variance-authority ### Documented APIs - Button: Compact bordered action button with muted idle text, darker hover text, optional ripple feedback, and shadcn-style size controls. - children (type: ReactNode, required): Button content rendered inside an inline span so icon-and-label pairs keep consistent spacing across sizes. - className (type: string): Merged onto the root button. Use it for local width, spacing, or surface overrides. - size (type: "sm" | "md" | "lg", default: "md"): Compacts or expands the control while keeping the same toolbar-style border and hover treatment. - disableRipple (type: boolean, default: false): Turns off the click ripple while preserving the rest of the hover and focus styling. - showBorder (type: boolean, default: true): Removes the outer border when set to false, which is useful for quieter toolbar-style actions. - IconButton: Icon-only toolbar action that shares the same compact border, muted idle tone, and optional ripple behavior as Button. - children (type: ReactNode, required): Icon content rendered inside the inline content span. SVG children inherit the built-in size utilities for the active size variant. - className (type: string): Merged onto the icon button root for size or surface overrides. - size (type: "sm" | "md" | "lg", default: "md"): Controls the square footprint of the icon button without changing its general look and feel. - disableRipple (type: boolean, default: false): Disables the click ripple for quieter toolbar actions. - showBorder (type: boolean, default: true): Removes the outer border when set to false so the icon action can sit more quietly beside a borderless group. - ButtonGroup: Slot-aware flex wrapper for arranging adjacent controls with horizontal or vertical rounding rules. - children (type: ReactNode, required): Buttons, icon buttons, ButtonGroupText, ButtonGroupSeparator, ButtonGroupItems, or any other data-slot controls you want to keep together. - orientation (type: "horizontal" | "vertical", default: "horizontal"): Chooses the grouped rounding and shared-border direction used by buttonGroupVariants. - className (type: string): Merged onto the outer group. Use it for wrapping, alignment, or local spacing overrides. - ButtonGroupText: Non-interactive text segment for labeling a group without leaving the shared button-group surface. - children (type: ReactNode, required): Short label or inline content rendered inside the grouped text segment. - render (type: useRender render prop): Optional Base UI render override when you need a different element while keeping the same merged props. - className (type: string): Merged with the default muted bordered text segment classes. - ButtonGroupSeparator: Separator segment for splitting labels, buttons, inputs, and grouped actions inside ButtonGroup. - orientation (type: "horizontal" | "vertical", default: "vertical"): Controls the separator axis. Vertical separators are the default for horizontal button groups. - className (type: string): Merged with the self-stretching separator classes for custom color or spacing. - ButtonGroupItems: Segmented button shell that converts valid child elements into compact internal buttons with muted idle text and darker hover states. - children (type: ReactNode, required): Pass plain button-like elements as children. Their props and children are hoisted into the internal motion buttons rendered by the group. - className (type: string): Merged onto the outer segmented wrapper for width or surface overrides. - size (type: "sm" | "md" | "lg", default: "md"): Sets the shared height, padding, and typography of the grouped buttons. - showDividers (type: boolean, default: true): Removes the internal separator lines and the outer wrapper border when set to false, then switches the group to a smoother shared hover surface. - disableRipple (type: boolean, default: false): Turns off the ripple for every internal button rendered by the group. - SegmentedControl: String-based segmented selector with compact sizing, keyboard support, muted idle labels, and a spring-driven selected indicator. - options (type: string[], required): Ordered list of visible segments. The first option becomes the uncontrolled initial selection when value is not provided. - value (type: string): Controlled selected option. When provided, the internal state syncs to this prop through an effect. - onChange (type: (value: string) => void): Called with the selected option whenever a segment is pressed. - className (type: string): Merged onto the segmented wrapper for width, alignment, or spacing overrides. - layoutId (type: string, default: "segmented-indicator"): Motion layout id used by the selected indicator. Override it when you render multiple segmented controls on the same page and want isolated indicator motion. - size (type: "sm" | "md" | "lg", default: "md"): Controls the overall density of the segmented control shell and each segment inside it. - Motion and interaction: Each export keeps the same tactile feel, but the default presentation is now much more compact and toolbar-like. ## Flux Button - URL: https://iconiqui.com/buttons-and-actions/flux-button - Package: @iconiq/flux-button - Install: npx shadcn@latest add @iconiq/flux-button - Registry JSON: https://iconiqui.com/r/flux-button.json - Summary: Async button with idle, loading, and success states, plus b-button visual variants. - Dependencies: @base-ui/react/button, class-variance-authority, lucide-react, motion ### Documented APIs - FluxButton: Async button with idle, loading, and success states, plus b-button visual variants. - idleLabel (type: string, required): Label shown before the action starts. - loadingLabel (type: string, required): Label shown with the built-in loader while onAction is in progress. - successLabel (type: string, required): Label shown after onAction resolves. - successIcon (type: React.ReactNode): Optional icon shown on success. Pass any node, such as a Lucide checkmark. Omit for text-only success. - onAction (type: () => void | Promise, required): Runs when the button is pressed, drives loading and success states, then returns to idle after successHold. - variant (type: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link", default: default): Visual style variant. Matches the b-button variant set. - successHold (type: number, default: 1000): Milliseconds to hold the success state before returning to the idle label. - size (type: "xs" | "sm" | "default" | "lg", default: default): Height and horizontal padding preset. Matches b-button sizes. - type (type: "button" | "submit", default: button): Native button type. Use submit inside forms; defaults to button so the control does not submit unless you opt in. - disabled (type: boolean, default: false): Native disabled state. Also blocks the action flow while true. - className (type: string): Optional class names merged onto the root button element. - onClick (type: React.MouseEventHandler): Native click handler forwarded to the underlying button. ## Icon Bar - URL: https://iconiqui.com/buttons-and-actions/icon-bar - Package: @iconiq/icon-bar - Install: npx shadcn@latest add @iconiq/icon-bar - Registry JSON: https://iconiqui.com/r/icon-bar.json - Summary: Horizontal toolbar of compact icon chips. Hover or focus previews labels; clicking selects one item and keeps it expanded. - Dependencies: @base-ui/react/toggle, @base-ui/react/toggle-group, motion, lucide-react ### Documented APIs - IconBar: Horizontal toolbar of compact icon chips. Hover or focus previews labels; clicking selects one item and keeps it expanded. - value (type: string | null): Controlled selected item value. Pair with onValueChange for fully controlled selection. - defaultValue (type: string | null): Optional initial selected item when uncontrolled. Omit to start with every chip collapsed until the user clicks one. - onValueChange (type: (value: string | null) => void): Called when selection changes. Receives null when the active chip is clicked again to deselect. - className (type: string): Optional class names applied to the outer flex container. - children (type: React.ReactNode): One or more IconBarItem elements rendered in a single row with consistent spacing. - IconBarItem: Individual pill chip with a Lucide icon and animated label reveal on hover, focus, or selection. - icon (type: LucideIcon, required): Lucide icon component rendered inside the fixed 36px icon well. - label (type: string, required): Short text revealed when the chip expands. Keep labels concise so the width animation stays smooth. - value (type: string): Selection identity for this chip. Defaults to label when omitted. - onClick (type: (event: React.MouseEvent) => void): Optional click handler fired after selection updates. - disabled (type: boolean, default: false): Disables interaction, hover preview, and selection. - className (type: string): Optional class names merged onto the chip button. ## Toggle - URL: https://iconiqui.com/buttons-and-actions/toggle - Package: @iconiq/toggle - Install: npx shadcn@latest add @iconiq/toggle - Registry JSON: https://iconiqui.com/r/toggle.json - Summary: Two-state button with spring press feedback and a muted fill that bounces in when pressed. - Dependencies: @base-ui/react, class-variance-authority, motion ### Documented APIs - Toggle: Two-state button with spring press feedback and a muted fill that bounces in when pressed. - pressed (type: boolean): Controlled pressed state. Pass this when the parent owns whether the toggle is on. - defaultPressed (type: boolean, default: false): Initial pressed state for uncontrolled usage. The component manages future toggles internally. - onPressedChange (type: (pressed: boolean) => void): Called with the next pressed state whenever the toggle is activated or deactivated. - variant (type: "default" | "outline", default: "default"): Visual treatment. Outline adds a border for toolbar or segmented layouts. - size (type: "default" | "sm" | "lg", default: "default"): Height, padding, and icon sizing preset for compact toolbars or larger action rows. - disabled (type: boolean): Disables interaction and dims the control while preserving its pressed appearance. - className (type: string): Merged onto the root button for local spacing, width, or color overrides. - Motion and interaction behavior: Pressed state drives a horizontal liquid wipe, a one-shot light sheen, and tactile icon motion. ## Toggle Group - URL: https://iconiqui.com/buttons-and-actions/toggle-group - Package: @iconiq/toggle-group - Install: npx shadcn@latest add @iconiq/toggle-group - Registry JSON: https://iconiqui.com/r/toggle-group.json - Summary: Root container for a connected set of toggle buttons with shared variant, size, spacing, and orientation settings. - Dependencies: @base-ui/react, class-variance-authority, motion ### Documented APIs - ToggleGroup: Root container for a connected set of toggle buttons with shared variant, size, spacing, and orientation settings. - type (type: "single" | "multiple", default: "multiple"): Selection mode. Multiple allows several active items by default; single keeps one pressed item at a time. - value (type: string | string[]): Controlled selection. Pass a string for single mode or a string array for multiple mode. - defaultValue (type: string | string[]): Initial selection for uncontrolled usage in the matching single or multiple mode. - onValueChange (type: (value: string | string[]) => void): Called with the next selection whenever an item is pressed or released. - variant (type: "default" | "outline", default: "default"): Shared visual treatment applied to every item unless an item overrides it locally. - size (type: "default" | "sm" | "lg", default: "default"): Shared height, padding, and icon sizing preset for all group items. - spacing (type: number, default: 1): Gap between items in spacing units. Defaults to 1 (4px). Set to 0 to remove the gap. - orientation (type: "horizontal" | "vertical", default: "horizontal"): Layout direction for the group. Vertical stacks items and adjusts connected border handling. - disabled (type: boolean): Disables the entire group and all nested items. - className (type: string): Merged onto the root group wrapper for local layout or width overrides. - ToggleGroupItem: Individual toggle button inside the group with the same fluid motion as the standalone toggle. - value (type: string, required): Stable identifier used when reading or updating the group selection. - variant (type: "default" | "outline"): Optional local override for the shared group variant treatment. - size (type: "default" | "sm" | "lg"): Optional local override for the shared group size preset. - disabled (type: boolean): Disables this item without affecting the rest of the group. - className (type: string): Merged onto the item button for local width, color, or spacing overrides. - children (type: ReactNode): Icon or label content rendered inside the item. Pair icon-only items with aria-label. ## Avatar - URL: https://iconiqui.com/display-and-content/avatar - Package: @iconiq/avatar - Install: npx shadcn@latest add @iconiq/avatar - Registry JSON: https://iconiqui.com/r/avatar.json - Summary: Base UI avatar root with shared sizing and an optional tooltip for hover or focus status hints. - Dependencies: @base-ui/react, motion ### Documented APIs - Avatar: Base UI avatar root with shared sizing and an optional tooltip for hover or focus status hints. - children (type: ReactNode): Compose AvatarImage, AvatarFallback, and an optional AvatarBadge inside the root. - size (type: "default" | "sm" | "lg", default: "default"): Controls the root size and drives badge/fallback sizing through data-size selectors. - tooltip (type: string): Optional short label shown in the Iconiq tooltip surface when the entire avatar is hovered or focused. - tooltipSide (type: "top" | "bottom" | "left" | "right", default: "right"): Preferred side for the avatar tooltip bubble. The default collision order is right, left, top, then bottom. - tooltipDelay (type: number, default: 0.15): Delay in seconds before the avatar tooltip opens. - tooltipClassName (type: string): Merged onto the tooltip bubble when the avatar tooltip is enabled. - className (type: string): Merged onto the Base UI avatar root. Use it for local radius, ring, or size overrides. - AvatarImage: Image slot for the compound avatar, backed by Base UI's image loading behavior. - src (type: string, required): Image URL passed to the underlying Base UI image primitive. - alt (type: string, required): Accessible text for the image. Pass an empty string only when the avatar is decorative. - className (type: string): Merged with the full-size rounded image classes. - AvatarFallback: Fallback slot shown by Base UI while the image is loading, missing, or failed. - children (type: ReactNode, required): Initials, icon, or other compact fallback content centered inside the avatar. - className (type: string): Merged with the muted circular fallback classes. - AvatarBadge: Absolute green status badge that scales with the root Avatar size. Add tooltip to Avatar when the whole avatar should expose the status hint. - children (type: ReactNode): Optional icon or status mark. Small avatars hide nested SVGs automatically. - tooltip (type: string): Optional short label shown in the Iconiq tooltip surface when only the badge should be the trigger. - tooltipSide (type: "top" | "bottom" | "left" | "right", default: "right"): Preferred side for the tooltip bubble. The default collision order is right, left, top, then bottom. - tooltipDelay (type: number, default: 0.15): Delay in seconds before the tooltip opens. - tooltipClassName (type: string): Merged onto the tooltip bubble when the badge tooltip is enabled. - className (type: string): Merged with the green status badge background, foreground, and ring classes. - AvatarGroup: Stack wrapper for overlapping avatars and matching overflow count chips. - children (type: ReactNode, required): Avatar and AvatarGroupCount children rendered in an overlapping row. - className (type: string): Merged with the negative-space group classes and child avatar rings. - AvatarGroupCount: Overflow count part that follows the largest avatar size used in the group. - children (type: ReactNode, required): Count label or icon shown after the visible avatars. - className (type: string): Merged with the muted circular count chip classes. ## Badge - URL: https://iconiqui.com/display-and-content/badge - Package: @iconiq/badge - Install: npx shadcn@latest add @iconiq/badge - Registry JSON: https://iconiqui.com/r/badge.json - Summary: Compact label pill with a shimmer-enabled default variant, a quieter dot variant, and preset color tokens. - Dependencies: motion, class-variance-authority ### Documented APIs - Badge: Compact label pill with a shimmer-enabled default variant, a quieter dot variant, and preset color tokens. - children (type: ReactNode, required): Badge content rendered above the optional shimmer layer so labels stay readable while the default variant animates. - className (type: string, default: ""): Appended directly to the root badge element. Useful for radius, spacing, or local border overrides. - variant (type: "default" | "dot", default: "default"): Chooses between the animated filled badge and the quieter outlined badge with a leading status dot. - size (type: "sm" | "md" | "lg", default: "md"): Controls height, horizontal padding, gap, and label size for denser or roomier badge treatments. - color (type: BadgeColor, default: "gray"): Picks a preset palette token. The default variant turns it into a tinted fill, while the dot variant uses it for the status dot and border tint. - waveColor (type: string): Optional shimmer midpoint override for the default variant. When omitted, the sweep derives a subtle tone from the current text color. - badgeVariants: CVA recipe exported alongside Badge for reusing badge styling on custom elements. - variant (type: "default" | "dot", default: "default"): Chooses between the filled badge and dot badge recipes. - size (type: "sm" | "md" | "lg", default: "md"): Controls height, padding, gap, and label size. - color (type: BadgeColor, default: "gray"): Preset palette token applied by the badge recipe. - className (type: string): Optional classes merged after the generated recipe classes. - badgeColors: Preset color token map used by Badge and badgeVariants for palette-consistent fills and dot treatments. - keys (type: BadgeColor): Named palette tokens such as gray, blue, green, amber, red, and purple. - Visual behavior: The default variant keeps the original spring-in shimmer treatment, while the dot variant adds a subtle status pulse. ## Calendar - URL: https://iconiqui.com/display-and-content/calendar - Package: @iconiq/calendar - Install: npx shadcn@latest add @iconiq/calendar - Registry JSON: https://iconiqui.com/r/calendar.json - Summary: shadcn-style animated monthly calendar with controlled/uncontrolled month state, day selection, and direct month/year picking. - Dependencies: motion, lucide-react, date-fns ### Documented APIs - Calendar: shadcn-style animated monthly calendar with controlled/uncontrolled month state, day selection, and direct month/year picking. - selected (type: Date): Controlled selected day. When provided, the highlighted day is always derived from this prop. - defaultSelected (type: Date): Initial selected day for uncontrolled usage when selected is not provided. - onSelect (type: (date: Date) => void): Called when the user picks any interactive day, including visible outside-month days. - month (type: Date): Controlled visible month. Prev/next, outside-day, and month/year picker navigation requests flow through onMonthChange. - defaultMonth (type: Date): Initial visible month for uncontrolled usage when month is not provided. - onMonthChange (type: (month: Date) => void): Called whenever the user navigates with prev/next, an outside day, or the month/year picker. - disabled (type: (date: Date) => boolean): Marks dates as non-interactive. Disabled days keep the same visuals but cannot be selected. - locale (type: Locale): Optional date-fns locale used for month labels, weekday headers, selected-date copy, and spoken date labels. - size (type: "sm" | "md" | "lg"): Controls the overall calendar scale, including the card width, spacing, nav controls, weekday row, and day cell sizing. Defaults to sm. - weekStartsOn (type: 0 | 1 | 2 | 3 | 4 | 5 | 6): Overrides the first day of the week for both the weekday header and rendered month grid. - minYear (type: number): Optional lower bound for selectable years in the year picker. - maxYear (type: number): Optional upper bound for selectable years in the year picker. - Date math and layout behavior: The grid is rebuilt with date-fns whenever the visible month changes. - Motion and interaction model: Month transitions, selected-day changes, and the live selection summary each animate independently. ## Card - URL: https://iconiqui.com/display-and-content/card - Package: @iconiq/card - Install: npx shadcn@latest add @iconiq/card - Registry JSON: https://iconiqui.com/r/card.json - Summary: Compound card surface with optional interactive lift, Motion-smoothed layout transitions, and shared header, action, content, and footer slots. - Dependencies: motion ### Documented APIs ## Carousel - URL: https://iconiqui.com/display-and-content/carousel - Package: @iconiq/carousel - Install: npx shadcn@latest add @iconiq/carousel - Registry JSON: https://iconiqui.com/r/carousel.json - Summary: Embla-powered carousel with aspect-ratio presets and horizontal or vertical slides. Built with embla-carousel-react and Lucide. - Dependencies: embla-carousel-react, lucide-react ### Documented APIs ## Charts - URL: https://iconiqui.com/display-and-content/charts - Package: @iconiq/charts - Install: npx shadcn@latest add @iconiq/charts - Registry JSON: https://iconiqui.com/r/charts.json - Summary: Theme-aware Recharts shell that maps ChartConfig tokens to CSS variables, applies registry chart colors, and eases the surface in with fluid motion. - Dependencies: recharts, motion ### Documented APIs - ChartContainer: Theme-aware Recharts shell that maps ChartConfig tokens to CSS variables, applies registry chart colors, and eases the surface in with fluid motion. - config (type: ChartConfig, required): Series labels and colors. Use var(--chart-1) style tokens or per-key theme overrides; ChartStyle writes --color-{key} variables scoped to this chart instance. - children (type: ReactNode, required): Recharts chart markup, usually a BarChart, LineChart, or AreaChart wrapped by ResponsiveContainer through this container. - id (type: string): Optional stable id for the generated data-chart attribute and scoped CSS variables. - initialDimension (type: { width: number; height: number }): Optional fallback size for ResponsiveContainer before the first measure. By default the chart fills its parent (100% width/height) with a debounced resize handler. - className (type: string): Merged onto the chart shell alongside the chart component's local theme tokens. - ChartBar: Thin Recharts Bar wrapper with restrained ease-out growth timing tuned for the Iconiq motion profile. - seriesIndex (type: number, default: 0): Offsets bar growth start time for multi-series charts so each series eases in with a short stagger. - ...props (type: Recharts Bar props): Forwards the full Bar API. animationDuration (~480ms), ease-out easing, and isAnimationActive inherit calm defaults unless you override them. - ChartTooltip: Recharts tooltip primitive wired to the shared Iconiq chart tooltip content shell. - content (type: ReactNode | ComponentType): Tooltip renderer. Defaults to ChartTooltipContent when omitted. - cursor (type: boolean | object): Recharts cursor configuration for hover feedback. - ChartTooltipContent: Styled tooltip content shell with a soft spring entrance and dashed, dot, or line indicators. - indicator (type: "dot" | "line" | "dashed", default: "dot"): Marker style rendered beside each tooltip row. - hideLabel (type: boolean, default: false): Suppresses the formatted label block above the value rows. - hideIndicator (type: boolean, default: false): Hides the color marker when you only want text values. - labelFormatter (type: (value, payload) => ReactNode): Custom formatter for the tooltip label row. - formatter (type: Recharts formatter): Optional per-row formatter; when omitted, the default label and value layout is used. - ChartLegend: Recharts legend primitive wired to the shared Iconiq legend content shell. - content (type: ReactNode | ComponentType): Legend renderer. Defaults to ChartLegendContent when omitted. - verticalAlign (type: "top" | "bottom", default: "bottom"): Adjusts legend spacing relative to the chart. - ChartLegendContent: Legend content shell with a quiet fade-and-rise entrance that matches the chart surface motion. - hideIcon (type: boolean, default: false): Hides config icons and falls back to the color swatch derived from the series color. - verticalAlign (type: "top" | "bottom", default: "bottom"): Adjusts legend spacing relative to the chart. ## Date Picker - URL: https://iconiqui.com/display-and-content/date-picker - Package: @iconiq/date-picker - Install: npx shadcn@latest add @iconiq/date-picker - Registry JSON: https://iconiqui.com/r/date-picker.json - Summary: Collapsible date field with a formatted trigger button and the shared Iconiq Calendar panel underneath. - Dependencies: motion, lucide-react, date-fns ### Documented APIs - DatePicker: Collapsible date field with a formatted trigger button and the shared Iconiq Calendar panel underneath. - value (type: Date | null): Controlled selected date. When provided, the trigger and embedded Calendar both reflect this value. - placeholder (type: string, default: Select a date): Copy shown in the trigger when no date is selected. - onChange (type: (date: Date) => void): Called when the user picks a date from the embedded Calendar. - className (type: string): Optional class names applied to the outer wrapper. - defaultOpen (type: boolean, default: false): Whether the Calendar panel starts expanded on first render. - calendarProps (type: Omit): Props forwarded to the embedded Calendar, such as size, locale, disabled, weekStartsOn, minYear, and maxYear. ## Liquid Marquee - URL: https://iconiqui.com/display-and-content/liquid-marquee - Package: @iconiq/liquid-marquee - Install: npx shadcn@latest add @iconiq/liquid-marquee - Registry JSON: https://iconiqui.com/r/liquid-marquee.json - Summary: Seamless horizontal marquee that duplicates its children into a looping track, animates with requestAnimationFrame, and applies an SVG liquid distortion filter with gradient edge fades. ### Documented APIs - LiquidMarquee: Seamless horizontal marquee that duplicates its children into a looping track, animates with requestAnimationFrame, and applies an SVG liquid distortion filter with gradient edge fades. - children (type: React.ReactNode, required): Content rendered twice inside the scrolling track. A single horizontal row of labels, logos, or cards works best. - speed (type: number, default: 45): Scroll speed in pixels per second. Higher values move the track faster. - direction (type: "left" | "right", default: left): Sets the scroll direction. `left` moves content toward the left edge; `right` reverses the flow. - className (type: string): Optional class names merged onto the overflow container for height, spacing, or background styling. - pauseOnHover (type: boolean, default: true): When true, pointer hover pauses the animation until the cursor leaves the marquee. ## Progress - URL: https://iconiqui.com/display-and-content/progress - Package: @iconiq/progress - Install: npx shadcn@latest add @iconiq/progress - Registry JSON: https://iconiqui.com/r/progress.json - Summary: Progress component documentation. ### Documented APIs ## Rolling Digits - URL: https://iconiqui.com/display-and-content/rolling-digits - Package: @iconiq/rolling-digits - Install: npx shadcn@latest add @iconiq/rolling-digits - Registry JSON: https://iconiqui.com/r/rolling-digits.json - Summary: Inline animated counter that swaps digits with spring-driven blur, scale, and vertical motion while exiting the previous character. - Dependencies: motion ### Documented APIs - RollingDigits: Inline animated counter that swaps digits with spring-driven blur, scale, and vertical motion while exiting the previous character. - value (type: number, required): Target number to display. The component rounds to the nearest integer before formatting. - pad (type: number): Minimum digit width passed to `String.padStart`. Useful for clock-style or fixed-width counters. - animationDelay (type: number, default: 80): Milliseconds between queued value steps when `value` changes faster than the animation can finish. - startOnView (type: boolean, default: true): When true, playback waits until the component enters the viewport once before animating from zero. - locale (type: boolean): When true, formats the rounded value with `toLocaleString()` before splitting digits. - format (type: (value: number) => string): Custom formatter that runs before padding. Overrides `locale` when both are provided. - gap (type: number, default: 2): Pixel gap between rendered characters in the digit row. - direction (type: "dynamic" | "up" | "down", default: dynamic): Controls whether incoming digits slide up or down. `dynamic` compares the previous and next digit values. - enterStiffness (type: number, default: 170): Spring stiffness for incoming digit motion. - enterDamping (type: number, default: 10): Spring damping for incoming digit motion. - exitStiffness (type: number, default: 170): Spring stiffness for outgoing digit motion. - exitDamping (type: number, default: 15): Spring damping for outgoing digit motion. - enterY (type: number, default: 32): Vertical offset in pixels used when a digit enters. - enterBlur (type: number, default: 52): Peak blur in pixels applied when a digit enters. - enterScale (type: number, default: 0.7): Starting scale applied when a digit enters. - className (type: string): Merged onto the outer inline-flex span that wraps the readable and visual layers. - digitClassName (type: string): Merged onto each animated digit cell wrapper for per-digit styling. ## Skeleton - URL: https://iconiqui.com/display-and-content/skeleton - Package: @iconiq/skeleton - Install: npx shadcn@latest add @iconiq/skeleton - Registry JSON: https://iconiqui.com/r/skeleton.json - Summary: Lightweight loading placeholder that renders a muted block with an optional shimmer pass layered above it. ### Documented APIs - ShimmerSkeleton: Lightweight loading placeholder that renders a muted block with an optional shimmer pass layered above it. - rounded (type: "none" | "sm" | "md" | "lg" | "full", default: md): Chooses the corner radius utility applied to the placeholder surface. - animate (type: boolean, default: true): Controls whether the shimmer overlay is rendered. Set it to false when you want a static loading block. - className (type: string): Merged onto the root div so you can control width, height, spacing, colors, and any extra local styling. - HTML div props (type: HTMLAttributes): Standard div attributes such as style, data-*, aria-*, id, and event handlers are forwarded to the root element. - Registry bundle: Install the exact registry entry shown on the right when you want the component file with no additional runtime dependencies. ## Spinner - URL: https://iconiqui.com/display-and-content/spinner - Package: @iconiq/spinner - Install: npx shadcn@latest add @iconiq/spinner - Registry JSON: https://iconiqui.com/r/spinner.json - Summary: Default export for a lightweight loading indicator built around an output element. - Dependencies: motion ### Documented APIs - Spinner: Default export for a lightweight loading indicator built around an output element. - variant (type: "ring" | "dots", default: ring): Chooses between the rotating circular border and the three bouncing dots treatment. - className (type: string): Merged onto the root output element so you can resize or recolor the spinner with Tailwind utilities. ## Table - URL: https://iconiqui.com/display-and-content/table - Package: @iconiq/table - Install: npx shadcn@latest add @iconiq/table - Registry JSON: https://iconiqui.com/r/table.json - Summary: Root provider for the animated table primitives. It sets the shared column template so header and body rows stay aligned. - Dependencies: motion, lucide-react ### Documented APIs - Table: Root provider for the animated table primitives. It sets the shared column template so header and body rows stay aligned. - children (type: ReactNode, required): Compose TableHeader, TableBody, TableRow, TableHead, TableCell, and optional helper primitives inside the root. - columns (type: string, default: "minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)"): Shared grid-template-columns value applied to every header and body row so the native table semantics still keep the custom grid layout aligned. - className (type: string): Merged onto the native table element when you need to adjust width, spacing, or placement. - TableToolbar: Optional layout helper for the control row above the table, matching the original spacing and alignment treatment. - children (type: ReactNode, required): Usually a search field, actions, filters, or bulk controls placed above the table. - className (type: string): Merged onto the toolbar wrapper. - TableHeader: Native table head wrapper for the column labels and sort controls. - children (type: ReactNode, required): Usually one header TableRow. - className (type: string): Merged onto the header wrapper. - TableBody: Native table body wrapper that adds LayoutGroup and AnimatePresence so row insertions, removals, and reordering stay animated. - children (type: ReactNode, required): One or more TableRow elements, plus optional TableEmpty when no rows are visible. - className (type: string): Merged onto the body wrapper. - TableRow: Motion-enabled native table row used for both header and body layouts. - variant (type: "header" | "body", default: body): Header rows skip mount and exit motion, while body rows keep the original motion defaults. - index (type: number, default: 0): Optional row index used to apply a subtle stagger to body row entry motion. - hoverable (type: boolean): When true, body rows get the muted hover wash. Defaults to false so informational rows do not imply clickability. - className (type: string): Merged onto the row shell for spacing or color overrides. - Motion tr props (type: ComponentPropsWithoutRef): Additional motion.tr props such as layout, transition, whileHover, and exit can still be passed directly. - TableHead: Native header cell wrapper for labels, sort buttons, and right-aligned controls. - align (type: "left" | "right", default: left): Controls left or right alignment for the header cell content. - children (type: ReactNode, required): Header label or a custom control such as TableSortButton. When used with TableSortButton, the column header also receives the correct aria-sort state. - className (type: string): Merged onto the header cell wrapper. - TableCell: Native body cell wrapper for row content, status pills, numeric values, and row actions. - align (type: "left" | "right", default: left): Controls left or right alignment for the cell content. - children (type: ReactNode, required): Rendered cell content. - className (type: string): Merged onto the cell wrapper. - TableCaption: Low-emphasis native table caption below the table, matching the original entry count styling. - children (type: ReactNode, required): Caption copy, summary text, or count information. - className (type: string): Merged onto the caption paragraph. - TableEmpty: Animated empty-state row for zero-result or no-data states inside TableBody. - children (type: ReactNode, required): Empty-state copy or a richer no-data message. - colSpan (type: number): Overrides the automatically derived column span when the empty row should cover a different number of columns. - Motion tr props (type: ComponentPropsWithoutRef): You can still override animate, initial, transition, or className when customizing the empty state row. - TableSortButton: Optional header helper with a larger hit area, clearer active state, and direction animation. - active (type: boolean, default: false): Strengthens the visual treatment and enables the active sort direction state for the parent column header. - direction (type: "asc" | "desc", default: asc): Rotates the chevron when the current active sort direction is descending. - align (type: "left" | "right", default: left): Keeps the sort button aligned with the header cell it lives in, including full-width right-aligned targets. - children (type: ReactNode, required): Visible sort label. - className (type: string): Merged onto the button wrapper. ## Verified Badge - URL: https://iconiqui.com/display-and-content/verified-badge - Package: @iconiq/verified-badge - Install: npx shadcn@latest add @iconiq/verified-badge - Registry JSON: https://iconiqui.com/r/verified-badge.json - Summary: Inline X-style verified scallop with a check. Use shimmer or static variants. - Dependencies: motion ### Documented APIs - VerifiedBadge: Inline X-style verified scallop with a check. Use shimmer or static variants. - variant (type: "shimmer" | "static", default: shimmer): Use `shimmer` for a sweeping highlight across the scallop or `static` for a fixed badge. - size (type: number, default: 64): Width and height in pixels for the outer badge; the check scales to half this value. - className (type: string): Merged onto the root span. Pass a `text-*` class to override the default Twitter-blue scallop color. - aria-label (type: string, default: Verified): Announced to screen readers. Override when the badge conveys a different status. ## Alert - URL: https://iconiqui.com/feedback-and-alerts/alert - Package: @iconiq/alert - Install: npx shadcn@latest add @iconiq/alert - Registry JSON: https://iconiqui.com/r/alert.json - Summary: Root container for a single notice. Uses a compact grid layout with optional leading icon, compound title and description slots, legacy prop support, and inline or toast behavior. - Dependencies: motion, class-variance-authority ### Documented APIs - Alert: Root container for a single notice. Uses a compact grid layout with optional leading icon, compound title and description slots, legacy prop support, and inline or toast behavior. - children (type: ReactNode): Preferred compound API. Pass an optional leading icon followed by AlertTitle and AlertDescription. - icon (type: ReactNode): Legacy leading visual prop. Compound children can also provide the leading icon as the first child. - title (type: ReactNode): Legacy title prop rendered with the same AlertTitle styling. Prefer AlertTitle for new code. - message (type: ReactNode): Legacy description prop rendered with the same AlertDescription styling. Prefer AlertDescription for new code. - action (type: ReactNode): Optional action row rendered beneath the message, useful for a single follow-up button or link such as Undo or View details. - appearance (type: "default" | "destructive" | "warning", default: "default"): Visual tone for the alert surface. Destructive shifts toward error colors; warning uses a warm amber surface with muted description text. - size (type: "sm" | "md" | "lg" | "xl", default: "md"): Preset max width for inline and toast alerts. sm is 320px, md is 400px, lg is 480px, and xl is 560px. - width (type: string | number): Custom max width. Pass a CSS length such as 28rem or a pixel number. Overrides size when set. - dismissible (type: boolean, default: legacy: true; compound inline: false): Controls whether the close button is rendered. Compound inline alerts are static by default; toast and legacy prop alerts remain dismissible unless you opt out. - variant (type: "inline" | "toast", default: "inline"): Explicitly chooses layout behavior. Toasts portal to document.body and use fixed viewport positioning, while inline alerts stay in normal document flow. - position (type: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"): Optional toast placement. Providing a position also upgrades the component to toast behavior, and omitted toast positions default to top-right. - timeout (type: number, default: legacy/toast: 5000; compound inline: 0): Auto-dismiss delay in milliseconds. Passing 0 disables the timer; compound inline alerts default to no timer so static notices stay visible. - onDismiss (type: () => void): Called after the component finishes its exit transition, regardless of whether dismissal came from the close button or the timeout effect. - AlertTitle: Primary line for the compound alert API. Renders in the second grid column beside the optional icon. - children (type: ReactNode, required): Short title or inline formatted heading content. - className (type: string): Merged with the title typography classes for one-off styling. - AlertDescription: Secondary line for the compound alert API. Renders beneath the title in the second grid column and links to the root with aria-describedby. - children (type: ReactNode, required): Supporting message content. Keep it concise for compact inline notices and toast updates. - className (type: string): Merged with the description typography classes for one-off styling. - Motion and lifecycle: Alert uses AnimatePresence for mount and exit, with separate variants for the container, icon, and text stack. ## Typography - URL: https://iconiqui.com/foundation/typography - Package: @iconiq/typography - Install: npx shadcn@latest add @iconiq/typography - Registry JSON: https://iconiqui.com/r/typography.json - Summary: Single text primitive that keeps the full type scale in one place, with semantic element defaults derived from the selected variant. - Dependencies: class-variance-authority ### Documented APIs - Typography: Single text primitive that keeps the full type scale in one place, with semantic element defaults derived from the selected variant. - variant (type: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label-xl" | "label-lg" | "label-md" | "label-sm" | "label-xs" | "paragraph-xl" | "paragraph-lg" | "paragraph-md" | "paragraph-sm" | "paragraph-xs" | "subheading-md" | "subheading-sm" | "subheading-xs" | "subheading-2xs" | "doc-label" | "doc-paragraph", default: "paragraph-md"): Chooses one of the exported typography recipes. Each variant locks in the exact font size, line height, weight, and letter spacing from the scale. - as (type: React.ElementType): Overrides the rendered HTML tag when the default semantic element for the chosen variant is not the one you want in a specific layout. - children (type: ReactNode, required): Text or inline content rendered with the selected recipe. - className (type: string): Merged after the variant classes so local color, spacing, or layout adjustments can be layered on top without forking the scale. - Scale structure: The component ships with grouped metadata for titles, labels, paragraphs, subheadings, and documentation copy. ## Autocomplete - URL: https://iconiqui.com/inputs-and-forms/autocomplete - Package: @iconiq/b-autocomplete - Install: npx shadcn@latest add @iconiq/b-autocomplete - Registry JSON: https://iconiqui.com/r/b-autocomplete.json - Summary: Root autocomplete controller. Compose AutocompleteInput, AutocompleteContent, AutocompleteList, and AutocompleteItem inside it. - Dependencies: @base-ui/react, motion, lucide-react ### Documented APIs - Autocomplete: Root autocomplete controller. Compose AutocompleteInput, AutocompleteContent, AutocompleteList, and AutocompleteItem inside it. - items (type: readonly Item[]): Item collection used for list filtering. Pass a flat array or grouped items for sectioned results. - value (type: string): Controlled input text shown in the field. - defaultValue (type: string): Initial input text for uncontrolled usage. - onValueChange (type: (value: string) => void): Called when the input text changes from typing or when a suggestion is accepted. - itemToStringValue (type: (item: Item) => string): Maps each item to the string used for filtering and the committed input value. - mode (type: "list" | "both" | "inline" | "none", default: "list"): Controls filtering and inline completion while navigating suggestions. - autoHighlight (type: boolean | "always", default: true): Automatically highlights the first matching item while typing. - open (type: boolean): Controlled popup state. Pair with onOpenChange. - onOpenChange (type: (open: boolean, eventDetails) => void): Called when the suggestion panel opens or closes. Use with open for controlled popup state. - openOnInputClick (type: boolean, default: false): When true, clicking the input opens the suggestion panel even before typing. - isItemEqualToValue (type: (item: Item, value: Item) => boolean): Custom equality for object items. Use when items are recreated on each render. - AutocompleteInput: Styled input shell with border, focus ring, and optional clear control. The suggestion panel opens while typing, not on focus or click. - label (type: React.ReactNode): Optional field label rendered above the input and linked with htmlFor. - labelClassName (type: string): Optional class names merged onto the field label. - placeholder (type: string): Shown when the input is empty. - showClear (type: boolean, default: true): Controls whether AutocompleteClear is rendered. - showTrigger (type: boolean, default: false): When true, renders a chevron trigger that toggles the suggestion panel. - disabled (type: boolean, default: false): Disables the input and clear button. - AutocompleteContent: Portaled suggestion panel with a subtle fade-slide entrance and anchored width. - side (type: "top" | "right" | "bottom" | "left", default: "bottom"): Preferred side for the popup. - sideOffset (type: number, default: 6): Distance between the input and the popup. - AutocompleteList: Scrollable suggestion list rendered inside AutocompleteContent. - children (type: ReactNode | ((item, index) => ReactNode), required): Render explicit AutocompleteItem children or a render function when using the root items prop. - className (type: string): Merged with the default list spacing and scroll classes. - AutocompleteItem: Suggestion row with optional description and a spring-driven highlight fill. - value (type: Item, required): Item value passed to Base UI for selection handling. - description (type: ReactNode): Optional secondary line below the primary label. ## Checkbox - URL: https://iconiqui.com/inputs-and-forms/checkbox - Package: @iconiq/b-checkbox - Install: npx shadcn@latest add @iconiq/b-checkbox - Registry JSON: https://iconiqui.com/r/b-checkbox.json - Summary: Single checkbox with controlled or uncontrolled state, a visually hidden native input, and an optional inline label. - Dependencies: @base-ui/react, motion ### Documented APIs - Checkbox: Single checkbox with controlled or uncontrolled state, a visually hidden native input, and an optional inline label. - checked (type: boolean): Controlled checked state. When you pass this prop, the component always renders from it and stops mutating its own internal state. - defaultChecked (type: boolean, default: false): Initial state for uncontrolled usage. It is only read on the first render. - onCheckedChange (type: (checked: boolean) => void): Called with the next boolean value each time the checkbox is toggled. - label (type: string): Optional text rendered to the right of the box inside the same clickable label wrapper. - className (type: string): Merged onto the root label so you can reposition the row or override spacing. - id (type: string): Passed to the hidden input and linked from the wrapping label for explicit form-field association. - Motion and accessibility: Visual feedback comes from Motion while input semantics still come from the hidden native checkbox element. ## Checkbox Group - URL: https://iconiqui.com/inputs-and-forms/checkbox-group - Package: @iconiq/b-checkbox-group - Install: npx shadcn@latest add @iconiq/b-checkbox-group - Registry JSON: https://iconiqui.com/r/b-checkbox-group.json - Summary: Each option row is described with a plain object and rendered as an animated button. - Dependencies: @base-ui/react, motion, lucide-react ### Documented APIs - CheckboxGroupOption: Each option row is described with a plain object and rendered as an animated button. - label (type: string, required): Primary copy shown for the row. - value (type: string, required): Stable identifier used when checking whether the row is selected and when producing the next selection array. - description (type: string): Optional secondary text rendered below the label. - group (type: string): Optional section label used to chunk long lists into named groups when adjacent options share the same value. - disabled (type: boolean): Disables the row button and blocks hover, active, and toggle behavior for that option. - disabledReason (type: string): Optional explainer rendered below disabled rows so users understand why the choice is unavailable. - CheckboxGroup: Animated multi-select list with optimistic toggle feedback, stable output ordering, and optional disclosure for longer option sets. - options (type: CheckboxGroupOption[], required): Array of rows to render, in display order. - value (type: string[], default: []): Current selected values. The prop remains the source of truth, while the component renders an immediate optimistic preview after each click. - onChange (type: (value: string[]) => void): Receives the next selected values array after a row is toggled, normalized back into the original display order. - className (type: string): Merged onto the root flex column wrapper. - maxVisible (type: number): Optional progressive-disclosure cap. When provided, the list initially renders up to this many rows and reveals the rest with a built-in toggle. - showMoreLabel (type: string): Optional label prefix for the disclosure button shown when maxVisible hides rows. - showLessLabel (type: string): Optional label used when the disclosure button collapses the list back down. - Motion and accessibility: The component leans on hover surfaces and AnimatePresence rather than native checkbox UI. ## Color Picker - URL: https://iconiqui.com/inputs-and-forms/color-picker - Package: @iconiq/color-picker - Install: npx shadcn@latest add @iconiq/color-picker - Registry JSON: https://iconiqui.com/r/color-picker.json - Summary: Self-contained HSV panel with saturation field, hue/alpha sliders, multi-format readouts, and EyeDropper. - Dependencies: lucide-react, motion ### Documented APIs - ColorPicker: Self-contained HSV panel with saturation field, hue/alpha sliders, multi-format readouts, and EyeDropper. - value (type: string): Controlled hex color such as #3B82F6. When provided, the picker syncs its internal state to this value. - defaultValue (type: string, default: #3B82F6): Starting color for uncontrolled usage. Ignored when value is supplied. - onChange (type: (color: string) => void): Called when the color settles (pointer up on sliders, blur/Enter on inputs). Emits #RRGGBB, or #RRGGBBAA when alpha is below 100%. - defaultAlpha (type: number, default: 100): Starting alpha percentage (0–100) for uncontrolled usage when defaultValue has no alpha channel. - disabled (type: boolean, default: false): Disables picker interaction and lowers shell opacity. - showEyedropper (type: boolean, default: true): Shows or hides the pipette control in the footer row. - onEyedropperUnsupported (type: () => void): Called when EyeDropper is unavailable. No alert dialog is shown by default. - className (type: string): Merged onto the outer picker shell for width, shadow, or layout overrides. ## Combobox - URL: https://iconiqui.com/inputs-and-forms/combobox - Package: @iconiq/b-combobox - Install: npx shadcn@latest add @iconiq/b-combobox - Registry JSON: https://iconiqui.com/r/b-combobox.json - Summary: Root combobox controller. Compose ComboboxInput, ComboboxContent, ComboboxList, and ComboboxItem inside it. - Dependencies: @base-ui/react, motion, lucide-react ### Documented APIs - Combobox: Root combobox controller. Compose ComboboxInput, ComboboxContent, ComboboxList, and ComboboxItem inside it. - items (type: readonly Item[]): Optional item collection used by Base UI for filtering and render-function lists. - value (type: Item | Item[] | null): Controlled selected value. Use an array when multiple is true. - defaultValue (type: Item | Item[] | null): Initial selected value for uncontrolled usage. - onValueChange (type: (value: Item | Item[] | null) => void): Called when an item is selected, a chip is removed, or the clear action resets the selection. - itemToStringLabel (type: (item: Item) => string): Maps object values to the label shown in the input and used for text filtering. - itemToStringValue (type: (item: Item) => string): Maps object values to the hidden form value. - inputValue (type: string): Controlled search text. Leave uncontrolled for Base UI to manage query state. - open (type: boolean): Controlled popup state. Pair with onOpenChange. - ComboboxInput: Styled input shell with the previous border, focus ring, clear button, and rotating trigger icon. - placeholder (type: string): Shown when no item is selected and the input is empty. - showClear (type: boolean, default: true): Controls whether ComboboxClear is rendered in the input. - showTrigger (type: boolean, default: true): Controls whether the rotating trigger icon is rendered in the input. - className (type: string): Merged onto the input shell so width and local layout can be adjusted. - disabled (type: boolean, default: false): Disables the input, clear button, and trigger while applying the previous reduced-opacity presentation. - ComboboxContent: Portaled dropdown surface with the previous white/dark panel, border, shadow, and fade-slide motion. - side (type: "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end", default: "bottom"): Preferred side for the popup. - align (type: "start" | "center" | "end", default: "start"): Popup alignment relative to the input anchor. - sideOffset (type: number, default: 4): Gap between the input shell and dropdown. - className (type: string): Merged onto the animated popup panel. - ComboboxList: Scrollable item list rendered inside ComboboxContent with the previous max-height and motion treatment. - children (type: ReactNode | ((item, index) => ReactNode), required): Render explicit children or a render function when using the root items prop. - className (type: string): Merged with the default list spacing and scroll classes. - ComboboxItem: Animated row with active highlight, optional description layout, and selected checkmark spring. - value (type: Item, required): Stable value used by Base UI for selection. - children (type: ReactNode, required): Primary item label content. - description (type: ReactNode): Optional secondary line rendered below the item label, matching the prior option description UI. - className (type: string): Merged with the default row layout and motion classes. ## File Upload - URL: https://iconiqui.com/inputs-and-forms/file-upload - Package: @iconiq/file-upload - Install: npx shadcn@latest add @iconiq/file-upload - Registry JSON: https://iconiqui.com/r/file-upload.json - Summary: Drag-and-drop uploader with an internal queue, hidden file input, keyboard-triggerable drop zone, and callback hooks for parent integrations. - Dependencies: motion, lucide-react ### Documented APIs - FileUpload: Drag-and-drop uploader with an internal queue, hidden file input, keyboard-triggerable drop zone, and callback hooks for parent integrations. - accept (type: string): Optional accept string passed to the hidden file input and also enforced for dropped files, including MIME types like image/* and extensions like .pdf. - multiple (type: boolean, default: true): Allows selecting or dropping multiple files. When set to false, the next selection replaces the existing queue. - maxFiles (type: number): Caps the queue length. New files are prepended, and anything beyond the limit is trimmed from the end. - disabled (type: boolean, default: false): Disables click, drag, keyboard activation, and the hidden file input without changing the component structure. - name (type: string): Passes a form field name through to the hidden file input for form integrations. - className (type: string): Adds classes to the outer wrapper without changing the component internals. - onFilesChange (type: (files: File[]) => void): Called when files are added or removed from the queue. It does not fire on every progress tick. - onFileRemove (type: (file: File, nextFiles: File[]) => void): Called after a queued file is removed. The second argument contains the remaining files in queue order. - onUploadComplete (type: (files: File[]) => void): Called once the current queue reaches 100% completion for every item. - Built-in behavior: The component still owns its progress visuals and preview lifecycle, even when you attach callbacks from parent code. - progress state (type: built-in): Each added file starts in an uploading state and advances through the built-in simulated progress loop until it reaches done. - image previews (type: built-in): Image files receive object URL previews and render as thumbnails; non-image files fall back to a file icon surface. - remove action (type: built-in): Each queued file can be removed individually from the trailing action button, with preview URLs revoked immediately. ## Input OTP - URL: https://iconiqui.com/inputs-and-forms/input-otp - Package: @iconiq/input-otp - Install: npx shadcn@latest add @iconiq/input-otp - Registry JSON: https://iconiqui.com/r/input-otp.json - Summary: Root wrapper around Base UI OTP Field that owns the shared value, completion state, and keyboard/paste behavior for every slot. - Dependencies: @base-ui/react, motion ### Documented APIs - OTP: Root wrapper around Base UI OTP Field that owns the shared value, completion state, and keyboard/paste behavior for every slot. - length (type: number, required): Number of OTP characters. Required so Base UI can clamp values, detect completion, and manage focus order. - value (type: string): Controlled OTP string. Pair with `onValueChange` when the parent owns the code. - defaultValue (type: string): Initial value for uncontrolled usage. - onValueChange (type: (value: string, eventDetails) => void): Called whenever the OTP value changes from typing, paste, backspace, or keyboard navigation. - onValueComplete (type: (value: string, eventDetails) => void): Called when all slots are filled, including when a complete code is pasted. - validationType (type: "numeric" | "alpha" | "alphanumeric" | "none", default: "numeric"): Built-in validation applied before values are stored. Use `alphanumeric` for backup or recovery codes. - disabled (type: boolean, default: false): Disables interaction across every slot. - className (type: string): Classes merged onto the root flex container. - containerClassName (type: string): Legacy alias merged onto the root container alongside `className`. - OTPSlots: Convenience layout that renders the correct number of slots from the parent `OTP` length, with an optional separator. - separatorAfter (type: number): Inserts `OTPSeparator` before the slot at this zero-based index, such as `3` for a 3-3 grouped code. - slotClassName (type: string): Classes forwarded to every rendered `OTPSlot`. - className (type: string): Classes merged onto the internal `OTPGroup` wrapper. - OTPSlot: Animated character cell with spring focus ring, pop-in digit motion, and a pulsing caret on the active empty slot. - className (type: string): Classes merged onto the animated slot surface. - aria-label (type: string): Accessible label for slots after the first one. The first slot inherits the field label from `OTP` or a surrounding `