DOCSEARCHbyAlgolia
Submit Docs

Animate UI

repository·main·Indexed 26 days ago

https://github.com/imskyleen/animate-ui

An open-source library of animated UI components built with React, TypeScript, Tailwind CSS, and Motion. It provides a distribution of high-quality components including AvatarGroup, CodeTabs, a real-time writing Code component, a Cursor component suite, and a GitHubStarsWheel.

Tokens
121.5K
Snippets
222
Records
980
Agent score
84%

What's inside animate-ui

  1. Overview of Animate UI

    main
    Animate UI is a fully animated, open-source component distribution. It is built using React, TypeScript, Tailwind CSS, and Motion. Developers can use it to integrate high-quality, animated UI components into their web applications.

  3. Understand the Animate UI distribution model

    main
    Animate UI is not a traditional NPM library. Instead, it is an open component distribution similar to shadcn/ui. You do not install it as a single dependency; rather, you copy, modify, and customize the component source code directly into your own codebase. This approach provides maximum flexibility and avoids the overhead of library wrappers or styling workarounds.

  4. Explore Animate UI Components

    main

    Animate UI provides a collection of animated components styled with Tailwind CSS. The component library is organized into several categories based on their underlying implementation or purpose:

    • Animate UI: Core components like avatar-group.
    • Radix UI: Components built on top of Radix UI primitives (e.g., accordion).
    • Base UI: Components built on top of Base UI primitives (e.g., accordion).
    • Headless UI: Components built on top of Headless UI primitives (e.g., accordion).
    • Buttons: Standard button components.
    • Backgrounds: Decorative background elements like bubble.
    • Community: Specialized components like management-bar.

  5. Explore Animate UI component types

    main

    Animate UI provides three main categories of assets:

    1. Primitives (animated): Core building blocks with animation integrated. These are either authored by Animate UI or ported from libraries like Radix UI, Base UI, or Headless UI.
    2. Components: UI pieces with baseline styles (inspired by shadcn/ui) built on top of the animated primitives.
    3. Icons: Animated versions of Lucide icons.

  6. Explore Animate UI Primitives

    main

    Animate UI provides a collection of animated, unstyled components designed to allow for creative expression. These primitives are categorized into several functional groups:

    • Animate UI Primitives: Specialized animated components like avatar-group.
    • Radix UI Primitives: Integration or extensions of Radix UI components (e.g., accordion).
    • Base UI Primitives: Integration or extensions of Base UI components (e.g., accordion).
    • Headless UI Primitives: Integration or extensions of Headless UI components (e.g., checkbox).
    • Effects: Visual enhancement primitives such as blur.
    • Buttons: Animated button components.
    • Texts: Specialized text components like counting-number.

  7. AlertDialog Component Parts

    main

    The Alert Dialog is built using the following sub-components:

    • AlertDialog: The root container.
    • AlertDialogTrigger: The element that opens the dialog.
    • AlertDialogPopup: The dialog content container (supports from and transition props).
    • AlertDialogHeader: Container for the title and description.
    • AlertDialogTitle: The title text of the dialog.
    • AlertDialogDescription: The descriptive text of the dialog.
    • AlertDialogFooter: Container for action buttons.
    • AlertDialogAction: A button that performs the primary action and closes the dialog.
    • AlertDialogCancel: A button that cancels the action and closes the dialog.