# Avara UI

> Avara UI is a library of 189 animated, responsive React components, published as a shadcn registry. The shadcn CLI copies each component's source into your project — there is no npm package to install. Components are built with React, TypeScript and Tailwind CSS v4.

Install rule: register the registry once per project with `npx shadcn@latest registry add @algorize-ui=https://algorize-ui.vercel.app/r/{name}.json`, then add items as `npx shadcn@latest add @algorize-ui/<name>`. Without registering, add by URL: `npx shadcn@latest add https://algorize-ui.vercel.app/r/<name>.json`. The CLI installs each item's npm dependencies and any registry items it depends on.

Project setup: Tailwind CSS v4 must be working, and `npx shadcn@latest init` must have created `components.json` and the `cn` helper in `lib/utils.ts`. Components import through the `@/` path alias. Most components install to `components/custom/blocks/`.

Frameworks: docs are served for Next.js (`/docs/nextjs/<page>`) and React (`/docs/reactjs/<page>`). Installation and Quick Start are separate guides per framework; component pages are shared, and components import nothing from `next/*`.

Markdown: every docs page is also published as Markdown at `https://avaraui.com/docs-md/<framework>-<page>.md`. The links below point to those files.

Animation builds: 11 components ship a Motion build beside their default GSAP build, installed as `<name>-motion`. Install one or the other — they write the same file.

## Documentation

