# 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 - Marketplace: VS Code Marketplace install page for the Iconiq UI extension, with links to the extension README and registry guides. https://iconiqui.com/marketplace - MCP: MCP setup guide for connecting Iconiq to AI coding tools through the shadcn registry workflow. https://iconiqui.com/mcp ## Components (79) - Bento Builder: Interactive bento-grid layout tool — drag tiles to reposition, tap to rename, drag a corner to resize, add tiles, then export the generated grid layout code to drop straight into your own project. Docs: https://iconiqui.com/builder/bento-builder Install: npx shadcn@latest add @iconiq/bento-builder - AI Input: Chat-style composer that stacks sent messages above the input as bubbles, exposes agent and model selector chips, and plays an Apple Intelligence-style gradient wave inside the surface when a message is sent. Docs: https://iconiqui.com/blocks/ai-input Install: npx shadcn@latest add @iconiq/ai-input - Banner: Top-of-screen announcement banner with four gradient tones, a left-aligned ringed icon and message, a right-aligned outlined action, a dismiss collapse, and a fluid spring morph that melts the bar into a confirmation pill when its action is clicked. Docs: https://iconiqui.com/blocks/banner Install: npx shadcn@latest add @iconiq/banner - Code Block: Editor-style code block with a filename tab, a top-right spring-crossfade copy button, a bottom status bar with language and line count, line numbers, built-in theme-aware syntax highlighting, and line emphasis. Docs: https://iconiqui.com/blocks/code-block Install: npx shadcn@latest add @iconiq/code-block - Contribution Graph: GitHub-style contribution calendar with compound calendar, block, total-count, and legend parts — pass raw Activity data or just a GitHub username and it fetches and caches the last year of contributions itself, shimmers a skeleton grid while loading, then fades the muted grid in and lights the greens up level by level — lightest to darkest — with springy pops, plus custom per-day tooltips and reduced-motion aware behavior. Docs: https://iconiqui.com/blocks/contribution-graph Install: npx shadcn@latest add @iconiq/contribution-graph - Feedback Form: Feedback Form component documentation. Docs: https://iconiqui.com/blocks/feedback-form Install: npx shadcn@latest add @iconiq/feedback-form - Logo Carousel: Logo Carousel component documentation. Docs: https://iconiqui.com/blocks/logo-carousel Install: npx shadcn@latest add @iconiq/logo-carousel - Message: Composable chat message primitives — group, row, avatar, bubble, header, and footer — where each message slides in beside its composer with a bouncy spring: sent messages arrive from the right, received from the left, morphing up from the bubble's tail corner and bouncing back once as they land, plus reduced-motion aware behavior. Docs: https://iconiqui.com/blocks/message Install: npx shadcn@latest add @iconiq/message - Reasoning Steps: Base UI collapsible reasoning trace for AI replies with a shimmering trigger label and no status icon, per-step dots that pop into checkmarks once done, a self-timing elapsed-seconds readout, a crossfading collapsed preview of the current step, and a staggered vertical timeline once expanded. Docs: https://iconiqui.com/blocks/reasoning-steps Install: npx shadcn@latest add @iconiq/reasoning-steps - Scroll Progress: Ruler-style scroll indicator with tick marks that fill in as the page scrolls and a live percentage readout, dockable to either side or bottom corner of the viewport or a scrollable container. Docs: https://iconiqui.com/blocks/scroll-progress Install: npx shadcn@latest add @iconiq/scroll-progress - Setup Checklist: Animated onboarding checklist card with staggered task rows, a drawn checkmark badge, and a floating progress pill with a spring-smoothed pie. Docs: https://iconiqui.com/blocks/setup-checklist Install: npx shadcn@latest add @iconiq/setup-checklist - Streaming Text: Word-by-word AI text streaming where each word fades in crisply wearing a blue gradient, then crossfades into the theme foreground once settled — black in light mode, white in dark — with a pulsing gradient dot at the stream head, natural prose wrapping, sr-only full-text announcement, and reduced-motion aware behavior. Docs: https://iconiqui.com/blocks/streaming-text Install: npx shadcn@latest add @iconiq/streaming-text - Team Invitation: Team invitation block with fluid morphing variants for inviting members, managing the team, assigning roles, and tracking pending invites. Docs: https://iconiqui.com/blocks/team-invitation Install: npx shadcn@latest add @iconiq/team-invitation - Testimonials: Inline testimonial wall where hovering one quote blurs and dims the rest while the author attribution reveals beside the highlighted quote. Pure CSS :has()-driven hover state — no per-frame JS animation. Docs: https://iconiqui.com/blocks/testimonials Install: npx shadcn@latest add @iconiq/testimonials - Thinking Indicator: AI loading state with a sparkle glyph that wobbles through liquid blob keyframes into a circle while a companion twinkle blooms on the same timeline, cycling status words that slide through a soft blur, a per-word shimmer sweep, layout-stable width, and reduced-motion aware behavior. Docs: https://iconiqui.com/blocks/thinking-indicator Install: npx shadcn@latest add @iconiq/thinking-indicator - Button: Base UI button with embedded Iconiq theme tokens, shadcn-style variants, spring press feedback, optional loading state, link rendering, 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, variants, 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 toggle buttons with shared variant, spacing, and orientation. Use spacing={0} for a connected segmented layout. 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 tinted fills, a shimmer-enabled default variant, a quieter dot variant, semantic color aliases, and optional icon or dismiss controls. Docs: https://iconiqui.com/display-and-content/badge Install: npx shadcn@latest add @iconiq/badge - Calendar: Animated monthly calendar with single-day or range selection, bounds, modifiers, locale-aware labels, 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 slot-based sections, optional interactive lift, and layout-aware motion between content states. Docs: https://iconiqui.com/display-and-content/card Install: npx shadcn@latest add @iconiq/card - Carousel: Root carousel region wired to Embla. Exposes scroll state through `useCarousel`, supports responsive nav placement, optional autoplay, and keyboard navigation for horizontal and vertical layouts. 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 fades the surface in on mount. Docs: https://iconiqui.com/display-and-content/charts Install: npx shadcn@latest add @iconiq/charts - Date Picker: Collapsible date field with a read-only Base UI input trigger and a portaled Iconiq Calendar panel. Docs: https://iconiqui.com/display-and-content/date-picker Install: npx shadcn@latest add @iconiq/date-picker - Favicon Badge: Inline circular badge that resolves a website favicon from a domain or URL, with an optional text label and spring entrance animation. Docs: https://iconiqui.com/display-and-content/favicon-badge Install: npx shadcn@latest add @iconiq/favicon-badge - Marker: Hand-drawn text annotations — wavy, circle, highlight, underline, and more — that draw themselves in like ink as they scroll into view, with an optional animate prop for a fully static render. Docs: https://iconiqui.com/display-and-content/marker Install: npx shadcn@latest add @iconiq/marker - Progress: Determinate and indeterminate progress—with subtle motion. Docs: https://iconiqui.com/display-and-content/progress Install: npx shadcn@latest add @iconiq/progress - Rating: Compound star rating built from Rating and RatingButton — hover to preview, click or use arrow keys to set the value, with configurable size on the root, a springy scale pop, and color fade that ripples across the stars. Docs: https://iconiqui.com/display-and-content/rating Install: npx shadcn@latest add @iconiq/rating - Rolling Digits: Inline animated counter that swaps digits with spring-driven transform, opacity, 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: Loading placeholder that renders a muted block with shimmer or fade animation, sensible defaults, and preset helpers for common shapes. Docs: https://iconiqui.com/display-and-content/skeleton Install: npx shadcn@latest add @iconiq/skeleton - Spinner: Default export for a lightweight loading indicator with ring, dots, or matrix variants, size presets, and accessibility controls. Docs: https://iconiqui.com/display-and-content/spinner Install: npx shadcn@latest add @iconiq/spinner - Status Dot: Inline status indicator with optional rippling halo, deployment presets, generic tones, and dot-only accessibility defaults. Docs: https://iconiqui.com/display-and-content/status-dot Install: npx shadcn@latest add @iconiq/status-dot - 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 - Timezone: Inline live clock that resolves friendly city names or IANA timezone strings, then animates digit changes with fluid spring rolls and pulsing separators. Docs: https://iconiqui.com/display-and-content/timezone Install: npx shadcn@latest add @iconiq/timezone - Verified Badge: Inline X-style verified scallop with a check. Use shimmer or static variants, size presets, and brand/gold/neutral tones. Docs: https://iconiqui.com/display-and-content/verified-badge Install: npx shadcn@latest add @iconiq/verified-badge - Week Calendar: Week strip that morphs into a full month grid, with a shared-layout spring pill and a draggable grabber handle. Docs: https://iconiqui.com/display-and-content/week-calendar Install: npx shadcn@latest add @iconiq/week-calendar - 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 - 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: Provider-switchable single checkbox layered over Base UI or Radix primitives with optional label, description, and form-field props. Docs: https://iconiqui.com/inputs-and-forms/checkbox Install: npx shadcn@latest add @iconiq/b-checkbox - Checkbox Group: A single checkbox row composed as a child of CheckboxGroup or CheckboxGroupSection. 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, presets, popover mode, 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 paste support, validation, optional real upload hooks, controlled queue state, and accessible progress feedback. Docs: https://iconiqui.com/inputs-and-forms/file-upload Install: npx shadcn@latest add @iconiq/file-upload - Input: Input with a spring-animated caret. Docs: https://iconiqui.com/inputs-and-forms/input Install: npx shadcn@latest add @iconiq/input - Input OTP: Root wrapper around Base UI OTP Field with optional label, description, error message, size, and invalid styling for complete form-field semantics. 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 single or dual-thumb value management, field chrome, and formatting helpers. Docs: https://iconiqui.com/inputs-and-forms/slider Install: npx shadcn@latest add @iconiq/b-slider - Switch: Binary on or off control with motion-driven thumb travel, foreground fill sweep, and optional label and description field chrome. 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 syncing the `dark` class on `document.documentElement`, persisting to `localStorage`, and falling back to `prefers-color-scheme` when no saved preference exists. Docs: https://iconiqui.com/inputs-and-forms/theme-toggle Install: npx shadcn@latest add @iconiq/theme-toggle - Wheel Picker: iOS-style wheel picker with a 3D barrel, drag and flick inertia, detent snapping, velocity-driven motion blur, a per-row emphasis morph into the selection lens, optional looping columns, and reduced-motion aware springs. Docs: https://iconiqui.com/inputs-and-forms/wheel-picker Install: npx shadcn@latest add @iconiq/wheel-picker - 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 ribbon that duplicates content into a seamless marquee track with theme variants, viewport-aware repeat, reduced-motion support, and optional link banners. 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 by default. Docs: https://iconiqui.com/layout-and-toolbars/selection-toolbar Install: npx shadcn@latest add @iconiq/selectiontoolbar - Separator: Horizontal or vertical divider with solid, dashed, and dotted variants plus tone, spacing, and inset helpers. 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, substring search, optional recent commands, async search, and keyboard navigation. 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, selection, focus, hover highlight bounds, search filtering, and shared visual settings. Docs: https://iconiqui.com/navigation/file-tree Install: npx shadcn@latest add @iconiq/file-tree - Tabs: Radix tabs root with theme fallbacks, measured indicator motion, optional content transitions, and controlled or uncontrolled state with safe fallbacks. Docs: https://iconiqui.com/navigation/tabs Install: npx shadcn@latest add @iconiq/tabs - Alert Dialog: Alert dialog with asChild triggers, action variants, optional media, controlled async flows, and reduced-motion aware transitions layered over Base UI primitives. 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 that sweeps a multicolor gradient band across one string or rotates through multiple strings while preserving the same baseline flow. 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 text treatment that moves a highlight band across one string of copy while keeping the base text readable in both light and dark themes. Docs: https://iconiqui.com/texts/shimmer-text Install: npx shadcn@latest add @iconiq/shimmer-text - Text Loop: Cycling text treatment that advances through child items on an interval, animating each change with a vertical slide and fade. Docs: https://iconiqui.com/texts/text-loop Install: npx shadcn@latest add @iconiq/text-loop