HomeBookmarks
Fancy ComponentsFancy Components
Fancy Components

Fancy Components

Free, open-source React library of ready-to-use animated components and microinteractions.

DPby Daniel Petho
54components4.2Mviews18.2Kbookmarks

Installs all 45 components. Without our CLI, run instead.

Auto-indexed

Fancy Components contents

  • 3D CSS Box

    3D CSS Box

  • 3D CSS Box

    3D CSS Box

  • 3D CSS Box

    3D CSS Box

  • 3D CSS Box3D CSS Box

    3D CSS Box

  • Letter 3D Swap

    Letter 3D Swap

  • Letter 3D Swap

    Letter 3D Swap

  • Letter 3D Swap

    Letter 3D Swap

  • Stacking Cards

    Stacking Cards

  • Number Ticker

    Number Ticker

  • Marquee Along SVG Path

    Marquee Along SVG Path

  • Marquee Along SVG Path

    Marquee Along SVG Path

  • Marquee Along SVG Path

    Marquee Along SVG Path

  • Number Ticker

    Number Ticker

  • Number Ticker

    Number Ticker

  • Text Highlighter

    Text Highlighter

  • Text Highlighter

    Text Highlighter

  • Text Highlighter

    Text Highlighter

  • Text Highlighter

    Text Highlighter

  • Text Along Path

    Text Along Path

  • Text Along Path

    Text Along Path

  • Text Along Path

    Text Along Path

  • Text Along Path

    Text Along Path

  • Box Carousel

    Box Carousel

  • Text Rotate

    Text Rotate

    • About Fancy Components

    Fancy Components publishes a shadcn registry at fancycomponents.dev, with 45 components installable through the shadcn CLI.

    Components
    45
    GitHub stars
    3,269
    Last commit
    Mar 14, 2026
    Repository
    danielpetho/fancy

    Also in the Fancy Components registry

    Copy a prompt for your agent, copy the install command, or open the docs that ship it.

    • Circling Elements

      circling-elements

      A ui component.

      motion1 file2 examples
      Docs ↗

    • Cursor Attractor And Gravity

      cursor-attractor-and-gravity

      A ui component.

      lodash, matter-js, svg-path-commander, poly-decomp1 file3 examples
      Docs ↗

    • Drag Elements

      drag-elements

      A ui component.

      motion1 file2 examples
      Docs ↗

    • Element Along Svg Path

      element-along-svg-path

      A ui component.

      motion1 file1 example

    • Float

      A ui component.

      motion1 file2 examples
      Docs ↗

    • Gooey Svg Filter

      gooey-svg-filter

      A ui component.

      1 file2 examples
      Docs ↗

    • Gravity

      A ui component.

      lodash, matter-js, svg-path-commander, poly-decomp1 file4 examples
      Docs ↗

    • Letter Swap Forward Anim

      letter-swap-forward-anim

      A ui component.

      motion1 file3 examples

    • Letter Swap Pingpong Anim

      letter-swap-pingpong-anim

      A ui component.

      lodash, motion1 file

    • Media Between Text

      media-between-text

      A ui component.

      motion1 file3 examples
      Docs ↗

    • Pixelate Svg Filter

      pixelate-svg-filter

      A ui component.

      1 file2 examples
      Docs ↗

    • Random Letter Swap Forward Anim

      random-letter-swap-forward-anim

      A ui component.

      lodash, motion1 file1 example

    • Random Letter Swap Pingpong Anim

      random-letter-swap-pingpong-anim

      A ui component.

      lodash, motion1 file

    • Screensaver

      A ui component.

      motion1 file1 example
      Docs ↗

    • Simple Carousel

      simple-carousel

      A ui component.

      motion1 file

    • Simple Marquee

      simple-marquee

      A ui component.

      motion1 file5 examples
      Docs ↗

    • Underline Center

      underline-center

      A ui component.

      motion1 file1 example

    • Underline Comes In Goes Out

      underline-comes-in-goes-out

      A ui component.

      clsx, motion1 file

    • Underline Goes Out Comes In

      underline-goes-out-comes-in

      A ui component.

      clsx, motion1 file

    From the Fancy Components readme

    Fancy Components

    A growing library of fancy, fun, animated react components & microinteractions to make the web fun again. Free & Open Source.

    Documentation

    Visit https://fancycomponents.dev/docs/introduction to view the documentation.

    Contributing

    Please read the contribution guidelines.

    Acknowledgments

    Huge thanks to shadcn, as many parts of this repository—documentation page, structure, registry system, guides, and many more—is built upon it.

    License

    Licensed under the MIT license.

    Read the rest on GitHub →

    What Fancy Components builds on

    The packages and primitives its components pull in, counted across the registry.

    demo-images9calculate-position2svg-path-to-vertices2

    Hooks and utilities

  • use-debounced-dimensions
  • use-detect-browser
  • use-dimensions
  • use-elastic-line-events
  • use-line-breakdown
  • use-line-count
  • use-mounted
  • use-mouse-position
  • use-mouse-position-ref
  • use-mouse-vector
  • use-screen-size

    • Registries like Fancy Components

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Animate UI

    Animate UI

    by Elliot Sutton

    33

    components

    UI Layouts

    UI Layouts

    by UI Layouts

    127

    components

    Eldora UI

    Eldora UI

    by Mudunuri bhaskara karthikeya varma

    13

    components

    Browse every shadcn registry we track →

    1. Components
    2. /
    3. Daniel Petho
    4. /
    5. Fancy Components

    Related libraries

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    HextaUI

    HextaUI

    by Preet Suthar

    119

    components

    Geist

    Geist

    by tigran tumasov

    72

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    PrebuiltUI

    PrebuiltUI

    by prebuiltui

    23

    components

    About Fancy Components

    Fancy Components is a component library on 21st.dev by Daniel Petho with 35 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 35 Fancy Components components

    • 3D CSS Box
    • Animated Gradient With SVG
    • Box Carousel
    • Breathing Text
    • Elastic Line
    • Image Trail
    • Letter 3D Swap
    • Letter Swap
    • Marquee Along SVG Path
    • Number Ticker
    • Parallax Floating
    • Pixel Trail

    Browse all component libraries →

  • Random Letter Swap
  • Scramble Hover
  • Scramble In
  • Scroll and Swap Text
  • Stacking Cards
  • Text Along Path
  • Text Cursor Proximity
  • Text Highlighter
  • Text Rotate
  • Typewriter
  • Underline Animation
  • Underline To Background
  • useDimensions
  • useElasticLineEvents
  • useMousePosition
  • useMousePositionRef
  • useMouseVector
  • useScreenSize
  • Variable Font And Cursor
  • Variable Font Cursor Proximity
  • Variable Font Hover By Letter
  • Variable Font Hover By Random Letter
  • Vertical Cut Reveal