Skip to content

A library for every small piece

Buttons, toggles, drawers, loaders, forms, cards and micro animations: pick one, press insert, it lands in your page. Zero credits, one click to take it back off.

1,350 ready cards of our own · 5,239 open‑source elements from fifteen libraries

Every card below is live: the preview runs the same code the builder inserts, in a sandbox.

Liquid tab barThe active tab does not slide along the bar, it melts it: the bead pulls out of the bar and merges back into itsolidoutlinesoftglassneon
Receipt printerThe payment does not end with a tick: the button turns into a status line and a paper receipt feeds out of the slot below itsolidoutlinesoftglassneon
Share button morphThe button itself stretches into a row of network marks, a bubble under the cursor names the choice, and a tap folds it into a confirmationsolidoutlinesoftglassneon
Kinetic gridDots part in front of the cursor: the centre sinks, a ring lights up at the rim, the far dots stay putsolidoutlinesoftglassneon
Screen orbitScreens ride a 3D ring and always face the viewer; the ring turns and tilts toward the cursorsolidoutlinesoftglassneon
Word morphThe old word melts and gathers into the new one, and below it the same blocks rearrange into a layout of what it namessolidoutlinesoftglassneon
Phone style switchA soft track, a shadowed knob that stretches while pressed and springs backsolidoutlinesoftglassneon
Sun and moon switchInside the knob the sun turns into the moon while the track lights upsolidoutlinesoftglassneon
Switch with a state captionThe word beside it swaps with the state, sliding up instead of blinkingsolidoutlinesoftglassneon
Three way switchOne track with three positions and a knob that travels to the chosen onesolidoutlinesoftglassneon
Switch with a saving spinnerTurning it on spins a ring around the knob once while the setting is savedsolidoutlinesoftglassneon
Large switchA thumb sized track with a bold caption, made for phone settingssolidoutlinesoftglassneon
Switch with inline wordsThe words on and off live inside the track and swap with the knobsolidoutlinesoftglassneon
Square switchStraight corners and a short travel, for technical panels built on a gridsolidoutlinesoftglassneon
Settings list with switchesThree rows, each with its own caption and switch, split by a hairlinesolidoutlinesoftglassneon
Consent switchA consent row whose underlined terms link is clickable apart from the switchsolidoutlinesoftglassneon
Ghost buttonOnly a label and a chevron at rest; the plate rises on hover and on keyboard focussolidoutlinesoftglassneon
Button with a sweeping fillOn hover the fill sweeps in from the left and the arrow follows it outsolidoutlinesoftglassneon
Split buttonThe main action on the left, a caret on the right opening nearby actionssolidoutlinesoftglassneon
Copy button that changes its labelWhat gets copied is visible beside it and the label slides up to copiedsolidoutlinesoftglassneon
Download with a progress barA bar runs along the bottom edge, the icon spins, then a tick settles insolidoutlinesoftglassneon
Share buttonThree ways to share sit dimmed alongside and spread out on hoversolidoutlinesoftglassneon
Back and next buttonsA quiet back button and a primary next one with the step number between themsolidoutlinesoftglassneon
Back to top with a ringA round button with a read progress ring and an arrow that hops on hoversolidoutlinesoftglassneon
Floating button with a hintA round action button whose hint slides out on hover and on keyboard focussolidoutlinesoftglassneon
Button with a gradient ringThe border is built from tints of the brand colour and drifts around the edgesolidoutlinesoftglassneon
Button with a gloss sweepA slanted highlight passes across once on hover and on keyboard focussolidoutlinesoftglassneon
Button with a press rippleA circle spreads from the centre on press and fades out, with no script at allsolidoutlinesoftglassneon
Button whose icon turns into a tickThe plus spins into a waiting ring and a tick draws itself once it is savedsolidoutlinesoftglassneon
Hold to confirmThe fill grows while the press is held and letting go cancels everythingsolidoutlinesoftglassneon
Swipe to confirmThe knob drags right with the fill behind it, so a stray tap cannot confirmsolidoutlinesoftglassneon
Button with a counter badgeThe number rides the corner of the button and hops a little on hoversolidoutlinesoftglassneon
Follow button with a followed stateThe name stays put while the state flips and the label slides up with a ticksolidoutlinesoftglassneon
Upvote and downvoteTwo arrows around the score; the pressed one lights up and hops oncesolidoutlinesoftglassneon
Star rating with a wordFive stars fill with colour and the word for the chosen score appears belowsolidoutlinesoftglassneon
Quantity stepperMinus and plus on the edges with the number between them in tabular digitssolidoutlinesoftglassneon
List and grid view switchList or grid: the highlight slides under the chosen iconsolidoutlinesoftglassneon
Burger that becomes a crossThree bars fold into a cross: the middle fades and the outer two rotate insolidoutlinesoftglassneon
AuroraThree ribbons of light cross the top while a starry dark sky holds the bottomsolidoutlinesoftglassneon
Meteor showerEight sparks with tails fall across the frame, each in its own turnsolidoutlinesoftglassneon
Retro gridA grid runs to the horizon and towards you, with a striped sun above itsolidoutlinesoftglassneon
Dot gridAn even grid of dots and a pool of light that follows the cursorsolidoutlinesoftglassneon
Light raysFive narrow beams spread from a point above and sway just a littlesolidoutlinesoftglassneon
Colour fogFour pools of colour drift and reshape, their hues fanning out from the brand onesolidoutlinesoftglassneon
Noise veilReal grain over a colour wash: film, not plasticsolidoutlinesoftglassneon
Glow ringTwo thin rings turn against each other around a breathing halosolidoutlinesoftglassneon
Running waveThree waves run at different speeds and add up to living watersolidoutlinesoftglassneon
Press rippleCircles spread on their own and fly out three times faster on presssolidoutlinesoftglassneon
Glowing borderA beam runs around the frame while the inside stays calmsolidoutlinesoftglassneon
Mesh gradientTwelve colour cells blur into one flowing backgroundsolidoutlinesoftglassneon
Gradient headingA gradient built from the page colours rolls through the letters foreversolidoutlinesoftglassneon
Text shineA bright band sweeps across the letters every few secondssolidoutlinesoftglassneon
TypewriterThe line types itself letter by letter, erases back, and the caret blinkssolidoutlinesoftglassneon
Word swapThe last word of the heading swaps for the next one while the rest stays putsolidoutlinesoftglassneon
GlitchThe word tears into colour layers and snaps back togethersolidoutlinesoftglassneon
Outline textThe letters are drawn as outlines and the fill creeps in from the leftoutlinesoftglassneon
Neon signThe tube burns, blinks once in a while and brings its own dark fieldsolidsoftglassneon
Highlighted headingA colour pill unrolls behind one word like a marker strokesolidoutlinesoftglassneon
Brush underlineAn uneven line draws itself under the word as if brushed onsolidoutlinesoftglassneon
Lit quoteA large quote with a pool of light warming up behind the quotation markoutlinesoftglassneon
Counting statsThree numbers with labels, each lighting up its own rule belowsolidoutlinesoftglassneon
Flip boardSix drums spin to their digit, each a beat later than its neighboursolidsoftglassneon
Achievement barThe bar runs up to its mark and a highlight keeps sweeping along itsolidoutlinesoftglassneon
Progress ringsThree rings draw up to their share and put the number in the middlesolidoutlinesoftglassneon
Left drawerNavigation slides in from the left edge over a dim; the same button closes itsolidoutlinesoftglassneon
Right drawerRow details open in a right-hand panel while the list stays putsolidoutlinesoftglassneon
Top sheetA panel drops from the top edge: an announcement, search or quick actionssolidoutlinesoftglassneon
Snapping bottom sheetA sheet with a grab handle stops at half height, and a button lifts it to full heightsolidoutlinesoftglassneon
Cart drawerThe cart slides in from the right with the line items, the total and a checkout buttonsolidoutlinesoftglassneon
Filter drawerFilters move into a drawer: checkboxes, a price range and the result count at the bottomsolidoutlinesoftglassneon
Settings drawerSection settings in a right-hand drawer: labelled switches and a selectsolidoutlinesoftglassneon
Mobile menu drawerA full-height menu with large items and a nested section that opens in placesolidoutlinesoftglassneon
Action sheetA list of actions rises from the bottom with a separate destructive row and a cancel buttonsolidoutlinesoftglassneon
Full-screen searchSearch takes over the whole screen: a field, recent queries and a keyboard hintsolidoutlinesoftglassneon
Image lightboxA shot opens over the page with a caption, a counter and a filmstripsolidoutlinesoftglassneon
Loading overlayThe section is covered by a veil with a ring and a caption until the data arrivessolidoutlinesoftglassneon
Confirm dialogAsks before the irreversible: what exactly goes, what follows and two buttonssolidoutlinesoftglassneon
Stepped dialogA wizard in a dialog: a step bar on top, one question per screen, back and nextsolidoutlinesoftglassneon
Form dialogA short form in a dialog: two fields, a consent tick and a button, with the page kept underneathsolidoutlinesoftglassneon
Full-screen dialogThe dialog takes the whole screen: its own header, long content and a save button at the bottomsolidoutlinesoftglassneon
Dialog with side artArt and one idea on the left, copy and a button on the right; on a phone the art moves on topsolidoutlinesoftglassneon
Notification centreA panel under the bell: unread items with a dot, timestamps and a mark-all buttonsolidoutlinesoftglassneon
Help panelA floating help panel: article search, three answers and a live support rowsolidoutlinesoftglassneon
Profile panelA panel under the avatar: name, email, plan and a short menu with sign-out at the bottomsolidoutlinesoftglassneon
History panelA version feed with the current one marked: when, who and what changed, with a restore on eachsolidoutlinesoftglassneon
Row context menuA three-dot button opens the row action menu over the listsolidoutlinesoftglassneon
Sectioned menuA dropdown with labelled groups, keyboard shortcuts and a separate bottom rowsolidoutlinesoftglassneon
Hover preview cardHover the name and the author card floats up; the button next to it pins the card for anyone without a mousesolidoutlinesoftglassneon
Tooltip on four sidesOne tooltip in four placements: top, right, bottom and left, each with a tailsolidoutlinesoftglassneon
Rich popover tipA question-mark circle opens a tip with a heading, a paragraph and a linksolidoutlinesoftglassneon
Toast stackThree toasts in the corner: success, warning and plain; the cross removes its ownsolidoutlinesoftglassneon
Snackbar with undoA bar at the bottom reports the action, offers an undo and melts away along a time stripsolidoutlinesoftglassneon
Consent popupA cookie window in the corner: what is collected, a policy link and two equal choice buttonssolidoutlinesoftglassneon
Subscribe popupA popup with an art strip, a promise of one letter a month, an email field and a crosssolidoutlinesoftglassneon
Border beamA glowing segment runs around the card edge without stoppingsolidoutlinesoftglassneon
Spotlight cardA soft pool of light follows the mouse across the cardsolidoutlinesoftglassneon
Tilt cardThe card turns after the mouse like a real slabsolidoutlinesoftglassneon
Neon cardA neon tube breathes along the edge and the letters glow like a signoutlinesoftglassneon
Aurora glassColoured blobs drift slowly behind frosted glassoutlinesoftglassneon
Card fanThree cards lie in a stack and fan out on hoversolidoutlinesoftglassneon
Curtain cardThe bottom panel slides up and reveals the text under the coversolidoutlinesoftglassneon
Product shineA band of light sweeps across the product card on its ownsolidoutlinesoftglassneon
Glowing quoteA huge quote mark smoulders behind the text and slowly flares upsolidoutlinesoftglassneon
Review wallReviews ride an endless belt and the edges dissolve into the backgroundoutlinesoftglassneon
Light ring buttonA ring of light spins around the button and a wave keeps rippling outsolidoutlinesoftglassneon
Liquid buttonA blob wobbles inside and floods the whole button on hoversolidoutlinesoftglassneon
Magnetic buttonThe button leans toward the cursor as if magnetisedsolidoutlinesoftglassneon
Beam border buttonTwo bright segments chase each other around the button edgeoutlinesoftglassneon
Spark buttonSparks fly around the button and multiply on hoversolidoutlinesoftglassneon
Label swap buttonOn hover the label slides up and a second one arrives from belowsolidoutlinesoftglassneon
Drifting light CTAA gradient drifts slowly across a wide button with a coloured shadow beneathsolidoutlinesoftglassneon
Icon dockA strip of icons: the one under the cursor grows and its neighbours lift a littlesolidoutlinesoftglassneon
People orbitTwo rings of faces circle slowly around a mark in the middlesolidoutlinesoftglassneon
Logo beltClient marks ride in a loop and the belt edges melt into the backgroundoutlinesoftglassneon
Glowing bentoA grid of uneven tiles with one pool of light travelling over itsolidoutlinesoftglassneon
Glowing pricingThree plans; light runs around the middle one and it sits highersolidoutlinesoftglassneon
Achievement stripFour numbers count up from zero as the strip comes into viewsolidoutlinesoftglassneon
Steps with a beamThree steps joined by a thread with a spark running along itsolidoutlinesoftglassneon
Final callA wide block in a glowing frame with a dot grid breathing behind the textsolidoutlinesoftglassneon
Dot waveFive dots ride up and down in a wave, one after anothersolidoutlinesoftglassneon
Pulsing ringA core holds still while two rings spread out in turnsolidoutlinesoftglassneon
Indeterminate barTwo segments run along the track while the wait is still unknownsolidoutlinesoftglassneon
Card skeletonRoom for a cover, a title, two lines and a button, with a shimmer running acrosssolidoutlinesoftglassneon
Table skeletonA header and four rows of three cells, each row brightening in turnsolidoutlinesoftglassneon
Segment spinnerTwelve ticks around a circle fade in turn, the way a system wait dial doessolidoutlinesoftglassneon
Bouncing squaresFour squares hop in turn and squash a little as they landsolidoutlinesoftglassneon
HourglassSand runs from the top to the bottom and starts over once the top is emptysolidoutlinesoftglassneon
Orbiting cometA dot travels around a ring and drags a fading tail behind itsolidoutlinesoftglassneon
Shimmer blockA placeholder of any size with a band of light sweeping across itsolidoutlinesoftglassneon
Live dotA dot with a spreading ring and a label: the connection is visibly alivesolidoutlinesoftglassneon
HeartbeatA heart beats while the trace draws itself over a pale guide linesolidoutlinesoftglassneon
Counting numberThe number slides up and counts to its total once it comes into viewsolidoutlinesoftglassneon
Progress bar with percentA label, a percent and a track: the fill grows from the left to its valuesolidoutlinesoftglassneon
Progress dialAn arc runs up to its value with the number standing in the middlesolidoutlinesoftglassneon
Step dotsFive dots on a thread: the done ones are filled, the current one is bigger and breathes a ringsolidoutlinesoftglassneon
Countdown digitsHours, minutes and seconds to a deadline; the colons blink and the digits tick by themselvessolidoutlinesoftglassneon
Strength meterFour segments fill one after another and name the level in a wordsolidoutlinesoftglassneon
Sync indicatorTwo arrows turn in a circle while the changes travel to the serversolidoutlinesoftglassneon
RecordingA blinking dot, the word recording and the time since the take startedsolidoutlinesoftglassneon
Drawn tickThe circle draws itself, then the tick strokes in behind itsolidoutlinesoftglassneon
Drawn crossThe circle draws itself, then the cross strokes in with two lines in a rowsolidoutlinesoftglassneon
Bursting heartThe heart swells for a moment and six sparks fly out of itsolidoutlinesoftglassneon
Filling starThe star outline fills from the bottom up and gives a short pop at the endsolidoutlinesoftglassneon
Swinging bellA bell with a counter swings and settles, then does it againsolidoutlinesoftglassneon
Hopping arrowA label and a down arrow that hops briefly and invites a scrollsolidoutlinesoftglassneon
Typing caretThe line appears in chunks, as if typed, with a caret blinking at the endsolidoutlinesoftglassneon
Brush underlineAn uneven brush line strokes itself under a single wordsolidoutlinesoftglassneon
Flipping iconThe tile flips on hover and from the keyboard: the link turns into a ticksolidoutlinesoftglassneon
Confetti popTen paper scraps fan out of the tick and fade as they flysolidoutlinesoftglassneon
Sign inEmail, password with an eye, remember me, a magic link as the second pathsolidoutlinesoftglassneon
Sign upName, email, a password with a live strength meter and a verdict word, terms consentsolidoutlinesoftglassneon
Password resetOne email field, a button and a way back; the envelope rocks on hoversolidoutlinesoftglassneon
Verification codeSix cells that advance themselves, paste works, the button lights up on a full codesolidoutlinesoftglassneon
Magic link sign-inEmail only and one button; a spark runs over the button on hoversolidoutlinesoftglassneon
Split sign-inA quote panel with a slow living gradient on the left, the password form on the rightsolidoutlinesoftglassneon
404 pageA giant number floats and breathes, with a way back and a search under itsolidoutlinesoftglassneon
Something brokeAn error screen with a retry button that spins for real and reports backsolidoutlinesoftglassneon
Coming soonA live countdown in four tiles and a “tell me when you open” fieldsolidoutlinesoftglassneon
MaintenanceTwo gears turn into each other, an ETA and a status linksolidoutlinesoftglassneon
Cookie barA bottom bar with two honest buttons; slides away smoothlysolidoutlinesoftglassneon
Contact formName, email, topic and a message with a character counter; the button promises a reply timesolidoutlinesoftglassneon
WaitlistEmail, your place in line and a stack of avatars of those already insolidoutlinesoftglassneon
PaywallText fades into haze, a lock and a price sit on top; the haze lifts a little on hoversolidoutlinesoftglassneon
Getting startedA first-day checklist with a progress bar; ticks are yours to setsolidoutlinesoftglassneon
ButtonA button with a soft hover lift and a press statesolidoutlinesoftglassneon
Arrow buttonThe arrow slides right on hoversolidoutlinesoftglassneon
Icon buttonA round icon button that rotates a little on hoversolidoutlinesoftglassneon
Toggle switchA switch with a springy knob, keyboard and aria-checkedsolidoutlinesoftglassneon
CheckboxThe check mark draws itself in when tickedsolidoutlinesoftglassneon
Radio groupThree options, the selection dot springs insolidoutlinesoftglassneon
Segmented controlThe highlight slides to the chosen segmentsolidoutlinesoftglassneon
Filter chipsA row of chips, the chosen one highlighted, hover liftssolidoutlinesoftglassneon
Floating label inputThe label floats up on input and the border lights in the site colouroutlinesoftglassneon
Search barA field with a magnifier and a keyboard hintoutlinesoftglassneon
Message box with counterA multi-line field whose border lights on focusoutlinesoftglassneon
SelectA native select with a custom arrow and borderoutlinesoftglassneon
Range slider with valueA filled track and a number that follows the thumbsolidoutlinesoftglassneon
Inline newsletterA field and a button in one capsulesolidoutlinesoftglassneon
TabsThe underline slides to the active tab, arrow keys switchsolidoutlinesoftglassneon
BreadcrumbsA path through sections with separators and the current pageoutlinesoftglassneon
PaginationPage numbers with the active one and arrowssolidoutlinesoftglassneon
Progress stepsThree steps, done ones ticked, the current one highlightedsolidoutlinesoftglassneon
Pill menuA horizontal menu with the active item in a pillsolidoutlinesoftglassneon
Dropdown menuA button opens a list; outside click and Escape close itsolidoutlinesoftglassneon
Shine buttonA band of light sweeps across the button on hoversolidoutlinesoftglassneon
Gradient border buttonA gradient border orbits the button and speeds up on hoveroutlinesoftglassneon
Loading buttonA click shows a spinner, then a “Done” tick, then it comes backsolidoutlinesoftglassneon
Button groupThree buttons as one block, the active one stands outsolidoutlinesoftglassneon
Floating action buttonA round plus; on hover a label slides out and the plus turnssolidoutlinesoftglassneon
Like buttonThe heart fills and pops on click, with a count beside itsolidoutlinesoftglassneon
Labelled switchThe words on and off live inside the track, the knob springs acrosssolidoutlinesoftglassneon
Checkbox cardThe whole card is the checkbox: the border lights up and the tick draws insolidoutlinesoftglassneon
Radio cardsThree delivery options, one chosen; the selection dot fills the active onesolidoutlinesoftglassneon
Colour swatchesColour circles from the site palette; the chosen one is ringed and a little biggersolidoutlinesoftglassneon
Size pickerS, M, L, XL squares; one is unavailable and struck throughsolidoutlinesoftglassneon
Theme switchThe sun leaves, the moon arrives; the track goes darksolidoutlinesoftglassneon
View switcherList, grid, map: the thumb slides under the chosen iconsolidoutlinesoftglassneon
3D push buttonThe button sits on a base and presses down on clicksolidoutlinesoftglassneon
Pulse buttonRings radiate from the button like a signal and pause on hoversolidoutlinesoftglassneon
Input with iconThe search icon on the left lights up with the border on focusoutlinesoftglassneon
Password fieldThe eye shows and hides the password and gets struck through when shownoutlinesoftglassneon
Code cellsFour cells, the cursor moves on by itself, paste spreads the digitsoutlinesoftglassneon
File drop zoneA dashed area with a cloud that lifts on hoveroutlinesoftglassneon
Tag inputTags with crosses inside the field; a cross removes the tag with a shrinkoutlinesoftglassneon
Live filtered listType and the list narrows; an empty result says so honestlyoutlinesoftglassneon
Textarea with counterA character counter sits in the corner and warns near the limitoutlinesoftglassneon
0 to 10 scaleEleven rating cells; the chosen one and everything left of it fill insolidoutlinesoftglassneon
Day pickerSeven circle checkboxes; the chosen ones fill with a springsolidoutlinesoftglassneon
Prefixed inputsA URL with https:// and an amount with a currency; the prefix is part of the frameoutlinesoftglassneon
Validating inputEmail: a tick appears when the address looks real, a cross when it does notoutlinesoftglassneon
Site navbarLogo, links, a button and a burger that opens the menu on narrow screenssolidoutlinesoftglassneon
Mega menuThe “Product” item opens a three-column panel on hover and focussolidoutlinesoftglassneon
Sidebar navItems with icons, the active one has a rail on the left, a count on the inboxsolidoutlinesoftglassneon
Bottom tab barFour tabs like an app; the active one lifts its icon and shows a labelsolidoutlinesoftglassneon
Table of contents“On this page”: anchor list, the active one marked, a nudge on hoversolidoutlinesoftglassneon
Back to topA round button whose arrow hops on hoversolidoutlinesoftglassneon
Column footerFour link columns, a subscribe field and a year line; links underline left to rightsolidoutlinesoftglassneon
Underline linksThe underline grows from the centre on hover and stays under the active onesolidoutlinesoftglassneon
BadgeA small status label with a dotsolidoutlinesoftglassneon
Inline alertA strip with a title, text and a close buttonsolidoutlinesoftglassneon
SpinnerA loading ring with a captionoutlinesoftneon
Dots loaderThree dots bounce one after anothersolidsoftneon
Indeterminate barA bar with a sweep running while loadingsolidsoftneon
Card skeletonA card placeholder with a shimmer while data loadssoftglass
ToastA button shows a message at the bottom for two secondssolidoutlinesoftglassneon
Progress barFill up to a value with a percent labelsolidoutlinesoftglassneon
Progress ringA ring fills to a percent with the number in the middlesolidsoftneon
StatA big number, a caption and a growth arrowoutlinesoftglassneon
Star ratingFive stars, pick by click, highlight on hoversolidoutlineneon
Quantity stepperMinus, number, plus: like a cartsolidoutlinesoftglassneon
Avatar stackOverlapping member circles and a plus-more captionsolidoutlineglassneon
Feature cardAn icon, a title, a text; lifts on hoveroutlinesoftglassneon
TestimonialA quote, a name, a role and starsoutlinesoftglassneon
Pricing cardA name, a price, three bullets and a buttonoutlinesoftglassneon
Monthly or yearly toggleA period switch swaps the prices on the cardssolidoutlinesoftglassneon
AccordionQuestions open one at a time, the arrow turnsoutlinesoftglassneon
TimelineA vertical line with dots and datessolidoutlinesoftglassneon
CTA boxA heading, a line and a button in one boxsolidoutlinesoftglassneon
Keyboard keyA shortcut hint that presses down on hoveroutlinesoftglassneon
Copy fieldA code or link with a button that copies and confirmsoutlinesoftglassneon
TooltipA tip pops above the word on hover and focussolidglassneon
Modal dialogA button opens a dimmed dialog; button, backdrop and Escape close itoutlinesoftglassneon
Top bannerAn announcement strip with a link and a close buttonsolidoutlinesoftglassneon
Empty stateA dashed frame, a folder icon and one action; the folder opens a little on hoversolidoutlinesoftglassneon
Loading stepsFour lines light up in turn: dot, spinner, tick, on a loopsolidoutlinesoftglassneon
Skeleton listThree rows with a circle and bars that a shimmer runs acrossoutlinesoftglassneon
Dismissible alertA bar with an icon and a cross; closes by folding upwardssolidoutlinesoftglassneon
Service statusFour services with dots: three fine, one degraded and pulsingsolidoutlinesoftglassneon
Typing indicatorA chat bubble with three dots bouncing in turnsolidoutlinesoftglassneon
Upload progressA file row whose bar runs to 72 % and shows the speedsolidoutlinesoftglassneon
Success checkA circle opens, the tick draws itself, the caption fades upsolidoutlinesoftglassneon
Achievement badgeA medal with sparks orbiting it; the medal swings on hoversolidoutlinesoftglassneon
KPI tilesThree numbers with a label and a delta; the arrow points up or down, tiles lift on hoversolidoutlinesoftglassneon
Sparkline cardA number and a thin 30-day line that draws itself insolidoutlinesoftglassneon
Bar chartSeven bars grow from the bottom in turn; hover reveals the valuesolidoutlinesoftglassneon
Donut chartThree shares in a ring with a number in the middle; the legend lights on hoversolidoutlinesoftglassneon
Sortable tableClicking a header sorts the rows, the arrow shows the directionsolidoutlinesoftglassneon
LeaderboardFive places with medals for the top three and a score barsolidoutlinesoftglassneon
Mini calendarA month grid, today ringed, the chosen range filledsolidoutlinesoftglassneon
Comparison barsFour horizontal bars with a label and a percent; they grow from the left on appearsolidoutlinesoftglassneon
Product cardA cover with a badge, name, price and a button; the cover zooms on hoversolidoutlinesoftglassneon
Profile cardInitials avatar on a gradient header, a role, three numbers and a buttonsolidoutlinesoftglassneon
Article cardA cover, a category, a title that underlines on hover, author and reading timesolidoutlinesoftglassneon
Pull quoteA big quote mark in the site colour, the text and the author with a rail on the leftsolidoutlinesoftglassneon
Logo rowFive client names sit muted and come alive in colour one at a time on hoversolidoutlinesoftglassneon
Bento gridFour tiles of different sizes; a light follows the cursor across a hovered tilesolidoutlinesoftglassneon
Changelog entryVersion, date, “new” and “fixed” tags, a list with dots in the site coloursolidoutlinesoftglassneon
Video coverA 16:9 frame with a play button that a ring radiates fromsolidoutlinesoftglassneon
Chat bubblesThree messages: theirs on the left, yours on the right in the site colour, times underneathsolidoutlinesoftglassneon
Notification rowAn icon, text with a bold name, the time and an unread dotsolidoutlinesoftglassneon
Pricing tableThree columns with prices and ticks, the middle one highlighted and slightly raisedsolidoutlinesoftglassneon
Flip cardA click flips the card in 3D: a fact on the front, the explanation on the backsolidoutlinesoftglassneon
CarouselThree slides, arrows and dots; the track slides with a springsolidoutlinesoftglassneon
Side drawerA button slides a panel in from the right with a dim; cross, backdrop and Escape close itoutlinesoftglassneon
Hover cardHover the name: a card with an avatar, a role and a button floats upoutlinesoftglassneon
Bottom sheetA sheet rises from the bottom with a grab handle, phone-style; backdrop and Escape close itoutlinesoftglassneon
Command paletteA homegrown Ctrl K: a dialog with search whose list narrows as you typeoutlinesoftglassneon
Labelled dividerA line with a short word in the middleoutlinesoftglassneon
Tag cloudTag links of different weight that light up on hoversolidoutlinesoftglassneon
Avatar with statusInitials in a circle with a softly pulsing online dotsolidoutlineglassneon
CountdownDays, hours, minutes and seconds to a date, ticking by themselvessolidoutlinesoftglassneon

