Dev Design Library

Rare UI components

A collection of rare, ready-to-use UI components and animations you can actually drop into your next project. Free and open source.

Components
29
Framework
React
Stack
React, TypeScript, Tailwind
License
Commons-Clause+MIT
GitHub stars
1,526
Source
https://github.com/swamimalode07/rare-ui
Website
https://rareui.com
Install
npx shadcn@latest add swamimalode07/rare-ui/{name}

All Rare UI components

  • Inline AI Status: An inline status that shows what an AI is doing, from thinking and researching to writing and done.
  • Animated Counter: A number that counts to its new value on a wheel of digits, like an odometer.
  • Bounce Sidebar: A vertical navigation list with a bouncy, spring-animated active indicator.
  • Code Block: A clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.
  • Delete Button: A delete button that asks for confirmation in place, no dialog needed.
  • Duration Picker: A gooey, spring-animated picker for entering a duration in hours and minutes.
  • Emoji Reaction: A tapback-style reaction button that opens a bar of Apple emoji and sends copies of your pick floating up out of it.
  • Family Drawer: A bottom drawer with smooth, morphing transitions between stacked views, inspired by the Family app. Built on Vaul.
  • FAQ: An FAQ styled as a message thread, with each answer sent as a reply bubble.
  • Fluid Orb: An animated WebGL orb with drifting fluid shading. Supports size and color props.
  • 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 (sm/md/lg) props.
  • GitHub Activity: A contribution heatmap with a footer panel that expands over the grid to rank your top repositories.
  • Gooey Nav: A gooey navigation bar that separates the selected item from the group.
  • Gravity Letters: A playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.
  • Grid Reveal: A loading state for AI images that turns into the real picture when it arrives.
  • Hook Sidebar: A vertical navigation list with a dashed rail that marks the active item.
  • Matrix Orb: A dot-matrix orb that animates through idle, listening and thinking states.
  • Notification Bell: An iOS-style notification bell with an unread count badge.
  • OTP Input: A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.
  • Password Input: A password field with an eye toggle to show or hide what you type, and a strength meter that shows the password level as you type.
  • Proximity Sidebar: A dash-style scroll sidebar whose items expand as the pointer approaches.
  • Rail TOC: A table of contents with a paper plane that flies to the section you're reading.
  • Scroll Progress: A scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
  • Step Player: An iOS-style stepped progress track with a play, pause and replay control. The active step stretches into a bar that fills as it plays.
  • Task List: A checklist that strikes out completed tasks and moves them to the bottom of the list.
  • Theme Selector: A row of miniature app previews, one per theme, with a ring that marks the one you pick.
  • Toast: A toast notification with animated status icons, built on Sonner.
  • Voice Note: A voice message bar with a scrubbable waveform and a play control.
  • Web Search: The sources behind an AI answer, shown as a search pill, source cards, a streaming answer, and inline citations.

Browse by category