- [Introduction](https://avaraui.com/docs-md/nextjs-index.md): Algorize UI is a library of 189 animated, responsive React components — from buttons and inputs to dashboards, carousels and full marketing sections.
- [Installation (Next.js)](https://avaraui.com/docs-md/nextjs-installation.md): Set up a Next.js project so you can install Algorize UI components with the shadcn CLI.
- [Installation (React)](https://avaraui.com/docs-md/reactjs-installation.md): Set up a React + Vite project so you can install Algorize UI components with the shadcn CLI.
- [Quick Start (Next.js)](https://avaraui.com/docs-md/nextjs-first-app.md): Get an Algorize UI component on screen in a new Next.js app. For an existing project, follow the Installation guide instead.
- [Quick Start (React)](https://avaraui.com/docs-md/reactjs-first-app.md): Get an Algorize UI component on screen in a new React + Vite app. For an existing project, follow the Installation guide instead.
- [MCP](https://avaraui.com/docs-md/nextjs-mcp.md): Connect your AI assistant to the Algorize UI registry. With the shadcn MCP server it can browse, search and install components from plain-language prompts — no copy-pasting commands.
- [All components](https://avaraui.com/docs/nextjs/all-components): Every component, grouped by category.
- [Themes](https://avaraui.com/themes): Pick or customise a theme and copy its CSS variables into your global stylesheet.

## UI Components (114)

- [3D Carousel](https://avaraui.com/docs-md/nextjs-3d-carousel.md): A premium 3D carousel with a fanned layout, smooth interactive animations, and a sleek adaptive aesthetic. Install: `@algorize-ui/carousel-3d`, `@algorize-ui/carousel-3d-motion`.
- [Accordion](https://avaraui.com/docs-md/nextjs-accordion.md): A data-driven accordion built on the Radix primitive, with five list variants and an interactive Brand Logo Reveal showcase variant. Install: `@algorize-ui/accordion`.
- [Ai-Chat](https://avaraui.com/docs-md/nextjs-ai-chat.md): A premium, interactive LLM chat interface featuring conversation history management, real-time typing indicators, editable chat titles, and a full prompt composer — a + menu for files and `@Mention` tools, a rocket upload indicator, a model picker, a Faster ↔ Smarter effort slider, and voice dictation with a live waveform. Install: `@algorize-ui/ai-chat`, `@algorize-ui/ai-chat-motion`.
- [Alert](https://avaraui.com/docs-md/nextjs-alert.md): A highly versatile Alert component designed to communicate states and important information to your users. Install: `@algorize-ui/alert`.
- [Animated List](https://avaraui.com/docs-md/nextjs-animated-list.md): A hyper-polished list component that staggers its children into view using 3D perspective transforms (no animation library), complete with a mouse-tracking glassmorphic spotlight hover effect. Install: `@algorize-ui/animated-list`.
- [Animated Timeline](https://avaraui.com/docs-md/nextjs-animated-timeline.md): A highly dynamic, scroll-aware timeline engine featuring Intersection Observers and multiple 3D/2D entry animations. Install: `@algorize-ui/animated-timeline`.
- [Animated Typography](https://avaraui.com/docs-md/nextjs-animated-typography.md): A highly accessible, semantic typography engine that supports all standard HTML text tags with advanced, staggered visual effects and deep layout controls. Install: `@algorize-ui/animated-typography`.
- [Api Playground](https://avaraui.com/docs-md/nextjs-api-playground.md): A highly advanced, interactive split-pane block for testing API requests directly inside documentation. Install: `@algorize-ui/api-playground`.
- [Apple Select](https://avaraui.com/docs-md/nextjs-apple-select.md): Recreates the iOS text-selection look — a translucent highlight with a lollipop handle on either end — over any string you give it. Install: `@algorize-ui/apple-select`.
- [Audio Player](https://avaraui.com/docs-md/nextjs-audio-player.md): An audio player with artwork, transport, scrubber and volume — in a hero card, a compact bar, or wrapped around the browser's native controls. Install: `@algorize-ui/audio-player`, `@algorize-ui/video-player-plyr`.
- [Avatar Stack](https://avaraui.com/docs-md/nextjs-avatar-stack.md): A row of overlapping faces — the "people who…" cue under a headline, beside a count, or next to a join button. Install: `@algorize-ui/avatar-stack`.
- [Book Flip](https://avaraui.com/docs-md/nextjs-book-flip.md): An interactive 3D Book Flip component simulating realistic book page turns, dynamic spine shifts, center fold shadows, leaf peeking, and bottom icon toolbar controls. Install: `@algorize-ui/book-flip`.
- [Booking Card](https://avaraui.com/docs-md/nextjs-booking-card.md): A booking panel that goes inside any card: a strip of days paged a week at a time, time slots in groups, a button that reads the choice back before anyone confirms, and a confirmation that draws itself in over the form once the booking is made. Install: `@algorize-ui/booking-card`.
- [Breadcrumb](https://avaraui.com/docs-md/nextjs-breadcrumb.md): A navigational aid that helps users understand their current location within a website's hierarchy. Install: `@algorize-ui/breadcrumb`.
- [Buttons](https://avaraui.com/docs-md/nextjs-button.md): An animated glowing-border Button component engineered with a spinning conic-gradient line tracking the 4 edges of the button, smooth click ripple physics, loading states, and full theme synchronization. Install: `@algorize-ui/button`.
- [Calendar](https://avaraui.com/docs-md/nextjs-calendar.md): A comprehensive, interactive calendar dashboard and date-picker system. Includes built-in event management, filtering, dynamic views (Month/Week/Day), and animated popover modals. Install: `@algorize-ui/calendar`.
- [Card](https://avaraui.com/docs-md/nextjs-card.md): A flexible container used to group related information and actions together in a visually distinct box. Install: `@algorize-ui/card`.
- [Card Stack](https://avaraui.com/docs-md/nextjs-card-stack.md): A layered deck of cards featuring fluid drag-to-discard gestures, button-driven directional slide animations, and realistic depth perspective. Install: `@algorize-ui/card-stack`, `@algorize-ui/card-stack-motion`.
- [Carousel](https://avaraui.com/docs-md/nextjs-carousel.md): A collection of highly interactive carousel components for image galleries, hero sections, and fluid presentations. Install: `@algorize-ui/carousel`.
- [Cart](https://avaraui.com/docs-md/nextjs-cart.md): A complete, production-ready Cart component designed for modern e-commerce applications. Install: `@algorize-ui/cart`.
- [Chart](https://avaraui.com/docs-md/nextjs-chart.md): A beautiful, completely custom charting engine built from the ground up for modern React applications. Install: `@algorize-ui/chart`.
- [Chat](https://avaraui.com/docs-md/nextjs-chat.md): A fully interactive, encapsulated chat interface. Features include search filtering, simulated typing/replies, dynamic unread badges, auto-scrolling, and a responsive mobile drawer sidebar. Install: `@algorize-ui/chat`.
- [Chat Bubble](https://avaraui.com/docs-md/nextjs-chat-bubble.md): A complete, CSS-animated compound component system for building highly customized chat interfaces, messengers, and support widgets. Install: `@algorize-ui/chat-bubble`.
- [Circular Text](https://avaraui.com/docs-md/nextjs-circular-text.md): Words set on a circle, turning slowly, with room in the middle for a mark, a play button or a link. Install: `@algorize-ui/circular-text`.
- [Collapsible](https://avaraui.com/docs-md/nextjs-collapsible.md): An interactive component which expands/collapses a panel. Install: `@algorize-ui/collapsible`.
- [Color Picker](https://avaraui.com/docs-md/nextjs-color-picker.md): An advanced, feature-rich 360° Color Spectrum Wheel and Gradient Studio Generator component suite featuring real-time 2D color wheel spectrum tracking, lightness & opacity sliders, live shades & tints scale, color harmonies generator, dual/triple stop gradient creator, angle dial, and one-click CSS copy. Install: `@algorize-ui/color-picker`.
- [Command](https://avaraui.com/docs-md/nextjs-command.md): A powerful, composable command menu palette for searching data and triggering quick actions. Install: `@algorize-ui/command`.
- [Components Folder](https://avaraui.com/docs-md/nextjs-design-components-folder.md): An interactive multi-tab component folder showcasing live AI Chat, Real-time Analytics, Auth Form, and CLI Terminal components inside a sleek desktop window interface. Install: `@algorize-ui/design-components-folder`, `@algorize-ui/design-folder-box`.
- [Designs Toolkit](https://avaraui.com/docs-md/nextjs-designs-toolkit.md): A pinned resource toolkit grid inspired by creative studio moodboards and curated design directories. Install: `@algorize-ui/designs-toolkit`.
- [ContextMenu](https://avaraui.com/docs-md/nextjs-context-menu.md): Displays a menu to the user — such as a set of actions or functions — triggered by a right-click. Install: `@algorize-ui/context-menu`.
- [Conversation Timeline](https://avaraui.com/docs-md/nextjs-conversation-timeline.md): A dense rail of thin marks, one per message, that expands into a labelled list on hover. Install: `@algorize-ui/conversation-timeline`.
- [Copy Button](https://avaraui.com/docs-md/nextjs-copy-button.md): A button that puts text on the clipboard and says so — the icon pops from a clipboard to a check, the label rises from "Copy" to "Copied!", and both settle back after a moment. Install: `@algorize-ui/copy-button`.
- [Counter](https://avaraui.com/docs-md/nextjs-counter.md): A multi-purpose, highly animated Counter component. Whether you need a user-interactive Stepper for e-commerce, an animated statistics ticker, a circular progress tracker, or a promotional countdown timer, this block handles it all with built-in fluid animations. Install: `@algorize-ui/counter`.
- [Cursor Animation](https://avaraui.com/docs-md/nextjs-cursor-animation.md): An interactive, 100% full-width and responsive custom cursor component with 10 distinct animation variants including fluid physics, particle trails, magnetic targeting, spotlight masking, and precision crosshairs. Install: `@algorize-ui/cursor-animation`.
- [Curved Carousel](https://avaraui.com/docs-md/nextjs-curved-carousel.md): An interactive, 100% full-width 3D curved arc carousel featuring left-to-right oscillating auto-sway motion, smooth Motion spring physics, perspective depth cards, and dynamic site theme color binding. Install: `@algorize-ui/curved-carousel`.
- [Custom Code Block](https://avaraui.com/docs-md/nextjs-custom-code-block.md): A beautiful, robust code block component with manual syntax highlighting, automatic language icons, and clipboard copy functionality. Install: `@algorize-ui/custom-code-block`.
- [Data Grid](https://avaraui.com/docs-md/nextjs-data-grid.md): A high-performance, fully keyboard-navigable data table with Excel-style inline editing. Install: `@algorize-ui/data-grid`.
- [Data Maps](https://avaraui.com/docs-md/nextjs-data-maps.md): A choropleth world map colouring countries by metric, with fill and dot variants. Use it for geographic analytics and regional breakdowns. Install: `@algorize-ui/data-maps`.
- [Data Table](https://avaraui.com/docs-md/nextjs-data-table.md): A powerful, fully-featured data table component built on top of Table primitives. Install: `@algorize-ui/table`.
- [Date Picker](https://avaraui.com/docs-md/nextjs-date-picker.md): A completely custom, dependency-free Date Picker component. Native HTML `<input type="date">` elements vary wildly between browsers and operating systems, often breaking the visual consistency of your application. Install: `@algorize-ui/date-picker`.
- [Dialog](https://avaraui.com/docs-md/nextjs-dialog.md): A window overlaid on either the primary window or another dialog window, rendering the background content underneath inert. Install: `@algorize-ui/dialog`.
- [Dock](https://avaraui.com/docs-md/nextjs-dock.md): A premium, macOS-inspired navigation dock featuring real-time physics magnification, floating label tooltips, active application indicators, and notification badges. Install: `@algorize-ui/dock`, `@algorize-ui/dock-motion`.
- [Draggable Card List](https://avaraui.com/docs-md/nextjs-draggable-card-list.md): An interactive, fluid Draggable Card List component featuring spring-driven reordering (in a GSAP build and a Motion build that move identically), right-side grip handles, light pastel badges with borders, left accent bars, and dynamic hover border color shifts. Install: `@algorize-ui/draggable-card-list`, `@algorize-ui/draggable-card-list-motion`.
- [Drawer](https://avaraui.com/docs-md/nextjs-drawer.md): A highly animated, responsive drawer component. Built entirely from scratch, with plain CSS transitions for butter-smooth entering and exiting animations — no animation library. Install: `@algorize-ui/drawer`.
- [Falling Tags](https://avaraui.com/docs-md/nextjs-falling-tags.md): A physics-based interactive tags playground inspired by the viral Falling Tags Framer component by Guo. Install: `@algorize-ui/falling-tags`.
- [File Upload](https://avaraui.com/docs-md/nextjs-file-upload.md): A highly-orchestrated, premium file upload component suite based on modern UX engineering principles. Install: `@algorize-ui/upload`, `@algorize-ui/input`, `@algorize-ui/folder`, `@algorize-ui/folder-motion`.
- [Floating ContactButton](https://avaraui.com/docs-md/nextjs-floating-contact-button.md): A high-converting, interactive floating support widget that anchors to any screen corner. Install: `@algorize-ui/floating-contact-button`.
- [Flow Gallery](https://avaraui.com/docs-md/nextjs-flow-gallery.md): Horizontal and diagonal 3D cascading gallery stream with continuous auto-flow motion, drag inertia physics, and isometric perspective options. Install: `@algorize-ui/flow-gallery`.
- [Folder](https://avaraui.com/docs-md/nextjs-folder.md): A tactile folder — unified skeleton cards (or your own photos) tuck behind a frosted-glass front pocket. Install: `@algorize-ui/folder`, `@algorize-ui/folder-motion`.
- [Form](https://avaraui.com/docs-md/nextjs-form.md): A high-fidelity Form toolkit engineered for both simple landing pages and complex enterprise dashboards. Install: `@algorize-ui/form`.
- [Gallery](https://avaraui.com/docs-md/nextjs-gallery.md): A dynamic visual showcase featuring six interactive variants: a revolving 3D circular photo orbit ring, an interactive 3D video sphere gallery, a GSAP Flip self-rearranging moving bento grid, an interactive circular reel dial spinner, a 3D layered pill carousel, and a Framer-inspired 3D curved arc carousel gallery. Install: `@algorize-ui/gallery`.
- [Glass Panel](https://avaraui.com/docs-md/nextjs-glass-panel.md): A frosted surface in four shapes, and the aurora ground it sits on. `GlassBackdrop` washes three colours behind a 12-column bento grid and sets the surface for everything inside; `GlassPanel` is one glass recipe — blur, hairline border, inset highlight — whose `shape` encodes hierarchy: a `slab` for the hero, a `tile` for content, a `disc` for a single number, a `capsule` for chips. Install: `@algorize-ui/glass-panel`.
- [Half Stars](https://avaraui.com/docs-md/nextjs-half-stars.md): A sleek, customizable star rating component for Next.js applications that supports exact decimal ratings (e.g., 3.7 or 4.5) through SVG clip paths. Install: `@algorize-ui/half-stars`.
- [Heart Signal](https://avaraui.com/docs-md/nextjs-heart-signal.md): A slow, ultra-smooth cardiac telemetry and pulse visualization component with 3 distinct animation variants (`ecg-line`, `pulse-heart`, and `cardiac-wave`), live BPM badge, and active theme color integration. Install: `@algorize-ui/heart-signal`.
- [Image Compare](https://avaraui.com/docs-md/nextjs-image-compare.md): An interactive, responsive image comparison slider component featuring 10 distinct visual comparison modes, fluid touch/mouse drag physics, custom label badges, and dynamic site theme color binding. Install: `@algorize-ui/image-compare`.
- [Image Viewer](https://avaraui.com/docs-md/nextjs-image-viewer.md): A collection of 4 production-ready, interactive, fully responsive E-commerce Product Image Viewer components featuring inner lens magnifying zoom, 3–10x floating zoom loupe, floating arrow carousel sliders, and active thumbnail strips. Install: `@algorize-ui/image-viewer`.
- [Image Wall](https://avaraui.com/docs-md/nextjs-image-wall.md): A wall of screenshots that never ends, and a camera hanging over it. The camera rests zoomed in on one card; every few seconds it pulls back, glides to the next card and settles on it, brightening that card while the rest stay dimmed. Install: `@algorize-ui/image-wall`.
- [Infrastructure Topology](https://avaraui.com/docs-md/nextjs-infrastructure-topology.md): An interactive, fluid Infrastructure Topology component simulating live data flows across microservices, central neural mesh core routers, connected SVG beam pipelines, and real-time telemetry metrics. Install: `@algorize-ui/infrastructure-topology`.
- [Input](https://avaraui.com/docs-md/nextjs-input.md): A multi-purpose Input component with password toggles, autocomplete suggestions, and four layout variants. Install: `@algorize-ui/input`.
- [Invoice](https://avaraui.com/docs-md/nextjs-invoice.md): A complete, fully functional, and editable Invoice dashboard component featuring 3 distinct design variants: Default, Corporate Executive, and Neo-Brutalist. Install: `@algorize-ui/invoice`.
- [Item](https://avaraui.com/docs-md/nextjs-item.md): A versatile layout component for displaying structured content featuring media, titles, descriptions, and actions. Install: `@algorize-ui/item`.
- [Kbd](https://avaraui.com/docs-md/nextjs-kbd.md): A specialized typography component used to display keyboard buttons, shortcuts, and commands. Install: `@algorize-ui/kbd`.
- [Loader](https://avaraui.com/docs-md/nextjs-loader.md): A premium, dependency-free loading indicator component. Install: `@algorize-ui/loader`.
- [Magic Bento](https://avaraui.com/docs-md/nextjs-magic-bento.md): A premium grid layout system featuring CSS masking, continuously spinning gradient borders, and a real-time mouse-tracking spotlight effect. Install: `@algorize-ui/magic-bento`.
- [Mails](https://avaraui.com/docs-md/nextjs-email.md): A premium, fully interactive email client featuring a modern SaaS aesthetic. It includes out-of-the-box state management for reading, starring, archiving, deleting, and composing emails, alongside a fully responsive mobile drawer sidebar. Install: `@algorize-ui/email`.
- [Map](https://avaraui.com/docs-md/nextjs-fleet-tracker.md): An interactive, responsive fleet management dashboard featuring a synchronized sidebar and live map integration using React Leaflet. Install: `@algorize-ui/fleet-map`.
- [Marquee](https://avaraui.com/docs-md/nextjs-marquee.md): An infinite, seamless scrolling container ideal for logos, testimonials, and image galleries. Install: `@algorize-ui/marquee`.
- [Masonry Grid](https://avaraui.com/docs-md/nextjs-masonry-grid.md): A high-performance masonry layout that tightly packs items of varying heights. Rather than relying on heavy JavaScript calculations or absolute positioning frameworks, this component utilizes standard CSS multi-column layout (`columns-N`) to flow items naturally. Install: `@algorize-ui/masonry-grid`, `@algorize-ui/masonry-grid-motion`.
- [Memories Card](https://avaraui.com/docs-md/nextjs-memories-card.md): A premium, interactive card stack component featuring real-time 3D tilt physics, a dynamic "fan" background spread, and smooth swipe-to-next gestures. Install: `@algorize-ui/memories-card`, `@algorize-ui/memories-card-motion`.
- [Menubar](https://avaraui.com/docs-md/nextjs-menubar.md): A visually persistent, OS-style menu component that provides quick access to a consistent set of commands. Install: `@algorize-ui/menubar`.
- [Mobile Mockups](https://avaraui.com/docs-md/nextjs-mobile-mockup.md): A stunning, fully responsive collection of mobile device mockups engineered for Next.js, allowing you to present your app designs, images, or autoplaying videos in gorgeous, high-fidelity hardware frames. Install: `@algorize-ui/mobile-mockup`.
- [Modal](https://avaraui.com/docs-md/nextjs-modal.md): A versatile, accessible dialog component with built-in design variants. Choose from pre-configured variants (`standard`, `confirmation`, `form`, `fullscreen`, `glass`, `liquid-glass`) to instantly get complete layout, responsive sizing, and interactive buttons—or use composable subcomponents for custom dialogs. Install: `@algorize-ui/modal`.
- [Modern Scroll Stack](https://avaraui.com/docs-md/nextjs-modern-scroll-stack.md): A tactile scroll-driven card stacking section where individual service cards slide up from the bottom of the viewport with staggered horizontal offsets and smoothly tilt into organic resting angles (`0°`, `+3.5°`, `-4.5°`, `+3.5°`) as they lock into the sticky deck. Install: `@algorize-ui/modern-scroll-stack`.
- [Navigation](https://avaraui.com/docs-md/nextjs-navigation.md): A highly composable, accessible, and smoothly animated navigation menu built for modern React applications. Install: `@algorize-ui/navigation-menu`.
- [Network Graph](https://avaraui.com/docs-md/nextjs-network-graph.md): A layered orbital avatar visual that spreads items evenly across concentric rings. Install: `@algorize-ui/network-graph`.
- [OTP Input](https://avaraui.com/docs-md/nextjs-otp-input.md): A fully accessible, developer-friendly multi-box input designed for One-Time Passwords and 2FA codes. Install: `@algorize-ui/otp-input`.
- [Pagination](https://avaraui.com/docs-md/nextjs-pagination.md): A complex navigation component that intelligently handles page rendering, ellipsis calculation, and edge bounds. Install: `@algorize-ui/pagination`.
- [Particle Canvas](https://avaraui.com/docs-md/nextjs-particle-canvas.md): An ultra-responsive, high-performance 2D HTML Canvas component that converts text into thousands of interactive particles with fluid, organic repulsion physics matching your active theme color. Install: `@algorize-ui/particle-canvas`.
- [Playable Piano](https://avaraui.com/docs-md/nextjs-piano.md): An interactive, responsive Playable Piano component featuring synthesized acoustic Web Audio API sounds, physical keyboard keybindings, volume control slider, and toggleable key label indicators. Install: `@algorize-ui/piano`.
- [Popover](https://avaraui.com/docs-md/nextjs-popover.md): Displays rich, interactive content in a portal, triggered by a click. Install: `@algorize-ui/popover`.
- [Progress](https://avaraui.com/docs-md/nextjs-progress.md): A flexible, smoothly animated progress indicator built to handle loading states, storage meters, or step-by-step wizards. Install: `@algorize-ui/progress`.
- [QR Code](https://avaraui.com/docs-md/nextjs-qr-code-generator.md): A premium, dual-purpose QR Code component suite built for Next.js applications. Install: `@algorize-ui/qr-code-generator`, `@algorize-ui/qr-code-reader`.
- [Radial Orbital Timeline](https://avaraui.com/docs-md/nextjs-radial-orbital-timeline.md): A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Install: `@algorize-ui/radial-orbital-timeline`.
- [Range Date Picker](https://avaraui.com/docs-md/nextjs-range-date-picker.md): An interactive Range Date Picker component featuring single month, dual-month, and rate-priced calendar layouts for hotel or flight booking applications. Install: `@algorize-ui/range-date-picker`.
- [Resizable](https://avaraui.com/docs-md/nextjs-resizable.md): A high-performance system for building resizable panel layouts, complete with keyboard accessibility and nested group support. Install: `@algorize-ui/resizable`.
- [Scroll Area](https://avaraui.com/docs-md/nextjs-scroll-area.md): Augments native scroll functionality for custom, cross-browser styling. Install: `@algorize-ui/scroll-area`.
- [Scroll Split Cards](https://avaraui.com/docs-md/nextjs-scroll-split-cards.md): A cinematic scroll-driven storytelling component featuring a unified panoramic landscape that splits into three distinct physical card panels upon scrolling. Install: `@algorize-ui/scroll-split-cards`.
- [Scroll Stack](https://avaraui.com/docs-md/nextjs-scroll-stack.md): A premium collection of scroll-driven 3D card stacking layouts engineered exclusively with GSAP's ScrollTrigger plugin. Install: `@algorize-ui/fan-stack`, `@algorize-ui/fan-stack-motion`, `@algorize-ui/scroll-stack`, `@algorize-ui/sticky-scroll-stack`, `@algorize-ui/sticky-scroll-stack-motion`, `@algorize-ui/split-scroll-stack`, `@algorize-ui/horizontal-scroll-stack`, `@algorize-ui/horizontal-rail`.
- [Secure Envelope](https://avaraui.com/docs-md/nextjs-secure-envelope.md): An interactive classified envelope sleeve & travel pass component featuring a secret card that glides out horizontally on hover and elevates gracefully onto the cover on click. Install: `@algorize-ui/secure-envelope`.
- [Select](https://avaraui.com/docs-md/nextjs-select.md): A completely custom, headless-style dropdown component. Native HTML `<select>` elements are notoriously difficult to style consistently across browsers. Install: `@algorize-ui/select`.
- [Selection Frame](https://avaraui.com/docs-md/nextjs-selection-frame.md): That box Figma draws around a selected layer — four corner handles and a crisp accent stroke — wrapped around any text span or block. Install: `@algorize-ui/selection-frame`.
- [Skeleton](https://avaraui.com/docs-md/nextjs-skeleton.md): A high-performance visual placeholder system used to reduce perceived loading times. Install: `@algorize-ui/skeleton`.
- [Social Links](https://avaraui.com/docs-md/nextjs-social-links.md): A row of brand marks that link out. Hand it the networks you have — X, GitHub, LinkedIn, YouTube, Instagram, Facebook, Discord, Dribbble, email — and it draws one tile per link, each with an accessible name, opening off-site links in a new tab. Install: `@algorize-ui/social-links`.
- [Sonner](https://avaraui.com/docs-md/nextjs-sonner.md): An opinionated, dependency-free toast component that mimics the famous "Sonner" library aesthetic. Install: `@algorize-ui/sonner`.
- [Squircle Carousel](https://avaraui.com/docs-md/nextjs-squircle-carousel.md): Horizontal flowing carousel where images are masked behind a grid of rounded cubes with snap physics and smooth inertia. Install: `@algorize-ui/squircle-carousel`.
- [Split-Flap Display](https://avaraui.com/docs-md/nextjs-split-flap.md): An authentic, physics-driven Split-Flap Display component (Solari board) simulating retro-mechanical flap cards, 3D perspective flips (`rotateX`), horizontal split creases, mechanical hinge notches, and realistic synthesized click sounds. Install: `@algorize-ui/split-flap`.
- [Stepper](https://avaraui.com/docs-md/nextjs-stepper.md): A production-grade, highly animated multi-step wizard component built on plain CSS transitions and the Web Animations API — no animation library. Install: `@algorize-ui/stepper`.
- [Table](https://avaraui.com/docs-md/nextjs-table.md): A set of composable table primitives. You write the rows; the component supplies the structure, spacing and theming. Install: `@algorize-ui/table`.
- [Table of Contents](https://avaraui.com/docs-md/nextjs-table-of-contents.md): An interactive, responsive Table of Contents navigation block engineered to sit on the left side of long documents, articles, or documentation pages. Install: `@algorize-ui/table-of-contents`.
- [Tabs](https://avaraui.com/docs-md/nextjs-vertical-tabs.md): A sleek, responsive tab navigation component. By default the rail runs across the top as a pill bar, with the active content pane below it — and when the tabs outgrow the width they scroll sideways instead of squashing. Install: `@algorize-ui/vertical-tabs`.
- [Tech Stack](https://avaraui.com/docs-md/nextjs-tech-stack.md): The "Built with" line: a label, then the marks of the tools a product is made with, in two rows — an odd group staggers as three over four, so the smaller row sits between the marks below it. Install: `@algorize-ui/tech-stack`.
- [Theme Switcher](https://avaraui.com/docs-md/nextjs-theme-switcher.md): A premium, animated dark mode toggle component built specifically for Next.js applications using `next-themes`. Install: `@algorize-ui/theme-switcher`.
- [Tilted Card](https://avaraui.com/docs-md/nextjs-tilted-card.md): A deeply interactive, parallax-driven 3D tilt component. It calculates the relative pointer coordinates and eases the card toward them through a small spring of its own (no animation library) to rotate it along the X and Y axes, mimicking a physical object held in space. Install: `@algorize-ui/tilted-card`.
- [Timeline](https://avaraui.com/docs-md/nextjs-timeline.md): A robust, multi-layout vertical timeline component for tracking complex events, order statuses, and company histories. Install: `@algorize-ui/timeline`.
- [Toast](https://avaraui.com/docs-md/nextjs-toast.md): A robust, highly-animated notification system. Popups and alerts are essential for user feedback, but most libraries are heavy, difficult to style, or lack smooth animations. Install: `@algorize-ui/toast`.
- [Toggle](https://avaraui.com/docs-md/nextjs-toggle.md): A two-state button that can be either on or off. Install: `@algorize-ui/toggle`.
- [Toggle Group](https://avaraui.com/docs-md/nextjs-toggle-group.md): A set of segmented, two-state buttons that can be toggled on or off, perfect for configuration settings and rich text editors. Install: `@algorize-ui/toggle-group`.
- [Tooltip](https://avaraui.com/docs-md/nextjs-tooltip.md): A context-aware popup that displays information when an element receives keyboard focus or a mouse hover. Install: `@algorize-ui/tooltip`.
- [User Graph](https://avaraui.com/docs-md/nextjs-user-graph.md): An interactive multi-tiered User & AI Agent Hierarchy Network Graph built for Next.js and React. Install: `@algorize-ui/user-graph`.
- [Verify Badge](https://avaraui.com/docs-md/nextjs-verify-badge.md): A versatile verified badge component that can be customized with various styles (blue, gold, dark, gray), sizes, and an optional subtle pulse animation for premium aesthetics. Install: `@algorize-ui/verify-badge`.
- [Video Accordion](https://avaraui.com/docs-md/nextjs-video-accordion.md): A cinematic, expanding gallery component animated with plain CSS transitions — no animation library. Install: `@algorize-ui/video-accordion`.
- [Video Player](https://avaraui.com/docs-md/nextjs-video-player.md): An embeddable, hardware-accelerated video hero for landing pages and high-conversion sections. Install: `@algorize-ui/video-player`, `@algorize-ui/video-player-plyr`, `@algorize-ui/video-player-jw`.
- [Wallet](https://avaraui.com/docs-md/nextjs-wallet.md): An interactive fintech cardholder wallet component featuring 3 serially staggered cards, an authentic physical thumb scoop, a solid enclosed pocket, and privacy balance toggle. Install: `@algorize-ui/wallet`.
- [Wizard](https://avaraui.com/docs-md/nextjs-wizard.md): A "Typeform" style multi-step wizard featuring buttery smooth vertical slide transitions powered by plain CSS transitions, native keyboard navigation, and an interactive progress bar. Install: `@algorize-ui/wizard`.

## Website Sections (24)

- [Auth Forms](https://avaraui.com/docs-md/nextjs-auth-forms.md): Two production-ready authentication blocks: a Login Form for returning users and a Register Form for new ones. Install: `@algorize-ui/login-form`, `@algorize-ui/register-form`.
- [Bento Showcase](https://avaraui.com/docs-md/nextjs-bento-showcase.md): A six-card marketing bento: a hero with a live chat and a headline, a laptop of case studies, one line that says what you do, figures that scroll up, the plans on a phone, and a strip of the team that scrolls left. Install: `@algorize-ui/bento-showcase`.
- [Book Appointment](https://avaraui.com/docs-md/nextjs-book-appointment.md): A booking flow for a page that ends in an appointment: a practitioner's portrait and contact details, their scores as stars, two small charts, and a booking panel with a strip of days, time slots in groups, a button that reads back the choice, and a confirmation that draws itself in once the booking is made. Install: `@algorize-ui/book-appointment`.
- [Component Wall](https://avaraui.com/docs-md/nextjs-component-wall.md): A landing hero for a component library. In the middle, the copy — a small badge, a headline that blurs in word by word and keeps one word changing, a lead, an install command, two actions, a line of trust and, closing the column, the tools it is built with: a label, then two rows of marks — an odd batch staggers as three over four — one batch of related tools at a time. Install: `@algorize-ui/component-wall`.
- [Dashboard](https://avaraui.com/docs-md/nextjs-dashboard.md): An admin dashboard home on its own canvas: a greeting with all-time totals, a period switch, an overview chart with a tab per metric, the activity feed, traffic sources, visitors by country and the top authors. Install: `@algorize-ui/dashboard`.
- [Counter Section](https://avaraui.com/docs-md/nextjs-counter-section.md): A collection of 4 animated high-impact Counter and Stats Sections designed for modern landing pages, SaaS platforms, agency portfolios, and enterprise portals. Install: `@algorize-ui/counter-section`.
- [Flavour Carousel](https://avaraui.com/docs-md/nextjs-flavour-carousel.md): A product hero for anything that comes in flavours — a matcha latte here, but ice cream, juice or a candle would do. Install: `@algorize-ui/flavour-carousel`.
- [Data Flow](https://avaraui.com/docs-md/nextjs-data-flow.md): A section that shows where the data comes from and what comes out: source cards on the left feed one node in the middle, which fans out to result cards on the right. Install: `@algorize-ui/data-flow`.
- [Footer](https://avaraui.com/docs-md/nextjs-footer.md): A collection of 4 production-ready, high-capacity, fully responsive Footer components designed for modern web applications, SaaS platforms, e-commerce stores, and enterprise products. Install: `@algorize-ui/footer`.
- [FAQ Section](https://avaraui.com/docs-md/nextjs-faq-section.md): An animated, editorial FAQ section designed for modern landing pages, SaaS platforms, and digital agencies. Install: `@algorize-ui/faq-section`.
- [Error Section](https://avaraui.com/docs-md/nextjs-error-section.md): A full-page, responsive Cyberpunk Diagnostic Terminal section designed for root application error boundaries, Next.js `error.tsx` / `global-error.tsx`, and dedicated maintenance pages. Install: `@algorize-ui/error-section`.
- [Not Found Section](https://avaraui.com/docs-md/nextjs-not-found-section.md): A responsive, full-page 404 Hyperspace website section featuring ambient radial glow, masked cyber grid backdrop, animated compass indicator, and customizable shortcuts. Install: `@algorize-ui/not-found-section`.
- [Hero](https://avaraui.com/docs-md/nextjs-hero.md): Every hero section in the library, on one page. Each is its own registry item with its own preview, install command and props — pick the one that suits the site and install only that. Install: `@algorize-ui/honeycomb-hero`, `@algorize-ui/hero-carousel`, `@algorize-ui/fashion-hero`, `@algorize-ui/support-hero`, `@algorize-ui/collage-hero`, `@algorize-ui/hero`.
- [Navbar](https://avaraui.com/docs-md/nextjs-navbar.md): A highly responsive, production-ready Navigation Bar. It manages pure CSS dropdowns for complex desktop menus, and uses CSS transitions to smoothly animate a beautiful slide-out drawer on mobile devices. Install: `@algorize-ui/navbar`.
- [Platform Grid](https://avaraui.com/docs-md/nextjs-platform-grid.md): Everything a product offers, as one hairline grid: small tiles with an icon and a name, and a few 2×2 features that show a piece of the product on a tilting card. Install: `@algorize-ui/platform-grid`.
- [Pricing Section](https://avaraui.com/docs-md/nextjs-pricing.md): A collection of highly-converting, responsive pricing sections. Whether you need traditional tiered subscription cards, a detailed comparison table, or an interactive quote builder, these components are designed to maximize conversions. Install: `@algorize-ui/pricing`.
- [Product Details](https://avaraui.com/docs-md/nextjs-product-details.md): A collection of 4 production-ready, high-converting, fully responsive E-commerce Product Details components designed with unique layout architectures, glassmorphism cards, bento hero showcases, and colorway image synchronization. Install: `@algorize-ui/product-details`.
- [Profile Page](https://avaraui.com/docs-md/nextjs-profile-page.md): A person as a page: an aurora backdrop, frosted panels in four shapes, and a 24-hour dial that shows when they are at work — live, in their own time zone. Install: `@algorize-ui/profile-page`.
- [Review Section](https://avaraui.com/docs-md/nextjs-reviews.md): A high-converting Review / Testimonial website section featuring a 3D WebGL rotating background globe marquee or an interactive 3D stacked portrait carousel with smooth rolling motion and arrow navigation. Install: `@algorize-ui/reviews`.
- [Sidebar Section](https://avaraui.com/docs-md/nextjs-sidebar.md): A powerful, composable sidebar component that automatically manages mobile flyout states and desktop collapse logic. Install: `@algorize-ui/sidebar`.
- [Support Dashboard](https://avaraui.com/docs-md/nextjs-support-dashboard.md): A complete, production-ready Helpdesk and Support Dashboard interface. Install: `@algorize-ui/support-dashboard`.
- [Newsletter](https://avaraui.com/docs-md/nextjs-newsletter.md): A sign-up section in three layouts. Portraits puts four readers' faces around a centred form on a soft panel and lets them drift with the pointer. Install: `@algorize-ui/newsletter`, `@algorize-ui/newsletter-motion`.
- [Top Destinations](https://avaraui.com/docs-md/nextjs-top-destinations.md): A dual-row scroll-driven destination showcase inspired by the Exploreo travel template. Install: `@algorize-ui/top-destinations`.
- [Waitlist](https://avaraui.com/docs-md/nextjs-waitlist.md): A pre-launch sign-up in three layouts. Card is a compact card with the field over the button, for a corner of a page. Install: `@algorize-ui/waitlist`.

## Third-party Integrations (6)

- [Overview](https://avaraui.com/docs-md/nextjs-third-party.md): Algorize UI does not try to be every library. Where a problem already has a well-solved, widely used answer — charting, virtualised data grids, gesture carousels, a combobox with async search, a zoomable lightbox — the better move is to bring that library in and make it look like the rest of your app.
- [Carousels](https://avaraui.com/docs-md/nextjs-third-party-carousel.md): Algorize UI ships its own Carousel set for the common cases. These two libraries are for when you need something it does not do: Embla when you want the physics and none of the markup, Swiper when you want effects, thumbnails and a11y wiring out of the box.
- [Charts](https://avaraui.com/docs-md/nextjs-third-party-charts.md): Recharts and Chart.js are the two React charting libraries most projects actually reach for, and they take opposite approaches: Recharts composes SVG out of React elements, Chart.js paints a canvas from a config object.
- [Data Tables](https://avaraui.com/docs-md/nextjs-third-party-tables.md): Two very different answers to the same problem. TanStack Table is headless — it computes sorting, filtering, pagination and selection, and renders nothing at all, which makes it a direct fit for the Table primitives. Install: `@algorize-ui/table`.
- [Gallery & Lightbox](https://avaraui.com/docs-md/nextjs-third-party-gallery.md): A photo gallery is really two problems, and they are best solved by two libraries.
- [Select](https://avaraui.com/docs-md/nextjs-third-party-select.md): react-select is what people usually mean when they ask for "Select2 in React": searchable, multi-select, async loading, creatable options, grouped menus, and a combobox that is keyboard- and screen-reader-correct out of the box.

## Optional

- [Registry index](https://algorize-ui.vercel.app/r/registry.json): Every item in the registry, with its description, dependencies and files.
- [Registry item JSON](https://algorize-ui.vercel.app/r/button.json): Each item is published at `https://algorize-ui.vercel.app/r/<name>.json`.
- [shadcn CLI](https://ui.shadcn.com/docs/cli): Reference for `init`, `add` and `registry add`.
- [GitHub](https://github.com/AlgorizeTech): Avara UI on GitHub.