Skip to content
Free174 entriesno account needed

Free, with full source.

174 React + Tailwind components, sections and backgrounds you can use today — a live preview, TSX source and an AI prompt for every one, installed with a single shadcn command. 251 more entries, plus every site template, are Pro.

All 174 free entries

A progress loader drawn as one translucent jellyfish. Progress is light: it rises through the bell from the rim, lights the ring of organs and lets the tentacles grow. With no value it breathes on a five second cycle, and at 100 it exhales, lifts 24 px and fades.

loaderprogressprogressbar

Bead Button

components

A single bead of water on dark hydrophobic glass is the button. It magnifies the etched plate behind it and shows it upside down, the way real water does, while the label stays upright and crisp. The pointer's approach leans it, a press flattens it and pinches off a satellite droplet that re-merges, and it never runs away.

buttonwaterdroplet
New

A dark glass nav bar whose link labels hang in the air above a lit shelf, each over its own soft shadow; the link you point at, and the one for the section in view, lands.

navigationnavbarheader
New

Mounted letters on a lit plaster wall under a swinging lamp: every word's shadow runs from the light, except one, whose shadow runs toward it.

manifestotypographyshadow
New

A real text input whose typed words hang above the field and cast a soft shadow on its lit shelf; focus lifts them higher and submitting lands them.

inputformtext field

A pill of liquid glass that bends what is behind it: real refraction at the rim, a rim and sheen lit by your pointer, and a gel-like press.

buttonglassliquid glass

A toggle whose knob swells into a clear glass lens while you hold or drag it, magnifying the track beneath, then springs home solid.

switchtoggleglass

Glass Etch Text

text effects

Real, selectable heading text rendered as glass: a lit bevel, a graduated rim and a hairline colour fringe, raised or etched in.

text effectglasssvg filter

A liquid-glass input whose rim notices the pointer before focus, thickens outward from where you click, ripples from the caret with every keystroke and clouds its frost on an error.

inputformtext field

A popover that grows out of its button as a drop of liquid glass, stretches toward its place and settles flat, then drains back the same way.

popoveranimationmorph

A liquid-glass footer slab that rises over the section above as you scroll in, its meniscus edge sloshing on fast scrolls, with a pointer light, a droplet gliding between links and frost re-tinted to that section.

footersectionglass

The close of a landing: a last call set big with a holo pill between its words and two buttons, then a footer with the mark, a one-line promise, three columns of real links and the copyright with a way back up.

footerctaclosing section

A headline typed out by an asterisk: the caret spins fast while it types, opens an inline pill when it reaches one, then parks in the slot you mark with * (by default just after the last word) and keeps turning slowly.

typewritertext animationheadline

Holo Pill Nav

components

A quiet header: the mark and wordmark left, one outlined glass pill right that fills from below on hover while an asterisk turns in beside the label. A tone prop flips it for dark sections.

navbarheaderpill button

An email field as a pill, an asterisk that turns one step per keystroke and spins while sending, and a black Submit pill. A real form with validation and an honest status line.

inputemailform

Keycap Button

components

A button machined like a keycap: a press drops the cap 6px as its skirt collapses, release springs it back past rest, a specular follows the pointer and a copper status light glows while it's held.

buttonkeycap3d

A card holding a small machined dial built in CSS 3D: the card tilts toward the pointer and the dial turns to follow it one detent at a time, its copper marker lit, over a data-plate of specs.

card3dcss 3d

Anamorphic Heading

text effects

A heading that only reads from the right angle: its letters stand at different depths, scaled so they line up from straight ahead, and the view swings round to square as it scrolls in.

text effect3dcss 3d

Curved Rail Nav

components

A nav whose links ride a shallow cylinder in real perspective: the active link stands forward and underlit in copper, and choosing another turns the rail toward it on a spring.

navigationnavbar3d

Assemble Reveal

animations

A reveal where parts assemble in 3D: each item starts at its own offset and turn deep in perspective and flies home on a spring with a slight overshoot, one after another, as it comes into view.

animationreveal3d

A number set by turning a CSS-3D dial: drag round it and it steps through detents, springing onto each while its copper marker ticks; a real slider with full keyboard control that submits in a form.

inputsliderdial

