61 rare and unique components

Every component is a single file you own, not a dependency you install. Built with clean geometry, minimal aesthetics, and high performance.

Buttons & actions

5

Animated buttons and clear action states.

Animated Button

ASCII Hover Button

Candy Button

Confirm Morph

Sparkle Button

Inputs & forms

4

Text entry, verification and file uploads.

File Dropzone

File Upload

Morph Invite

OTP Input

Search & commands

3

Search fields, command menus and quick discovery.

Morph Search

Search Input

Spotlight Search

3

Responsive navigation bars with smooth expanding panels.

4

Sidebars, menus and file navigation.

File Tree

Gooey Nav

Hook Sidebar

Proximity Sidebar

Sliders & toggles

5

Range controls, switches and theme selection.

Liquid Toggle

Mac Slider

Mac Switch

Slider

Theme Toggle

Menus & overlays

2

Profile menus, sheets and contextual panels.

Profile Menu

Reveal Sheet

Cards & testimonials

5

Content cards, social previews and testimonials.

DevClub UI saved my sleep schedule and centered all my divs on the very first try. Genuinely 10/10.

The more DevClub components you copy, the more time you save. It's the law of modern frontend physics.

I copied three buttons from DevClub NST and suddenly our seed investors thought we hired Apple's design lead.

Siiiuuu! The micro-interactions in this library have better curve control than my best free kicks.

Focus Testimonials

Pixel Card

Scrolling Cards

Task Card

Twitter(X) Card

Galleries & media

3

Interactive galleries, project reveals and image effects.

Liquid Media

Orbit Gallery

Project Reveal

Page Transitions

1

Coordinated scene changes for portfolios and immersive pages.

Parallax Strip Transition

NEW

AI & editors

4

AI inputs, visual orbs and editing experiences.

AI Input

AI Orb

Selection AI Editor

Thinking Orb

Charts & graphs

1

Interactive charts and visual data exploration.

Candlestick Chart

NEW

Data & display

5

Counters, activity, code and structured information.

Animated Counter

1

import { useSpring, animated } from "motion/react";

2

3

type OrbitProps = {

4

radius?: number;

5

speed?: number;

6

};

7

8

export function Orbit({ radius = 120, speed = 1 }: OrbitProps) {

9

const angle = useSpring(0, { stiffness: 80, damping: 20 });

10

11

const x = Math.cos(angle.get()) * radius;

12

const y = Math.sin(angle.get()) * radius;

13

14

return (

15

<animated.div

16

style={{ x, y }}

17

className="size-4 rounded-full bg-current"

18

/>

19

);

20

}

Code Block

GitHub Activity

Scales & Borders

Task List

Backgrounds & effects

3

Generative textures and atmospheric backgrounds.

Dither

Noise Background

Scroll Text

NEW

Feedback & progress

3

Notifications, status and step-by-step progress.

Segmented Progress

Stepper

Toast

Loaders

4

Loading sequences and animated content reveals.

Cursor Trail Loader

Grid Image Loader

Image Loader

Loader

Accordions

3

Expandable sections with carefully tuned motion.

Blur Reveal Accordion

Dotted Accordion

Smooth Accordion

Clocks & timers

2

Live clocks, countdowns and time-based displays.

Flip Clock

Matrix Clock

Date & time

1

Calendar controls and date selection.

Date Range Picker