---
name: "@animate-ui"
slug: "animate-ui"
description: "Fully animated open-source React component distribution built with TypeScript, Tailwind CSS, and Motion (formerly Framer Motion). Three component tiers: animated Radix-wrapped primitives (accordion, alert-dialog, checkbox, dialog, dropdown-menu, files, hover-card, popover, progress, radio-group, sheet, sidebar, switch, tabs, toggle, tooltip), Base UI-backed variants of the same set, and custom Animate components (avatar-group, code, code-tabs, cursor, github-stars-wheel, tabs, tooltip). Also includes animated Lucide icons. MCP server available. Free, MIT-licensed. Use for: any React app that wants smooth, physics-based transitions on standard shadcn/ui primitives without writing animation logic manually."
category: "Animated components"
tags: ["accessibility", "aesthetic", "animation", "audio", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "icons", "loaders", "media", "navigation", "overlays", "theming"]
framework: "react"
license: null
author: "imskyleen"
website: "https://animate-ui.com"
github: "https://github.com/imskyleen/animate-ui"
registry: "https://animate-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 4698
component_count: 250
generated_at: "2026-10-27T06:34:08.542Z"
---

# @animate-ui

Fully animated open-source React component distribution built with TypeScript, Tailwind CSS, and Motion (formerly Framer Motion). Three component tiers: animated Radix-wrapped primitives (accordion, alert-dialog, checkbox, dialog, dropdown-menu, files, hover-card, popover, progress, radio-group, sheet, sidebar, switch, tabs, toggle, tooltip), Base UI-backed variants of the same set, and custom Animate components (avatar-group, code, code-tabs, cursor, github-stars-wheel, tabs, tooltip). Also includes animated Lucide icons. MCP server available. Free, MIT-licensed. Use for: any React app that wants smooth, physics-based transitions on standard shadcn/ui primitives without writing animation logic manually.

## Links

