# Iconiq UI > Open-source React UI components with motion, shadcn registry installs, and editable source files. Iconiq UI is a React component library delivered through the shadcn registry workflow. The site includes component docs, live playgrounds, and installation instructions. ## Canonical - Website: https://iconiqui.com - GitHub: https://github.com/edwinvakayil/iconiq - Author: Edwin Vakayil ## AI Discovery - LLM overview: https://iconiqui.com/llms.txt - Full LLM index: https://iconiqui.com/llms-full.txt - Machine-readable catalog: https://iconiqui.com/ai-index.json ## Quick Install ```bash npx shadcn@latest add @iconiq/b-button ``` ## Core Guides - Overview: Homepage with the full live component playground and the primary installation path for the registry. https://iconiqui.com - Introduction: Product overview, design principles, and the delivery model behind the Iconiq component library. https://iconiqui.com/introduction - Installation: Installation guide for the shadcn registry flow, direct registry JSON URLs, and sample component entries. https://iconiqui.com/installation - MCP: MCP setup guide for connecting Iconiq to AI coding tools through the shadcn registry workflow. https://iconiqui.com/mcp ## Components (61) - Prompt Box: Expandable prompt surface that grows from a compact pill into a textarea with model controls, attachment action, and send or voice affordances. Docs: https://iconiqui.com/blocks/prompt-box Install: npx shadcn@latest add @iconiq/prompt-box - Button: Base UI button with the shadcn-style variant recipe, spring press feedback, optional intrinsic width animation, and Motion ripple layer. Docs: https://iconiqui.com/buttons-and-actions/button Install: npx shadcn@latest add @iconiq/b-button - Button Group: Compact bordered action button with muted idle text, darker hover text, optional ripple feedback, and shadcn-style size controls. Docs: https://iconiqui.com/buttons-and-actions/button-group Install: npx shadcn@latest add @iconiq/button-group - Flux Button: Async button with idle, loading, and success states, plus b-button visual variants. Docs: https://iconiqui.com/buttons-and-actions/flux-button Install: npx shadcn@latest add @iconiq/flux-button - Icon Bar: Horizontal toolbar of compact icon chips. Hover or focus previews labels; clicking selects one item and keeps it expanded. Docs: https://iconiqui.com/buttons-and-actions/icon-bar Install: npx shadcn@latest add @iconiq/icon-bar - Toggle: Two-state button with spring press feedback and a muted fill that bounces in when pressed. Docs: https://iconiqui.com/buttons-and-actions/toggle Install: npx shadcn@latest add @iconiq/toggle - Toggle Group: Root container for a connected set of toggle buttons with shared variant, size, spacing, and orientation settings. Docs: https://iconiqui.com/buttons-and-actions/toggle-group Install: npx shadcn@latest add @iconiq/toggle-group - Avatar: Base UI avatar root with shared sizing and an optional tooltip for hover or focus status hints. Docs: https://iconiqui.com/display-and-content/avatar Install: npx shadcn@latest add @iconiq/avatar - Badge: Compact label pill with a shimmer-enabled default variant, a quieter dot variant, and preset color tokens. Docs: https://iconiqui.com/display-and-content/badge Install: npx shadcn@latest add @iconiq/badge - Calendar: shadcn-style animated monthly calendar with controlled/uncontrolled month state, day selection, and direct month/year picking. Docs: https://iconiqui.com/display-and-content/calendar Install: npx shadcn@latest add @iconiq/calendar - Card: Compound card surface with optional interactive lift, Motion-smoothed layout transitions, and shared header, action, content, and footer slots. Docs: https://iconiqui.com/display-and-content/card Install: npx shadcn@latest add @iconiq/card - Carousel: Embla-powered carousel with aspect-ratio presets and horizontal or vertical slides. Built with embla-carousel-react and Lucide. Docs: https://iconiqui.com/display-and-content/carousel Install: npx shadcn@latest add @iconiq/carousel - Charts: Theme-aware Recharts shell that maps ChartConfig tokens to CSS variables, applies registry chart colors, and eases the surface in with fluid motion. Docs: https://iconiqui.com/display-and-content/charts Install: npx shadcn@latest add @iconiq/charts - Date Picker: Collapsible date field with a formatted trigger button and the shared Iconiq Calendar panel underneath. Docs: https://iconiqui.com/display-and-content/date-picker Install: npx shadcn@latest add @iconiq/date-picker - Liquid Marquee: 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. Docs: https://iconiqui.com/display-and-content/liquid-marquee Install: npx shadcn@latest add @iconiq/liquid-marquee - Progress: Progress component documentation. Docs: https://iconiqui.com/display-and-content/progress Install: npx shadcn@latest add @iconiq/progress - Rolling Digits: Inline animated counter that swaps digits with spring-driven blur, scale, and vertical motion while exiting the previous character. Docs: https://iconiqui.com/display-and-content/rolling-digits Install: npx shadcn@latest add @iconiq/rolling-digits - Skeleton: Lightweight loading placeholder that renders a muted block with an optional shimmer pass layered above it. Docs: https://iconiqui.com/display-and-content/skeleton Install: npx shadcn@latest add @iconiq/skeleton - Spinner: Default export for a lightweight loading indicator built around an output element. Docs: https://iconiqui.com/display-and-content/spinner Install: npx shadcn@latest add @iconiq/spinner - Table: Root provider for the animated table primitives. It sets the shared column template so header and body rows stay aligned. Docs: https://iconiqui.com/display-and-content/table Install: npx shadcn@latest add @iconiq/table - Verified Badge: Inline X-style verified scallop with a check. Use shimmer or static variants. Docs: https://iconiqui.com/display-and-content/verified-badge Install: npx shadcn@latest add @iconiq/verified-badge - 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. Docs: https://iconiqui.com/feedback-and-alerts/alert Install: npx shadcn@latest add @iconiq/alert - Typography: Single text primitive that keeps the full type scale in one place, with semantic element defaults derived from the selected variant. Docs: https://iconiqui.com/foundation/typography Install: npx shadcn@latest add @iconiq/typography - Autocomplete: Root autocomplete controller. Compose AutocompleteInput, AutocompleteContent, AutocompleteList, and AutocompleteItem inside it. Docs: https://iconiqui.com/inputs-and-forms/autocomplete Install: npx shadcn@latest add @iconiq/b-autocomplete - Checkbox: Single checkbox with controlled or uncontrolled state, a visually hidden native input, and an optional inline label. Docs: https://iconiqui.com/inputs-and-forms/checkbox Install: npx shadcn@latest add @iconiq/b-checkbox - Checkbox Group: Each option row is described with a plain object and rendered as an animated button. Docs: https://iconiqui.com/inputs-and-forms/checkbox-group Install: npx shadcn@latest add @iconiq/b-checkbox-group - Color Picker: Self-contained HSV panel with saturation field, hue/alpha sliders, multi-format readouts, and EyeDropper. Docs: https://iconiqui.com/inputs-and-forms/color-picker Install: npx shadcn@latest add @iconiq/color-picker - Combobox: Root combobox controller. Compose ComboboxInput, ComboboxContent, ComboboxList, and ComboboxItem inside it. Docs: https://iconiqui.com/inputs-and-forms/combobox Install: npx shadcn@latest add @iconiq/b-combobox - File Upload: Drag-and-drop uploader with an internal queue, hidden file input, keyboard-triggerable drop zone, and callback hooks for parent integrations. Docs: https://iconiqui.com/inputs-and-forms/file-upload Install: npx shadcn@latest add @iconiq/file-upload - Input OTP: Root wrapper around Base UI OTP Field that owns the shared value, completion state, and keyboard/paste behavior for every slot. Docs: https://iconiqui.com/inputs-and-forms/input-otp Install: npx shadcn@latest add @iconiq/input-otp - Radio Group: Options are plain objects consumed by the RadioGroup component. Docs: https://iconiqui.com/inputs-and-forms/radio-group Install: npx shadcn@latest add @iconiq/b-radio-group - Select: Root select controller. Compose SelectTrigger, SelectValue, SelectContent, and SelectItem inside it. Docs: https://iconiqui.com/inputs-and-forms/select Install: npx shadcn@latest add @iconiq/b-select - Slider: Pointer-driven range control with optional controlled or uncontrolled value management. Docs: https://iconiqui.com/inputs-and-forms/slider Install: npx shadcn@latest add @iconiq/b-slider - Switch: Binary on or off control built on Radix Switch, with a motion-driven thumb travel, foreground fill sweep, and optional inline label. Docs: https://iconiqui.com/inputs-and-forms/switch Install: npx shadcn@latest add @iconiq/b-switch - Theme Toggle: Client-only pill switch that toggles light and dark mode by adding or removing the `dark` class on `document.documentElement`, with sun and moon icons inside a sliding knob. Docs: https://iconiqui.com/inputs-and-forms/theme-toggle Install: npx shadcn@latest add @iconiq/theme-toggle - Collapsible: Collapsible with the same Iconiq API layered over Base UI primitives, preserving the same height, icon, and content transitions as the Radix version. Docs: https://iconiqui.com/layout-and-toolbars/collapsible Install: npx shadcn@latest add @iconiq/b-collapsible - Infinite Ribbon: Full-width looping announcement ribbon with repeated content, optional reverse direction, and diagonal rotation controls. Docs: https://iconiqui.com/layout-and-toolbars/infiniteribbon Install: npx shadcn@latest add @iconiq/infiniteribbon - Selection Toolbar: Floating formatting toolbar for editable text. It watches document selection, shows itself only when the selection lives inside the provided container, and exposes bold, italic, and underline actions. Docs: https://iconiqui.com/layout-and-toolbars/selection-toolbar Install: npx shadcn@latest add @iconiq/b-selection-toolbar - Separator: Separator component documentation. Docs: https://iconiqui.com/layout-and-toolbars/separator Install: npx shadcn@latest add @iconiq/separator - Accordion: Each row is described by a simple object and rendered as a single-expand accordion item. Docs: https://iconiqui.com/navigation/accordion Install: npx shadcn@latest add @iconiq/b-accordion - Breadcrumbs: Root semantic navigation wrapper for a breadcrumb trail. Docs: https://iconiqui.com/navigation/breadcrumbs Install: npx shadcn@latest add @iconiq/breadcrumbs - Command Palette: Keyboard-first command menu built on Radix Dialog with grouped items, fuzzy search, arrow-key navigation, and optional built-in theme actions. Docs: https://iconiqui.com/navigation/command-palette Install: npx shadcn@latest add @iconiq/command-palette - FAQ Pro: Searchable FAQ accordion with rounded cards, animated panels, query highlighting, and automatic expansion for filtered results. Docs: https://iconiqui.com/navigation/faq-pro Install: npx shadcn@latest add @iconiq/faq-pro - File Tree: Root provider for the compound file tree. Tracks expanded folders, hover highlight bounds, and shared visual settings. Docs: https://iconiqui.com/navigation/file-tree Install: npx shadcn@latest add @iconiq/file-tree - Tabs: Radix tabs root with a shared spring transition config for the sliding active pill. Supports controlled and uncontrolled usage. Docs: https://iconiqui.com/navigation/tabs Install: npx shadcn@latest add @iconiq/tabs - Alert Dialog: Alert dialog with a shared Iconiq trigger, content, cancel, and action API layered over Base UI primitives, plus Motion-backed confirm-state transitions. Docs: https://iconiqui.com/overlay-and-popups/alert-dialog Install: npx shadcn@latest add @iconiq/b-alert-dialog - Context Menu: Root provider that coordinates open state and the shared motion shell used by the trigger, content, and item primitives. Docs: https://iconiqui.com/overlay-and-popups/context-menu Install: npx shadcn@latest add @iconiq/b-context-menu - Dialog: Dialog, DialogTrigger, DialogClose, and DialogPortal are direct re-exports of the matching Radix dialog primitives. Docs: https://iconiqui.com/overlay-and-popups/dialog Install: npx shadcn@latest add @iconiq/b-dialog - Drawer: Vaul-backed drawer root that coordinates open state, drag gestures, overlay dismissal, focus management, and side-based placement for the compound parts. Docs: https://iconiqui.com/overlay-and-popups/drawer Install: npx shadcn@latest add @iconiq/drawer - Dropdown: Root provider that coordinates open state, selected value state, and the shared behavior used by the trigger, content, and item primitives. Docs: https://iconiqui.com/overlay-and-popups/dropdown Install: npx shadcn@latest add @iconiq/r-dropdown - Hover Card: Stateful wrapper that opens a callout on delayed hover or immediate focus, then closes it once pointer and focus both leave the hover-card region. Docs: https://iconiqui.com/overlay-and-popups/hover-card Install: npx shadcn@latest add @iconiq/b-hover-card - Popover: Thin wrapper around `PopoverPrimitive.Root` that mirrors the resolved open state into local context so `PopoverContent` can infer presence automatically. Docs: https://iconiqui.com/overlay-and-popups/popover Install: npx shadcn@latest add @iconiq/b-popover - Tooltip: Animated tooltip with a canonical Tooltip export. It owns its own open state, expects a single trigger element, and toggles in response to hover and focus events. Docs: https://iconiqui.com/overlay-and-popups/tooltip Install: npx shadcn@latest add @iconiq/b-tooltip - Radial Button: Ref-forwarding motion button with a radial fill, press feedback, and native form support. Hover, focus-visible, pointer-down, and keyboard activation spread the fill from the entry point. Docs: https://iconiqui.com/special-one/radial-button Install: npx shadcn@latest add @iconiq/radial-button - Dia Text: Animated inline text reveal with a sweeping gradient band, repeat controls, and optional fixed-width rotation for motion-driven typography. Docs: https://iconiqui.com/texts/dia-text Install: npx shadcn@latest add @iconiq/dia-text - Morph Text: Cycling headline treatment that morphs between words with blur, scale, and an SVG goo filter while optionally revealing subtext beneath the rotator. Docs: https://iconiqui.com/texts/morph-texts Install: npx shadcn@latest add @iconiq/morph-texts - Reveal Text: Staggered text reveal that animates each word or character upward with blur and opacity, with optional viewport-triggered playback and reduced-motion fallbacks. Docs: https://iconiqui.com/texts/reveal-text Install: npx shadcn@latest add @iconiq/reveal-text - Shimmer Text: Animated shimmer text with a sweeping highlight band, adjustable spread, and configurable loop speed for emphasis-heavy copy. Docs: https://iconiqui.com/texts/shimmer-text Install: npx shadcn@latest add @iconiq/shimmer-text - Text Loop: Cycling text with vertical slide transitions—pass your own items and interval for rotating headlines or status copy. Docs: https://iconiqui.com/texts/text-loop Install: npx shadcn@latest add @iconiq/text-loop - Text Inertia: Pointer-reactive word treatment that tracks local cursor velocity, applies that momentum to the hovered word, and springs the word back into place. Docs: https://iconiqui.com/texts/text-inertia Install: npx shadcn@latest add @iconiq/text-inertia - Typewriter: Looping typewriter text effect that types a string character by character, briefly swaps in glitch characters, and finishes each pass with a blinking cursor. Docs: https://iconiqui.com/texts/typewriter Install: npx shadcn@latest add @iconiq/typewriter