A button whose press you can see in its type: hover and the label thickens as the button lifts; press and it goes bold under your finger while the button sinks and its shadow collapses to the contact line, then springs back.

buttonvariable fontpress

Light Lift Card

components

A card that lifts toward the pointer with shadows that behave like light: a two-degree tilt, an ambient shadow that widens and drifts away from the side that rose, a contact line that thins, and a plate of light at a colour temperature.

cardtiltshadow

A heading whose letters cast soft shadows that swing like a sundial as the page scrolls: the sun crosses with the scroll, the long shadows turn from right to left, and a faint warm band of light slides across the ink.

text effectshadowscroll

A nav whose single hairline stretches toward the next link and settles under it: its leading edge runs ahead on a quick spring while its trailing edge follows on a slower one, and the active label steps up a weight without shifting.

navigationnavbarunderline

A plate that opens exactly with the scroll: its rounded frame widens from a fifth in on each side to full while the picture inside eases the other way so it seems to stay still, bound with no easing, with a hairline that fills.

animationscrollreveal

Set the alarm on a pair of wheels: hours and minutes are snap-scrolling columns with momentum whose rows turn away in perspective around a lens, each a keyboard spinbutton, with the time the sunrise starts beneath.

formtime pickerwheel

A pill of polished chrome that reflects a lit room: its horizon, softbox glint and bezel light turn toward the pointer, and a press squashes it and drops a ring into the surface.

buttonchromemetallic

A tour date as a notched, perforated ticket whose stub carries the date in chrome numerals on a strip of holographic foil; it tilts toward the pointer while the foil's colour slides and a glare follows.

cardtickettour

Pour Fill Heading

text effects

A heading that starts as an empty mould and fills with liquid chrome as it scrolls into view, its surface a meniscus with a hot line of light that sloshes with scroll speed and settles.

textheadingscroll

An email field in a pill with a chrome rim: each keystroke sends two ripples of light racing round the rim from the caret, a light laps it while sending, and success pours the pill into a round chrome drop with a check.

forminputemail

A floating nav whose current-link indicator is a capsule of mercury on two springs: it stretches thin as it pours to the next link, snaps back round, reaches toward the link you hover, and turns the labels it covers dark.

navigationnavbarindicator

A reveal that casts its content in liquid chrome: molten metal pours down over the space with drips racing ahead and merging into the sheet, then cools away from the top behind a hot seam of light.

revealscrollanimation

A night-glass pill with a sliver of aurora under it, turning on a 60s clock that every button on the page shares, spreading on hover and sending a ring of light out on press.

buttonglowaurora

Aurora Rim Card

components

A night-glass card with a slow aurora rim that turns once every 52 seconds, feathered into light, brightening near the pointer while the card tilts a hair toward it.

cardrimborder

Aurora Drift Text

text effects

Display type filled with aurora light: three bands drift through the letters on slow loops, ray threads slide through them, and the brightest band leans toward the pointer when it comes near.

textheadinggradient text

Aurora Flow Nav

components

A floating night-glass nav whose active mark is a band of aurora light that takes the colour of the sky above its link and flows to the next one leading edge first.

navigationnavbarindicator

The pointer paints a small aurora: a ribbon of light coloured from the indigo fringe to rose that fades like the sky, sending short rays up from every point so the trail reads as a curtain.

cursortrailpointer

A waitlist field that lights like the sky: focus raises a two-hue bloom and lights the rim, every keystroke sends a rose ripple from the caret, and joining sweeps the whole palette once.

forminputemail

A dark pill whose border carries one light: it laps the outline slowly, glides to the nearest point of the border under the pointer and lights the surface from there, and a press sends a ring outward.

buttonctaborder beam

A card lit from the pointer: a bright arc of light on the hairline border, a softer wash across the surface, a two-degree tilt toward the pointer and a little counter-parallax on the content.

cardspotlightborder glow

Slit Light Heading

text effects

A heading lit by a narrow slit of light that crosses it as it scrolls into view: letters under the slit burn white, letters it has passed stay lit, letters ahead wait in the dark.

text effectheadingscroll

An email field that answers with a streaming log: on submit, short lines stream under it with spinners turning into checks while a beam of light runs along its top edge, and the last line waits for your handler.

forminputemail

A footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it every few seconds and lights the letters as it passes.

footersectionwordmark

Beam Connector

animations

A hairline beam between any two elements, routed with rounded right-angle elbows, that carries a pulse of light once per cycle and lands with a flash at the far end.

animated beamconnectorsvg

A pill with a grained light inside it that follows the pointer with a slow settle, a diffused bloom that rises behind it, and a press that exhales a soft ring of light.

buttonglowgrain

A treatment card with a light well: a grained halo in the treatment's own colour rests low, then rises and blooms toward the pointer on hover or focus while the card lifts on a feathered shadow.

cardtreatmentservice

A serif heading that arrives out of soft light: each word condenses from a blur into focus with an 80ms stagger while a glow blooms behind the words and fades as they sharpen.

textheadingblur

A booking picker in three quiet steps, treatment, day and time, where the chosen time blooms into a grained halo, and a request that needs your handler before it confirms anything.

formbookingappointment

A footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant italic serif wordmark.

footerscrollsunset

A breathing guide in soft light: a grained halo swells as you breathe in and settles as you breathe out, a thin ring traces each phase and the seconds count down; it starts only when asked.

breathingmeditationwellness

A button that behaves like a live bento grid: on hover it re-tiles into compartments along lit hairline seams, compresses toward your press, and its keycaps are a real keyboard shortcut.

buttonbentohairline

Spec Numeral Tile

text effects

A big bold numeral in a spec-sheet voice whose digits roll into place like an odometer, set in a hairline bento tile.

numeralcount upodometer

Site navigation as one row of bento tiles sharing 1px hairlines, with a pointer light that shows through them and menus that open as panels of tiles.

navigationnavbarmega menu

A bento tile whose picture is a tightly cropped loop of your product, still until someone hovers or presses play, with a hairline that tracks the loop.

bentovideo cardscreen recording

A bento footer whose tiles are live: a 90-day uptime strip you can read day by day, a back-to-top ring that fills as you scroll, a newsletter that widens across its row as its neighbours reflow, and a wordmark that rises into its crop.

footerbentositemap

A "customise your dashboard" panel: drag or keyboard reorder, show and hide switches, a live miniature of the result, and save, cancel and reset.

reorderdrag and dropdashboard

Aura Dial

components

A 40px hexagon of the viewer's own six values (contrast, warmth, light, density, motion, focus) that opens into an instrument: pull a corner and every Ultra asset on the page retunes live.

personalizationthemesettings

Density Ledger

components

A list you zoom like a map: pinch, ctrl+scroll, a ruler or [ and ] move rows continuously from 64px to 22px, columns arrive at thresholds, and the row under your pointer stays put.

tablelistdensity
New

Ultra Pill Nav

components

A floating glass pill nav that tightens as the page scrolls, with the Aura Dial in it: press U and every Ultra part of the page retunes.

navbarnavigationglass
New

A footer whose huge closing line gets bolder as the reader turns contrast up, with their own six values drawn as a hexagon they can reset.

footervariable fontadaptive

A button whose label is the control: letters under the pointer swell heavier and wider while the rest condense, so the button never changes size, and a press clenches every letter and springs it back.

buttonvariable fontkinetic type

A programme card whose title is set by what the session is: a workshop quiet and narrow, a talk set, a keynote loud and wide, so a grid reads as a legend; hover pushes it further into its own kind.

cardvariable fontkinetic type

Axis Scrub Heading

text effects

A heading written by the scroll: as it rises through the view a wave runs through its letters from hairline to a loud accent peak to its set weight, and scrolling back unwrites it.

text effectscrollvariable font

Axis Flow Nav

components

A nav whose links are one flush line: the active link is loud, the rest condensed, and choosing another makes the width flow to it letter by letter while the nav never changes size.

navigationnavbarvariable font

The kit's rebuild as a primitive: split any text into letters and spring each one between two settings of the face, a fixed delay apart, in the order you choose, on view, on hover or on command.

animationstaggervariable font

A name field that sets your name on a pass as you type: each new letter lands loud in the accent and springs into place, a deleted one collapses to a hairline, and the name stays flush across the badge.

forminputname

A button whose fill prints in cell by cell through the 8x8 Bayer order on hover and focus, with its label inverting exactly where each cell lands; press it and the screen halves to a finer grid.

