Library

Aceternity UI

Components on aceternity.com are free MIT. Aceternity Pro is a separate product — sells templates and a video course at $79-249 one-time. Not required for the free component library.

https://ui.aceternity.com · Free core · Pro templates + course $79-249 one-time · 18 components installed

3D Card

Card that tilts in 3D on hover.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/3d-card.json

Source: apps/catalog/components/ui/3d-card.tsx

Moving Border

Button with moving glow border.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/moving-border.json

Source: apps/catalog/components/ui/moving-border.tsx

Spotlight

Mouse-following spotlight effect.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/spotlight.json

Source: apps/catalog/components/ui/spotlight.tsx

Background Beams

Animated background beams.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/background-beams.json

Source: apps/catalog/components/ui/background-beams.tsx

Hover Border Gradient

Gradient border that rotates on hover.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/hover-border-gradient.json

Source: apps/catalog/components/ui/hover-border-gradient.tsx

Wavy Background

Animated wavy background.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/wavy-background.json

Source: apps/catalog/components/ui/wavy-background.tsx

Card Hover Effect

Grid of cards with hover effect.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/card-hover-effect.json

Source: apps/catalog/components/ui/card-hover-effect.tsx

Tracing Beam

Animated beam that traces content.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/tracing-beam.json

Source: apps/catalog/components/ui/tracing-beam.tsx

Sparkles

Animated sparkles background.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/sparkles.json

Source: apps/catalog/components/ui/sparkles.tsx

Background Gradient Animation

Animated gradient background.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/background-gradient-animation.json

Source: apps/catalog/components/ui/background-gradient-animation.tsx

Bento Grid

Bento-style grid layout.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/bento-grid.json

Source: apps/catalog/components/ui/bento-grid.tsx

Evervault Card

Card with character-stream hover effect.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/evervault-card.json

Source: apps/catalog/components/ui/evervault-card.tsx

Text Generate Effect

Text appears word-by-word.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/text-generate-effect.json

Source: apps/catalog/components/ui/text-generate-effect.tsx

Typewriter Effect

Typewriter text animation.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/typewriter-effect.json

Source: apps/catalog/components/ui/typewriter-effect.tsx

Card Stack

Stack of cards that rotate.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/card-stack.json

Source: apps/catalog/components/ui/card-stack.tsx

Focus Cards

Cards that blur others on hover.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/focus-cards.json

Source: apps/catalog/components/ui/focus-cards.tsx

Compare

Before/after image comparison slider.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/compare.json

Source: apps/catalog/components/ui/compare.tsx

Meteors

Falling meteor animation.

9:41●●● 100%

Preview not yet wired

Source is installed. Add a demo at app/libraries/[library]/demos/<slug>.tsx to render it here.

npx shadcn@latest add https://ui.aceternity.com/registry/meteors.json

Source: apps/catalog/components/ui/meteors.tsx