1. Rlx UI Library
  • Sections
    • Overview
    • Widgets
    • Components
    • Hooks
    • Utils
    • Animates
    • MCP Server
  • Get Started
    • Installation
    • Examples
  • Widgets
    • Accordion
    • Alert
    • Alert Dialog
    • Aspect Ratio
    • Avatar
    • Badge
    • Breadcrumb
    • Button
    • Button Group
    • Calendar
    • Card
    • Carousel
    • Checkbox
    • Collapsible
    • Combobox
    • Command
    • Context Menu
    • Dialog
    • Drawer
    • Dropdown Menu
    • Empty
    • Field
    • Form
    • Hover Card
    • Input
    • Input Group
    • Input OTP
    • Item
    • Kbd
    • Label
    • Menubar
    • Navigation Menu
    • Pagination
    • Popover
    • Progress
    • Radio Group
    • Resizable
    • Scroll Area
    • Select
    • Separator
    • Sheet
    • Sidebar
    • Skeleton
    • Slider
    • Sonner
    • Spinner
    • Switch
    • Table
    • Tabs
    • Textarea
    • Toggle
    • Toggle Group
    • Tooltip
    • Typography
  • Components
    • Auto Tooltip Text
    • Blur Reveal
    • Code Block
    • Code Preview Tabs
    • Code Tabs
    • Collapsible Panel
    • Inline Code
    • Quiz Box
    • Selectable Button
    • Selectable Pill
    • Shiki Code Block
    • Stacked Cards
    • Streaming Text
    • Theme Toggle
    • Timeline
    • Wave Text
  • Hooks
    • useCopyToClipboard
    • useIsMobile
    • useMediaQuery
  • Utils
    • isValidDate
  • Animates
    • Circular Swing
  1. Widgets
  2. Components
  3. Hooks
  4. Utils
  5. Animates
  6. MCP Server

Animates

Follow the steps below to install the animates package in your project.

1. Configure Tailwind CSS

Animates uses Tailwind CSS v4 @theme directives. You need to configure Tailwind CSS in your project.

Follow the widgets installation guide

2. Explore the animates

Follow the installation guide for each animate to learn how to use them in your project.