# Iconiq > Open-source React components delivered through the shadcn registry with editable, polished UI primitives. Iconiq is a React component library delivered through the shadcn registry workflow. The site includes component docs, live playgrounds, installation instructions, and a local changelog. ## 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/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 - Changelog: Release notes rendered from the local changelog source file, covering added, updated, and fixed work. https://iconiqui.com/changelog ## Components (30) - Accordion: Each row is described by a simple object and rendered as a single-expand accordion item. Docs: https://iconiqui.com/components/accordion Install: npx shadcn@latest add @iconiq/accordion - Alert: Default export for a single dismissible notice. It can render inline with surrounding content or portal to the viewport when you provide a position. Docs: https://iconiqui.com/components/alert Install: npx shadcn@latest add @iconiq/alert - Avatar: Compact motion avatar with a canonical Avatar export, optional image source, and fallback text for empty states. Docs: https://iconiqui.com/components/avatar Install: npx shadcn@latest add @iconiq/avatar - Badge: Default export for a compact label pill with a permanent shimmer pass layered behind the content. Docs: https://iconiqui.com/components/badge Install: npx shadcn@latest add @iconiq/badge - Breadcrumbs: Each breadcrumb segment is described by a small object consumed by the Breadcrumbs component. Docs: https://iconiqui.com/components/breadcrumbs Install: npx shadcn@latest add @iconiq/breadcrumbs - Button: Ref-forwarding button built on motion.button plus a CVA recipe for size and variant styling. Docs: https://iconiqui.com/components/button Install: npx shadcn@latest add @iconiq/button - Button group: Standalone motion button with a light upward entrance, hover scale, and a small label nudge inside the content span. Docs: https://iconiqui.com/components/button-group Install: npx shadcn@latest add @iconiq/button-group - Calendar: Animated monthly calendar card that now supports both controlled and uncontrolled month and selection state. Docs: https://iconiqui.com/components/calendar Install: npx shadcn@latest add @iconiq/calendar - Carousel: Single exported testimonial carousel with internal pagination state, swipe gestures, animated slide transitions, and built-in arrow and dot controls. Docs: https://iconiqui.com/components/carousels Install: npx shadcn@latest add @iconiq/carousels - Collapsible: Root wrapper around Radix Collapsible.Root with a small internal context used by the custom content animation. Docs: https://iconiqui.com/components/collapsible Install: npx shadcn@latest add @iconiq/collapsible - Combobox: Each selectable row is described by a plain object and can optionally include a secondary description line. Docs: https://iconiqui.com/components/combobox Install: npx shadcn@latest add @iconiq/combobox - Context menu: Stateful wrapper that listens for the native contextmenu event on a local surface and renders a fixed-position floating menu. Docs: https://iconiqui.com/components/context-menu Install: npx shadcn@latest add @iconiq/context-menu - Drawer: Single exported overlay drawer controlled entirely from parent state, with side-based panel motion and built-in body scroll locking. Docs: https://iconiqui.com/components/drawer Install: npx shadcn@latest add @iconiq/drawer - Dialog: Dialog, DialogTrigger, DialogClose, and DialogPortal are direct re-exports of the matching Radix dialog primitives. Docs: https://iconiqui.com/components/dialog Install: npx shadcn@latest add @iconiq/dialog - 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/components/dropdown Install: npx shadcn@latest add @iconiq/dropdown - 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/components/file-upload Install: npx shadcn@latest add @iconiq/file-upload - Hover card: Stateful wrapper that opens and closes a local callout from pointer and focus events with configurable delays. Docs: https://iconiqui.com/components/hover-card Install: npx shadcn@latest add @iconiq/hover-card - Input: Animated text input with a canonical Input export, always-visible label, and built-in helper behaviors for password, search, and email states. Docs: https://iconiqui.com/components/input Install: npx shadcn@latest add @iconiq/input - Input group: Floating-label input field with optional prefix and suffix slots, a center-out focus rule, and inline error messaging driven entirely by props. Docs: https://iconiqui.com/components/input-group Install: npx shadcn@latest add @iconiq/input-group - Popover: Standard shadcn-style export: `Popover` is `PopoverPrimitive.Root`, matching what the CLI installs into `components/ui/popover`. Docs: https://iconiqui.com/components/popover Install: npx shadcn@latest add @iconiq/popover - Checkbox group: Each option row is described with a plain object and rendered as an animated button. Docs: https://iconiqui.com/components/checkbox-group Install: npx shadcn@latest add @iconiq/checkbox-group - Radio group: Options are plain objects consumed by the RadioGroup component. Docs: https://iconiqui.com/components/radiogroup Install: npx shadcn@latest add @iconiq/radiogroup - Select: Each selectable row is described by a plain object and rendered inside a portaled menu. Docs: https://iconiqui.com/components/select Install: npx shadcn@latest add @iconiq/select - Slider: Pointer-driven range control with optional controlled or uncontrolled value management. Docs: https://iconiqui.com/components/slider Install: npx shadcn@latest add @iconiq/slider - Spinner: Default export for a lightweight loading indicator built around an output element. Docs: https://iconiqui.com/components/spinner Install: npx shadcn@latest add @iconiq/spinner - Switch: Animated switch with a canonical Switch export. Checked state is expected to come from the parent. Docs: https://iconiqui.com/components/switch Install: npx shadcn@latest add @iconiq/switch - 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/components/table Install: npx shadcn@latest add @iconiq/table - Tabs: Root provider that manages the active value, hover state, trigger measurements, and the shared animated panel transition. Docs: https://iconiqui.com/components/tabs Install: npx shadcn@latest add @iconiq/tabs - Toggle: Single pressed-state toggle built on Radix Toggle, with Motion-driven button, icon, and ripple feedback layered over shadcn-style size and variant classes. Docs: https://iconiqui.com/components/toggle Install: npx shadcn@latest add @iconiq/toggle - Tooltip: Animated tooltip with a canonical Tooltip export. It owns its own open state and toggles in response to hover and focus events. Docs: https://iconiqui.com/components/tooltip Install: npx shadcn@latest add @iconiq/tooltip