150+ Animated Components & Blocks with Tailwind and Motion – Eldora UI

Eldora UI is an open-source collection of 150+ animated UI components, effects, and blocks built with React, TypeScript, Tailwind CSS, and Motion.

Run a single shadcn CLI command, and the component files land in your src/ directory as editable source code. You own the output completely and can modify any animation, color, or layout detail.

Features

Use Cases

• Landing Pages: Build marketing pages quickly using pre-built animated sections and components.
• Product Showcases: Highlight features with animated cards, hover effects, and interactive elements.
• Personal Portfolios: Add subtle animations to text and backgrounds to create engaging personal sites.
• Startup MVPs: Prototype a polished UI without spending weeks on custom animation work.

How to Use It

1. Eldora UI uses the shadcn CLI for installation. If you do not have a Next.js project yet, run the init command to scaffold one and configure shadcn:

npx shadcn@latest init

2. Run the add command with the Eldora UI package name for the component you want. The example below adds a flexible Grid component to your project:

# PNPM
pnpm dlx shadcn@latest add @eldoraui/grid
# NPM
npx shadcn@latest add @eldoraui/grid
# YARN
yarn shadcn@latest add @eldoraui/grid
# BUN
bunx --bun shadcn@latest add @eldoraui/grid

The CLI copies the component’s TSX file into src/components/eldoraui/. You can swap map for any other component slug from the catalog.

3. After the CLI completes, import the component from its local path:

"use client"
import { Grid } from "@/registry/eldoraui/grid"
export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Basic Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Basic Grid</h3>
        <Grid columns={9} rows={2} height="h-24" />
      </div>
    </div>
  )
}

The component is now part of your codebase. Open the file at src/components/eldoraui/grid.tsx to inspect or modify the animation parameters, Tailwind classes, or layout structure.

Available UI Components & Blocks

Button Components

Text Animations

Backgrounds

Blocks

Related Resources

• shadcn/ui: The original copy-paste component library that Eldora UI’s installation model mirrors.
• Motion (Framer Motion): The animation library that powers Eldora UI’s motion effects.

FAQs

Q: Can I use Eldora UI with Vite instead of Next.js?
A: Yes. The shadcn CLI works with Vite-based React projects. Run npx shadcn@latest init in your Vite project and follow the prompts to configure components.json for your path aliases. The component installation commands work identically after that.

Q: Does adding an Eldora UI component lock me into a specific version?
A: No. The CLI copies the component source into your project as a static file. There is no ongoing package dependency for the component itself. You can update it by re-running the add command, but that overwrites your local edits.

Q: Can I customize animation duration and easing after installing a component?
A: Yes. Open the component file in src/components/eldoraui/ and locate the Motion props directly in the JSX.

Q: Does Eldora UI work with React Server Components in Next.js App Router?
A: Most animated components rely on Motion and client-side event hooks, so they need the "use client" directive. The installed files should already include it. If a component triggers a server/client boundary error, add "use client" to the top of the file.