buttonditherbayer

A card whose image prints in cell by cell the first time it is seen, ordered-dithered with CSS alone, with a soft light that follows the pointer through the dither.

cardditherbayer

A heading that resolves from ASCII into type: its own letterforms redrawn in shape-matched glyphs step from coarse to fine as it comes into view, then a lens under the pointer shows the glyphs again.

text effectasciiheading

A nav whose active link is marked by a band of ASCII density: characters thicken through a ramp under the active link and flow to the next one on a spring, its peak in signal.

navigationnavbarascii

Bayer Dissolve

animations

An ordered-dither transition: a new state prints in over the old one in 8x8 Bayer order while the screen refines from coarse cells to fine, or prints in from the ground on first view.

animationtransitiondither

Drop an image and see it dithered right there, with CSS alone: choose the cell size and the ink, set the exposure, and the request URL for that output builds as you go; submitting copies it.

formfile uploaddropzone

A pill that squashes under your finger and pops back: it sinks onto its base where you press, deeper the longer you hold, keeps its area as it squashes, and springs back with one overshoot while its tinted shadows collapse and return.

buttonsquash and stretchspring

A release card that leans toward the pointer on a soft spring while the sticker on its corner follows through, swinging the other way and jiggling to a stop; press it and the card squashes onto its base and pops back.

cardproduct cardsticker

A heading whose letters squash under the pointer and push their neighbours up: each letter keeps its area as it squashes, springs back with one overshoot, and the line ripples behind the pointer before settling to crisp type.

text effectheadinghover

Taffy Pill Nav

components

A floating pill nav whose bubblegum marker stretches like taffy to the link you choose: long and thin in flight, short and fat as it lands, with the labels turning paper exactly where it covers them.

navigationnavbarindicator

Squish Flip

animations

A list whose items squash and stretch as they move: reorder, filter or add and each item travels to its new place stretched along its path by its speed, squashes as it lands, and settles; new items pop in.

animationfliplayout animation

An email field whose letters drop in and land: each typed letter falls from a little above, stretched as it falls and squashed as it lands, while the real input underneath keeps the caret, selection and autofill.

inputemailform

A button whose label plate hangs off its hairline target along the grid's axis, reaches further and lights its bracket on hover or focus, and seats into the target in 120ms when you press it.

buttonctabroken grid

A work card on the lattice: every third in a run breaks by the rule, two gutters out with the bracket, and hovering the card it overlaps lifts that card above it, the bracket going with the lift, in 240ms.

cardportfoliogrid

A caps headline that inverts exactly at the edges of the plates under it; drag a plate and the inversion follows 1:1, then snaps to a lattice cell, and on column 3, 6 or 9 the plate breaks by the rule.

text effectheadlineinvert

Index Step Nav

components

A numbered nav whose third item hangs one gutter below the bar on a contrasting plate by the rule, the bar's hairline dipping under it, and a tag that steps to the current item, or the one you point at, in four ticks.

navigationnavbarnumbered

The kit's rule for any list: items become plates on the lattice and every third breaks; filter, sort or add and everything moves from where it was in 380ms while the break passes to whichever item is now third.

animationfliplayout animation

A contact form whose numbered labels hang one gutter off the lattice and step into line in 160ms when you use the field; the third row breaks by the rule, and it only claims to send when it has a handler.

formcontactinput

A neo-brutalist button on a hard 5px shadow: hover lifts it 2px, a press lands it exactly on its shadow. 3px ink everywhere, 100ms linear, no blur.

buttonneo-brutalismbrutalist

A neo-brutalist card on a hard shadow: it lifts 2px on hover and lands on the shadow when pressed. A flat drawn motif or a photo, a punched price tag, a sticker badge, 3px ink throughout.

cardneo-brutalismbrutalist

Weight Slam Text

text effects

Display type whose weight slams instead of easing: letters jump 400 → 650 → 900 in two hard steps, left to right like a row of stamps, and let go in three.

text effectvariable fontfont weight

Neo-brutalist form fields in 3px ink: focus presses a field into its shadow, and errors are stamped on as tilted black tags. The browser's own validation, a posting form and a received stamp.

forminputvalidation