- Website: https://animate-ui.com
- GitHub: https://github.com/imskyleen/animate-ui
- Registry JSON: https://animate-ui.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/animate-ui
- This file: https://sh4dcn.netlify.app/md/animate-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://animate-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://animate-ui.com/r/registry.json
bunx shadcn@latest add https://animate-ui.com/r/registry.json
# clone the source repo
git clone https://github.com/imskyleen/animate-ui.git
# fetch the raw registry index
curl -s https://animate-ui.com/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| backgrounds-bubble | registry:ui | An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-bubble.json` |
| backgrounds-fireworks | registry:ui | A background component that displays a fireworks animation. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-fireworks.json` |
| backgrounds-glyph | registry:ui | A background component featuring a field of characters lit by drifting glows, a cursor trail and waves on click. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-glyph.json` |
| backgrounds-gradient | registry:ui | A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-gradient.json` |
| backgrounds-gravity-stars | registry:ui | A background component featuring a subtle yet engaging animated gravity stars effect. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-gravity-stars.json` |
| backgrounds-hexagon | registry:ui | A background component featuring an interactive hexagon grid. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-hexagon.json` |
| backgrounds-hole | registry:ui | A background component featuring an animated hole grid. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-hole.json` |
| backgrounds-stars | registry:ui | An interactive background featuring animated dots of varying sizes and speeds, simulating a dynamic and immersive starry space effect. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-stars.json` |
| backgrounds-topography | registry:ui | A background component featuring living contour lines that rise under the cursor and ripple on click. | `npx shadcn@latest add https://animate-ui.com/r/backgrounds-topography.json` |
| buttons-flip | registry:ui | A button that flips over on hover to reveal its back face. | `npx shadcn@latest add https://animate-ui.com/r/buttons-flip.json` |
| buttons-github-stars | registry:ui | A button showing a repository's GitHub stars, counted up with a filling star. | `npx shadcn@latest add https://animate-ui.com/r/buttons-github-stars.json` |
| buttons-liquid | registry:ui | A button that fills with color from the bottom on hover. | `npx shadcn@latest add https://animate-ui.com/r/buttons-liquid.json` |
| buttons-theme-toggler | registry:ui | A button that cycles the theme, its icon turning into the next one. | `npx shadcn@latest add https://animate-ui.com/r/buttons-theme-toggler.json` |
| components-code-block | registry:ui | A highlighted code block that types itself out, with a cursor and a copy button. | `npx shadcn@latest add https://animate-ui.com/r/components-code-block.json` |
| components-page-transition-react-router | registry:ui | Animated transitions between the pages of a React Router app, built on view transitions. | `npx shadcn@latest add https://animate-ui.com/r/components-page-transition-react-router.json` |
| components-page-transition-tanstack-router | registry:ui | Animated transitions between the pages of a TanStack Router app, built on view transitions. | `npx shadcn@latest add https://animate-ui.com/r/components-page-transition-tanstack-router.json` |
| components-page-transition | registry:ui | Animated transitions between the pages of a Next.js App Router app, built on view transitions. | `npx shadcn@latest add https://animate-ui.com/r/components-page-transition.json` |
| icons-hugeicons-accessibility | registry:ui | Accessibility icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-accessibility.json` |
| icons-hugeicons-activity-01 | registry:ui | Activity 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-activity-01.json` |
| icons-hugeicons-add-01 | registry:ui | Add 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-add-01.json` |
| icons-hugeicons-airplay | registry:ui | Airplay icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-airplay.json` |
| icons-hugeicons-alarm-clock | registry:ui | Alarm Clock icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-alarm-clock.json` |
| icons-hugeicons-arrow-down-01 | registry:ui | Arrow Down 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-down-01.json` |
| icons-hugeicons-arrow-down-02 | registry:ui | Arrow Down 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-down-02.json` |
| icons-hugeicons-arrow-left-01 | registry:ui | Arrow Left 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-left-01.json` |
| icons-hugeicons-arrow-left-02 | registry:ui | Arrow Left 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-left-02.json` |
| icons-hugeicons-arrow-right-01 | registry:ui | Arrow Right 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-right-01.json` |
| icons-hugeicons-arrow-right-02 | registry:ui | Arrow Right 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-right-02.json` |
| icons-hugeicons-arrow-up-01 | registry:ui | Arrow Up 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-up-01.json` |
| icons-hugeicons-arrow-up-02 | registry:ui | Arrow Up 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-up-02.json` |
| icons-hugeicons-arrow-up-down | registry:ui | Arrow up down icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-arrow-up-down.json` |
| icons-hugeicons-attachment-01 | registry:ui | Attachment 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-attachment-01.json` |
| icons-hugeicons-audio-lines | registry:ui | Audio Lines icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-audio-lines.json` |
| icons-hugeicons-axe | registry:ui | Axe icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-axe.json` |
| icons-hugeicons-badge-check | registry:ui | Badge check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-badge-check.json` |
| icons-hugeicons-battery-charging | registry:ui | Battery Charging icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-battery-charging.json` |
| icons-hugeicons-battery-full | registry:ui | Battery Full icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-battery-full.json` |
| icons-hugeicons-battery-low | registry:ui | Battery Low icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-battery-low.json` |
| icons-hugeicons-battery-medium-01 | registry:ui | Battery Medium 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-battery-medium-01.json` |
| icons-hugeicons-bell-off | registry:ui | Bell off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bell-off.json` |
| icons-hugeicons-bell-ring | registry:ui | Bell ring icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bell-ring.json` |
| icons-hugeicons-between-horizontal-end | registry:ui | Between horizontal end icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-between-horizontal-end.json` |
| icons-hugeicons-between-horizontal-start | registry:ui | Between horizontal start icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-between-horizontal-start.json` |
| icons-hugeicons-between-vertical-end | registry:ui | Between vertical end icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-between-vertical-end.json` |
| icons-hugeicons-between-vertical-start | registry:ui | Between vertical start icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-between-vertical-start.json` |
| icons-hugeicons-binary | registry:ui | Binary icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-binary.json` |
| icons-hugeicons-blend | registry:ui | Blend icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-blend.json` |
| icons-hugeicons-blocks | registry:ui | Blocks icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-blocks.json` |
| icons-hugeicons-bluetooth | registry:ui | Bluetooth icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bluetooth.json` |
| icons-hugeicons-bookmark-check | registry:ui | Bookmark Check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bookmark-check.json` |
| icons-hugeicons-bookmark-plus | registry:ui | Bookmark Plus icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bookmark-plus.json` |
| icons-hugeicons-bookmark | registry:ui | Bookmark icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bookmark.json` |
| icons-hugeicons-bot-message-square | registry:ui | Bot message square icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bot-message-square.json` |
| icons-hugeicons-bot-off | registry:ui | Bot off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bot-off.json` |
| icons-hugeicons-bot | registry:ui | Bot icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-bot.json` |
| icons-hugeicons-brush-cleaning | registry:ui | Brush cleaning icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-brush-cleaning.json` |
| icons-hugeicons-brush | registry:ui | Brush icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-brush.json` |
| icons-hugeicons-calendar-check | registry:ui | Calendar Check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-calendar-check.json` |
| icons-hugeicons-calendar-clock | registry:ui | Calendar Clock icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-calendar-clock.json` |
| icons-hugeicons-calendar-plus | registry:ui | Calendar Plus icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-calendar-plus.json` |
| icons-hugeicons-calendar | registry:ui | Calendar icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-calendar.json` |
| icons-hugeicons-camera | registry:ui | Camera icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-camera.json` |
| icons-hugeicons-cancel-01 | registry:ui | Cancel 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cancel-01.json` |
| icons-hugeicons-cast | registry:ui | Cast icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cast.json` |
| icons-hugeicons-cctv | registry:ui | CCTV icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cctv.json` |
| icons-hugeicons-chart-bar-decreasing | registry:ui | Chart bar decreasing icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-bar-decreasing.json` |
| icons-hugeicons-chart-bar-increasing | registry:ui | Chart bar increasing icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-bar-increasing.json` |
| icons-hugeicons-chart-column-decreasing | registry:ui | Chart column decreasing icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-column-decreasing.json` |
| icons-hugeicons-chart-column-increasing | registry:ui | Chart column increasing icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-column-increasing.json` |
| icons-hugeicons-chart-column | registry:ui | Chart column icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-column.json` |
| icons-hugeicons-chart-line | registry:ui | Chart line icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-line.json` |
| icons-hugeicons-chart-no-axes-column-decreasing | registry:ui | Chart no axes column decreasing icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-no-axes-column-decreasing.json` |
| icons-hugeicons-chart-no-axes-column-increasing | registry:ui | Chart no axes column increasing icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-no-axes-column-increasing.json` |
| icons-hugeicons-chart-no-axes-column | registry:ui | Chart no axes column icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-no-axes-column.json` |
| icons-hugeicons-chart-scatter | registry:ui | Chart scatter icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-scatter.json` |
| icons-hugeicons-chart-spline | registry:ui | Chart spline icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-chart-spline.json` |
| icons-hugeicons-check-check | registry:ui | Check check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-check-check.json` |
| icons-hugeicons-check-line | registry:ui | Check line icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-check-line.json` |
| icons-hugeicons-check | registry:ui | Check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-check.json` |
| icons-hugeicons-checkmark-circle-02 | registry:ui | Checkmark Circle 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-checkmark-circle-02.json` |
| icons-hugeicons-cherry | registry:ui | Cherry icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cherry.json` |
| icons-hugeicons-circle-check-big | registry:ui | Circle check big icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-circle-check-big.json` |
| icons-hugeicons-circle-plus | registry:ui | Circle plus icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-circle-plus.json` |
| icons-hugeicons-circle-question-mark | registry:ui | Circle Question Mark icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-circle-question-mark.json` |
| icons-hugeicons-circle-x | registry:ui | Circle x icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-circle-x.json` |
| icons-hugeicons-circuit-board | registry:ui | Circuit Board icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-circuit-board.json` |
| icons-hugeicons-clapperboard | registry:ui | Clapperboard icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clapperboard.json` |
| icons-hugeicons-clipboard-check | registry:ui | Clipboard Check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clipboard-check.json` |
| icons-hugeicons-clipboard-list | registry:ui | Clipboard List icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clipboard-list.json` |
| icons-hugeicons-clipboard | registry:ui | Clipboard icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clipboard.json` |
| icons-hugeicons-clock-01 | registry:ui | Clock 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-01.json` |
| icons-hugeicons-clock-02 | registry:ui | Clock 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-02.json` |
| icons-hugeicons-clock-03 | registry:ui | Clock 03 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-03.json` |
| icons-hugeicons-clock-04 | registry:ui | Clock 04 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-04.json` |
| icons-hugeicons-clock-05 | registry:ui | Clock 05 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-05.json` |
| icons-hugeicons-clock-add | registry:ui | Clock Add icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-add.json` |
| icons-hugeicons-clock-alert | registry:ui | Clock Alert icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-alert.json` |
| icons-hugeicons-clock-arrow-down | registry:ui | Clock Arrow Down icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-arrow-down.json` |
| icons-hugeicons-clock-arrow-up | registry:ui | Clock Arrow Up icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-arrow-up.json` |
| icons-hugeicons-clock-check | registry:ui | Clock Check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-check.json` |
| icons-hugeicons-clock-fading | registry:ui | Clock Fading icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-fading.json` |
| icons-hugeicons-clock-hour-1 | registry:ui | Clock Hour 1 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-1.json` |
| icons-hugeicons-clock-hour-10 | registry:ui | Clock Hour 10 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-10.json` |
| icons-hugeicons-clock-hour-11 | registry:ui | Clock Hour 11 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-11.json` |
| icons-hugeicons-clock-hour-12 | registry:ui | Clock Hour 12 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-12.json` |
| icons-hugeicons-clock-hour-2 | registry:ui | Clock Hour 2 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-2.json` |
| icons-hugeicons-clock-hour-3 | registry:ui | Clock Hour 3 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-3.json` |
| icons-hugeicons-clock-hour-4 | registry:ui | Clock Hour 4 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-4.json` |
| icons-hugeicons-clock-hour-5 | registry:ui | Clock Hour 5 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-5.json` |
| icons-hugeicons-clock-hour-6 | registry:ui | Clock Hour 6 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-6.json` |
| icons-hugeicons-clock-hour-7 | registry:ui | Clock Hour 7 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-7.json` |
| icons-hugeicons-clock-hour-8 | registry:ui | Clock Hour 8 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-8.json` |
| icons-hugeicons-clock-hour-9 | registry:ui | Clock Hour 9 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-hour-9.json` |
| icons-hugeicons-clock-plus | registry:ui | Clock Plus icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-clock-plus.json` |
| icons-hugeicons-cloud-download | registry:ui | Cloud download icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-download.json` |
| icons-hugeicons-cloud-drizzle | registry:ui | Cloud drizzle icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-drizzle.json` |
| icons-hugeicons-cloud-hail | registry:ui | Cloud hail icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-hail.json` |
| icons-hugeicons-cloud-lightning | registry:ui | Cloud lightning icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-lightning.json` |
| icons-hugeicons-cloud-moon-rain | registry:ui | Cloud moon rain icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-moon-rain.json` |
| icons-hugeicons-cloud-rain-wind | registry:ui | Cloud rain wind icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-rain-wind.json` |
| icons-hugeicons-cloud-rain | registry:ui | Cloud rain icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-rain.json` |
| icons-hugeicons-cloud-snow | registry:ui | Cloud snow icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-snow.json` |
| icons-hugeicons-cloud-sun-rain | registry:ui | Cloud sun rain icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-sun-rain.json` |
| icons-hugeicons-cloud-upload | registry:ui | Cloud upload icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cloud-upload.json` |
| icons-hugeicons-coffee-02 | registry:ui | Coffee 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-coffee-02.json` |
| icons-hugeicons-cog | registry:ui | Cog icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cog.json` |
| icons-hugeicons-compass | registry:ui | Compass icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-compass.json` |
| icons-hugeicons-computer-terminal-01 | registry:ui | Computer Terminal 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-computer-terminal-01.json` |
| icons-hugeicons-contrast | registry:ui | Contrast icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-contrast.json` |
| icons-hugeicons-copy-01 | registry:ui | Copy 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-copy-01.json` |
| icons-hugeicons-credit-card | registry:ui | Credit Card icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-credit-card.json` |
| icons-hugeicons-crop | registry:ui | Crop icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-crop.json` |
| icons-hugeicons-cross | registry:ui | Cross icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-cross.json` |
| icons-hugeicons-crown | registry:ui | Crown icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-crown.json` |
| icons-hugeicons-delete-02 | registry:ui | Delete 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-delete-02.json` |
| icons-hugeicons-disc-3 | registry:ui | Disc 3 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-disc-3.json` |
| icons-hugeicons-download-01 | registry:ui | Download 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-download-01.json` |
| icons-hugeicons-download-04 | registry:ui | Download 04 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-download-04.json` |
| icons-hugeicons-droplet | registry:ui | Droplet icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-droplet.json` |
| icons-hugeicons-equal-not | registry:ui | Equal not icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-equal-not.json` |
| icons-hugeicons-ev-charger | registry:ui | EV Charger icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-ev-charger.json` |
| icons-hugeicons-expand | registry:ui | Expand icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-expand.json` |
| icons-hugeicons-eye-closed | registry:ui | Eye Closed icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-eye-closed.json` |
| icons-hugeicons-eye-off | registry:ui | Eye Off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-eye-off.json` |
| icons-hugeicons-fan | registry:ui | Fan icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-fan.json` |
| icons-hugeicons-fast-forward | registry:ui | Fast Forward icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-fast-forward.json` |
| icons-hugeicons-favourite | registry:ui | Favourite icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-favourite.json` |
| icons-hugeicons-file-check | registry:ui | File Check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-file-check.json` |
| icons-hugeicons-file-clock | registry:ui | File Clock icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-file-clock.json` |
| icons-hugeicons-file-plus | registry:ui | File Plus icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-file-plus.json` |
| icons-hugeicons-file-sliders | registry:ui | File Sliders icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-file-sliders.json` |
| icons-hugeicons-file-x | registry:ui | File X icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-file-x.json` |
| icons-hugeicons-filter-horizontal | registry:ui | Filter Horizontal icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-filter-horizontal.json` |
| icons-hugeicons-finger-print | registry:ui | Finger Print icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-finger-print.json` |
| icons-hugeicons-flag | registry:ui | Flag icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-flag.json` |
| icons-hugeicons-flame | registry:ui | Flame icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-flame.json` |
| icons-hugeicons-flash | registry:ui | Flash icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-flash.json` |
| icons-hugeicons-folder-clock | registry:ui | Folder Clock icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-folder-clock.json` |
| icons-hugeicons-folder-open | registry:ui | Folder Open icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-folder-open.json` |
| icons-hugeicons-forklift | registry:ui | Forklift icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-forklift.json` |
| icons-hugeicons-frame | registry:ui | Frame icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-frame.json` |
| icons-hugeicons-gallery-horizontal-end | registry:ui | Gallery horizontal end icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-gallery-horizontal-end.json` |
| icons-hugeicons-gallery-horizontal | registry:ui | Gallery horizontal icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-gallery-horizontal.json` |
| icons-hugeicons-gallery-vertical-end | registry:ui | Gallery vertical end icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-gallery-vertical-end.json` |
| icons-hugeicons-gallery-vertical | registry:ui | Gallery vertical icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-gallery-vertical.json` |
| icons-hugeicons-gauge | registry:ui | Gauge icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-gauge.json` |
| icons-hugeicons-gavel | registry:ui | Gavel icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-gavel.json` |
| icons-hugeicons-ghost | registry:ui | Ghost icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-ghost.json` |
| icons-hugeicons-gift | registry:ui | Gift icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-gift.json` |
| icons-hugeicons-globe-02 | registry:ui | Globe 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-globe-02.json` |
| icons-hugeicons-hammer | registry:ui | Hammer icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-hammer.json` |
| icons-hugeicons-headphones | registry:ui | Headphones icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-headphones.json` |
| icons-hugeicons-home-03 | registry:ui | Home 03 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-home-03.json` |
| icons-hugeicons-hourglass | registry:ui | Hourglass icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-hourglass.json` |
| icons-hugeicons-house-wifi | registry:ui | House wifi icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-house-wifi.json` |
| icons-hugeicons-infinity | registry:ui | Infinity icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-infinity.json` |
| icons-hugeicons-info | registry:ui | Info icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-info.json` |
| icons-hugeicons-kanban | registry:ui | Kanban icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-kanban.json` |
| icons-hugeicons-key-01 | registry:ui | Key 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-key-01.json` |
| icons-hugeicons-key-round | registry:ui | Key Round icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-key-round.json` |
| icons-hugeicons-layers-01 | registry:ui | Layers 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-layers-01.json` |
| icons-hugeicons-layout-dashboard | registry:ui | Layout dashboard icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-layout-dashboard.json` |
| icons-hugeicons-leaf | registry:ui | Leaf icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-leaf.json` |
| icons-hugeicons-lightbulb-off | registry:ui | Lightbulb off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-lightbulb-off.json` |
| icons-hugeicons-lightbulb | registry:ui | Lightbulb icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-lightbulb.json` |
| icons-hugeicons-link-01 | registry:ui | Link 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-link-01.json` |
| icons-hugeicons-link-square-02 | registry:ui | Link Square 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-link-square-02.json` |
| icons-hugeicons-list | registry:ui | List icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-list.json` |
| icons-hugeicons-loading-01 | registry:ui | Loading 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-loading-01.json` |
| icons-hugeicons-loading-02 | registry:ui | Loading 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-loading-02.json` |
| icons-hugeicons-loading-03 | registry:ui | Loading 03 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-loading-03.json` |
| icons-hugeicons-location-01 | registry:ui | Location 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-location-01.json` |
| icons-hugeicons-lock-keyhole-open | registry:ui | Lock keyhole open icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-lock-keyhole-open.json` |
| icons-hugeicons-lock-keyhole | registry:ui | Lock keyhole icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-lock-keyhole.json` |
| icons-hugeicons-login-01 | registry:ui | Login 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-login-01.json` |
| icons-hugeicons-logout-01 | registry:ui | Logout 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-logout-01.json` |
| icons-hugeicons-mail-01 | registry:ui | Mail 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-mail-01.json` |
| icons-hugeicons-mail-check | registry:ui | Mail Check icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-mail-check.json` |
| icons-hugeicons-mail-open | registry:ui | Mail Open icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-mail-open.json` |
| icons-hugeicons-map-pin-off | registry:ui | Map pin off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-map-pin-off.json` |
| icons-hugeicons-maximize-01 | registry:ui | Maximize 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-maximize-01.json` |
| icons-hugeicons-megaphone | registry:ui | Megaphone icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-megaphone.json` |
| icons-hugeicons-menu-01 | registry:ui | Menu 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-menu-01.json` |
| icons-hugeicons-message-01 | registry:ui | Message 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-01.json` |
| icons-hugeicons-message-circle-code | registry:ui | Message circle code icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-code.json` |
| icons-hugeicons-message-circle-dashed | registry:ui | Message circle dashed icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-dashed.json` |
| icons-hugeicons-message-circle-heart | registry:ui | Message circle heart icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-heart.json` |
| icons-hugeicons-message-circle-more | registry:ui | Message circle more icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-more.json` |
| icons-hugeicons-message-circle-off | registry:ui | Message circle off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-off.json` |
| icons-hugeicons-message-circle-plus | registry:ui | Message circle plus icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-plus.json` |
| icons-hugeicons-message-circle-warning | registry:ui | Message circle warning icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-warning.json` |
| icons-hugeicons-message-circle-x | registry:ui | Message circle x icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle-x.json` |
| icons-hugeicons-message-circle | registry:ui | Message circle icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-circle.json` |
| icons-hugeicons-message-square-code | registry:ui | Message square code icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-code.json` |
| icons-hugeicons-message-square-dashed | registry:ui | Message square dashed icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-dashed.json` |
| icons-hugeicons-message-square-diff | registry:ui | Message square diff icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-diff.json` |
| icons-hugeicons-message-square-dot | registry:ui | Message square dot icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-dot.json` |
| icons-hugeicons-message-square-heart | registry:ui | Message square heart icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-heart.json` |
| icons-hugeicons-message-square-more | registry:ui | Message square more icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-more.json` |
| icons-hugeicons-message-square-off | registry:ui | Message square off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-off.json` |
| icons-hugeicons-message-square-plus | registry:ui | Message square plus icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-plus.json` |
| icons-hugeicons-message-square-quote | registry:ui | Message square quote icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-quote.json` |
| icons-hugeicons-message-square-share | registry:ui | Message square share icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-share.json` |
| icons-hugeicons-message-square-text | registry:ui | Message square text icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-text.json` |
| icons-hugeicons-message-square-warning | registry:ui | Message square warning icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-warning.json` |
| icons-hugeicons-message-square-x | registry:ui | Message square x icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-message-square-x.json` |
| icons-hugeicons-mic-off | registry:ui | Mic Off icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-mic-off.json` |
| icons-hugeicons-mic | registry:ui | Mic icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-mic.json` |
| icons-hugeicons-minimize-01 | registry:ui | Minimize 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-minimize-01.json` |
| icons-hugeicons-minus-sign | registry:ui | Minus Sign icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-minus-sign.json` |
| icons-hugeicons-moon-02 | registry:ui | Moon 02 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-moon-02.json` |
| icons-hugeicons-moon-star | registry:ui | Moon star icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-moon-star.json` |
| icons-hugeicons-more-horizontal | registry:ui | More Horizontal icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-more-horizontal.json` |
| icons-hugeicons-more-vertical | registry:ui | More Vertical icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-more-vertical.json` |
| icons-hugeicons-move-down | registry:ui | Move down icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-move-down.json` |
| icons-hugeicons-move-left | registry:ui | Move left icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-move-left.json` |
| icons-hugeicons-move-right | registry:ui | Move right icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-move-right.json` |
| icons-hugeicons-move-up | registry:ui | Move up icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-move-up.json` |
| icons-hugeicons-music-3 | registry:ui | Music 3 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-music-3.json` |
| icons-hugeicons-nfc | registry:ui | Nfc icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-nfc.json` |
| icons-hugeicons-notification-01 | registry:ui | Notification 01 icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-notification-01.json` |
| icons-hugeicons-octagon-alert | registry:ui | Octagon Alert icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-octagon-alert.json` |
| icons-hugeicons-orbit | registry:ui | Orbit icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-orbit.json` |
| icons-hugeicons-paintbrush | registry:ui | Paintbrush icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-paintbrush.json` |
| icons-hugeicons-panel-bottom-close | registry:ui | Panel bottom close icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-panel-bottom-close.json` |
| icons-hugeicons-panel-bottom-open | registry:ui | Panel bottom open icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-panel-bottom-open.json` |
| icons-hugeicons-panel-bottom | registry:ui | Panel bottom icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-panel-bottom.json` |
| icons-hugeicons-panel-left-close | registry:ui | Panel left close icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-panel-left-close.json` |
| icons-hugeicons-panel-left-open | registry:ui | Panel left open icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-panel-left-open.json` |
| icons-hugeicons-panel-left | registry:ui | Panel left icon component. | `npx shadcn@latest add https://animate-ui.com/r/icons-hugeicons-panel-left.json` |

## For AI agents

```text
You are adding components from @animate-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/animate-ui.md) for the component list.
2. Fetch the machine-readable index: https://animate-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: animate-ui).
```