Plus fifteen open libraries inside

Imported under permissive licences, cleaned of scripts and outside addresses, with every style locked to its own element.

1,104 Buttons865 Loaders622 Cards248 Toggles215 Inputs169 Checkboxes131 Forms103 Patterns96 Radios49 Tooltips38 input37 button35 motion30 dropdown27 footers25 menus23 menu23 select23 tooltip22 Notifications22 tabs21 footer21 pagination20 card20 spinners19 indicator19 contact18 avatar18 breadcrumbs18 stats17 badge17 hero17 radio17 steps16 accordions16 badges16 vertical-menu16 testimonials16 content16 feature15 progress15 pricing15 alerts14 mask14 tab14 table14 timeline14 cta14 loader14 Text13 aura13 divider13 range13 textarea13 blog-cards12 checkbox12 collapse12 skeleton12 dividers12 modals12 selects12 textareas12 toasts12 announcements11 alert11 fab11 file-input11 validator11 tables11 features10 accordion10 link10 modal10 navbar10 theme-controller10 toast10 toggle10 button-groups10 empty-states10 grids10 progress-bars10 contact-forms10 empty-content10 avatars9 carousel9 sign-in-and-registration8 rating8 stack8 details-list8 media8 quantity-inputs8 ctas8 feature-grids8 headers8 product-cards8 faq8 sidebar8 header7 countdown7 dock7 kbd7 list7 loading7 stat7 portfolio7 404-pages7 email-templates7 Layout6 join6 label6 megamenu6 mockup-code6 otp6 swap6 timelines6 carts6 faqs6 polls6 team-sections6 blog6 cookies6 button-group6 ecommerce6 gallery6 statistic6 step6 team6 testimonial6 call-to-action5 chat5 drawer5 fieldset5 radial-progress5 status5 text-rotate5 radio-groups5 range-inputs5 notification5 404-5005 heroes5 login4 file-uploaders4 filters4 side-menu4 banners4 newsletter-signup4 product-collections4 sections4 teams4 media-object4 blog-list4 forgot-password4 logos4 register4 statistics4 verification3 filter3 hover-3d3 skip-links3 logo-clouds3 heros3 breadcrumb3 form-layout2 diff2 hover-gallery2 mockup-phone2 mockup-window2 analytics-dashboard2 support-inbox2 empty-state2 privacy-terms1 calendar1 animate-duration-delay1 remove-number-input-spinners1 storefront1 navbars

Sources:Uiverse · MIT · 3,348daisyUI · MIT · 580HyperUI · MIT · 518Meraki UI · MIT · 194Sailboat UI · MIT · 133Tailblocks · MIT · 116Whirl · MIT · 96Kutty · MIT · 68CSSFX · MIT · 45CSShake · MIT · 35Loaders.css · MIT · 29Hamburgers · MIT · 25Epic Spinners · MIT · 20Three Dots · MIT · 20SpinKit · MIT · 12

Put a piece in your page

In the builder: open a section, press Components or Library, pick a card, press insert. Removing it returns the document byte for byte.