Punch Card Field

backgrounds

A background of 80-column punch cards whose holes spell real text in Hollerith code. Holes are punched in column by column on arrival; point at a column to decode it.

backgroundpunch cardhollerith

A neo-brutalist footer under a strip of hazard tape you can grab and throw on its slow 48-second crawl, a sign-up that stamps the tape, and a giant wordmark whose letters press down onto their own ink plates.

footermarqueehazard tape

Signal Field

backgrounds

A machined dot grid lit by slow waves of light, with a pointer lens and click ripples.

backgroundcanvascursor

A felt-tip highlighter stroke with a ragged edge that draws itself behind a phrase when it scrolls into view.

texthighlightscroll

Afternoon sun through a window, crossing a plaster wall over ninety seconds — and your pointer casts a shadow in it.

backgroundcanvaslight

Swatch Fan Deck

components

A fan deck of paint chips that spreads in your hand on hover or focus — a real radio group, with arrow keys and the colour's name, not its hex.

pickercolourradio

Opening hours set as a poster — days hanging off the edge, closed rows struck through, today banded in the one accent — with an open/closed line on the shop's clock.

opening-hourslocal-businesstypography

The second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and the price.

herotabslocal-business

OTP Code Input

components

A one-time-code field whose cells survive SMS autofill, paste and Android backspace.

otpinputform

A seamless procedural concrete surface drawn once to canvas and blended over anything.

textureconcretecanvas

A drafting-tool crosshair with live X/Y coordinates that trails the pointer.

cursorcrosshairreadout

A contextual chip that trails the pointer and names whatever it is over.

cursorlabelspring

A glass lens that follows the pointer and magnifies the live DOM beneath it.

cursorlensmagnify

Snapping Cursor

components

A cursor dot that latches onto interactive elements and takes their exact shape.

cursormagneticsnap

Slice Shear Hover

text effects

Display type cut into horizontal bands that fan apart under the pointer.

hovertextclip-path

An index list that floats a velocity-tilted preview card beside the pointer.

hoverpreviewlist

A button whose outline draws itself around the shape on hover, at any size.

buttonhoversvg

A row of panels where the hovered one grows and its neighbours compress.

hoveraccordiongallery

Slow conic light beams rotating behind content, CSS-only and compositor-friendly.

backgroundbeamsconic-gradient

A canvas dot grid that bulges and brightens away from the cursor.

backgroundcanvascursor

Scanlines, aperture grille, rolling refresh and vignette over any content.

overlaycrtretro

Weight Wave Text

text effects

Per-character variable font weight that swells around the pointer and drifts when idle.

textvariable-fonthover

Extruded Type Tilt

text effects

Display type with a solid extrusion that swings around as the pointer moves.

text3dextrude

A status pill that resizes itself fluidly around whatever content it holds.

islandnotchlayout

A depth system where layers separate under the pointer from one shared motion source.

parallaxpointerdepth

A filterable grid whose tiles travel to their new positions instead of snapping.

fliplayoutfilter

A pile of cards that fans out symmetrically as its section crosses the viewport.

scrollcardssticky

A marquee that accelerates with scroll speed and flips direction when you scroll back.

marqueescrollvelocity

A marker that rides an SVG curve on scroll, banking through the bends.

scrollsvgoffset-path

A rail you can throw — it projects the momentum and settles on the nearest slide.

dragcarouselinertia

Subsequence search that scores by run length and word starts, and highlights the hits.

searchfuzzyinput

The pointer cuts a soft hole through one layer to expose a different one beneath.

cursormaskreveal

Turns any canvas drawing into live ASCII art, sampled one pixel per glyph.

asciicanvashalftone

A media scrubber with buffered range, hover timestamp and pointer-capture dragging.

mediasliderscrub

A mini kanban board where cards drag both within and across columns.

kanbandragboard

An auto-advancing quote carousel with directional slide transitions.

testimonialcarouselquote

A navbar that slides away on scroll-down and reappears on scroll-up.

navbarscrollheader

A track+thumb switch whose icon morphs between a sun and a crescent moon.

themetogglesun

An image whose circular clip-path mask grows and shrinks in lockstep with scroll.

scrollimagemask

A filterable FAQ list where each answer expands independently.

