Rare UI

Rare UI (RareUI) is a free, open-source registry of rare animated React components. Built with Tailwind CSS, Motion and the shadcn CLI — copy, paste, and own the code.

React Component

Visit Website GitHub

9 Components

Componentsfree

Scroll Progress

A scroll progress pill that tracks reading position and expands into a squircle menu of page sections.

by Rare UI0React · TypeScriptSource

Componentsfree

Bounce sidebar

A vertical navigation list with a bouncy, spring-animated active indicator.

by Rare UI0React · TypeScriptSource

Componentsfree

OTP Input

A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.

by Rare UI0React · TypeScriptSource

Componentsfree

Folder component

An animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size props.

by Rare UI0React · TypeScriptSource

Componentsfree

Fluid Orb

An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.

by Rare UI0React · TypeScriptSource

Componentsfree

Gravity Letters

A playful gravity field where letters, numbers, emoji, or custom components fall and pile up like physical objects.

by Rare UI0React · TypeScriptSource

Componentsfree

Proximity Sidebar

An interactive sidebar with proximity hover effects that appears while scrolling and responds to scroll intensity.

by Rare UI0React · TypeScriptSource

Componentsfree

Code Block

A code block that derives its full syntax theme from one accent color and includes animated copy feedback.

by Rare UI0React · TypeScriptSource

Componentsfree

Duration Picker

A gooey, spring-animated picker for entering a duration in hours and minutes.

by Rare UI0React · TypeScriptSource

All 9 Components loaded.

Rare UI

Source specialties

9 Components

Scroll Progress

Bounce sidebar

OTP Input

Folder component

Fluid Orb

Gravity Letters

Proximity Sidebar

Code Block

Duration Picker