faqsearchaccordion

A CSS-columns masonry gallery with a scale + caption reveal on hover.

masonrygallerygrid

A share icon that expands into a row of social options with a copy-link state.

sharebuttonexpand

An nprogress-style top-of-page bar that eases toward completion, never stalling.

loadingprogressnprogress

An icon badge counter that bounces and pings once on every increment.

badgecounternotification

A monthly/yearly billing switch with the price sliding to its new value.

pricingtoggleswitch

A Cmd+K style searchable command menu with a filtered live list.

commandpalettesearch

A real drag-and-drop file zone with a live dragover state and file chips.

uploaddropzonedrag-drop

An iOS-style pill switch whose highlight slides between options.

segmentedcontrolswitch

A scroll-triggered vertical timeline whose dots and cards reveal in sequence.

timelinescrollreveal

A dark code block with a one-click copy button that confirms itself.

codecopyclipboard

A row of stat counters that count up together the moment they scroll into view.

statscountergrid

A bouncing equalizer bar animation for audio/podcast/music UI.

audioequalizervisualizer

A button that scatters a quick burst of confetti particles on click.

buttonconfetticlick

A queue of toast notifications that stack, reflow, and auto-dismiss independently.

toastnotificationqueue

Loading-state placeholder blocks with a light sweep animating across them.

skeletonloadingshimmer

An SVG progress ring whose fill and centered percentage count up together on scroll into view.

progressringsvg

A custom-styled slider with a drag handle and a value tooltip while dragging.

sliderrangedrag

3D Flip Card

components

A card that flips on a real Y-axis rotation to reveal a back face.

cardflip3d

Typewriter Text

text effects

Text that types itself out character by character, then cycles to the next phrase.

typewritertextcycle

Cards that pin and stack on top of each other as you scroll past.

scrollstickystack

A macOS-style dock where icons magnify based on real distance from the cursor.

docknavmagnetic

A checkbox whose checkmark draws itself in as a real SVG path animation.

checkboxformsvg

A draggable before/after divider that reveals one image over another.

imageslidercompare

A Material-style ripple that expands from the exact click point.

ripplebuttonclick

A text input whose label floats from placeholder position into a caption on focus.

inputformlabel

A tab row where the active-state highlight slides between tabs instead of popping.

tabsindicatorlayoutId

A light beam that continuously travels around a card's border.

borderbeamconic-gradient

A three-line menu icon that morphs smoothly into an X.

iconmenuhamburger

Glitch Text Hover

text effects

An RGB-split, jittery glitch effect on text when you hover it.

textglitchhover

A soft blurred blob that trails the cursor with spring-smoothed lag.

cursorblobspring

A search icon that smoothly expands into a full text input on click.

searchinputexpand

Cards mounted on a rotating 3D ring — the active one faces forward, others recede.

carousel3drotate

A drag-handle-driven list that reorders with a smooth layout swap.

dragsortablelist

A 5-star rating control with hover preview and a springy fill pop.

ratingstarsform

A headline where one word auto-cycles with a vertical odometer-style swap.

textheadlinecycle

A modal sheet you can drag down to dismiss, with a distance + velocity threshold.

modalsheetdrag

Marquee Ticker

components

An infinite scrolling strip of words or logos that pauses when you hover it.

marqueetickerscroll

A card grid with a soft red spotlight that follows the cursor across it.

gridspotlightcursor

Grain Overlay

backgrounds

A subtle animated film-grain texture layered over any section via canvas.

grainnoisecanvas

Scramble Text

text effects

Text that decodes from random characters into its real word on hover.

texthoverdecode

A draggable deck of cards you flick away to cycle through, Tinder-style.

dragswipestack

Odometer Counter

text effects

A stat number that rolls up from zero to its target the moment it's in view.

counternumberscroll

Oversized, tightly-stacked headline words that reveal in on mount — big type as sculpture.

herotypographyeditorial

Tilt Card

components

A 3D card that tilts toward the cursor with spring physics.

card3dcursor

Magnetic Button

components

A button whose label leans toward the cursor with a springy pull.

buttoncursorspring

Want the rest?

251 more components, every site template and the full-kit styles are Pro — one subscription, every entry, a CLI key for installing from your own projects.

See Pro pricing