FeaturedNew
BlogVertical Blog Card
A cover image over a category, title, excerpt and author row - the default post card for a grid.
#blog#card#post
2 frameworksBeginner
Loading…
Free, copy-paste components in HTML, CSS, Tailwind, React, Next.js and TypeScript. MIT licensed, so use them anywhere.
Assemble a page from library sections, header to footer, then copy or download the complete code.
780 components
A cover image over a category, title, excerpt and author row - the default post card for a grid.
2 frameworksBeginner
An image and copy split side by side that stacks to image-over-text on small screens.
2 frameworksBeginner
A titled section that lays posts out one, two or three across as the viewport grows.
2 frameworksIntermediate
A large cover with the title reversed out over a gradient scrim for the lead story.
2 frameworksIntermediate
A kicker, headline, author-and-date meta row and cover image to open a post.
2 frameworksBeginner
An avatar beside the author name, role, date and read time for the top of a post.
2 frameworksBeginner
A divided list of posts with optional thumbnails - the dense archive or search-result view.
2 frameworksIntermediate
A subscribe card with an email field and button that stacks on mobile - drop it mid-article.
2 frameworksIntermediate
An image and its caption tied together with figure and figcaption, in a rounded frame.
2 frameworksBeginner
An even, responsive grid of square thumbnails that steps from two up to four across.
2 frameworksBeginner
A Pinterest-style masonry wall built from CSS columns, with no JavaScript for the layout.
2 frameworksIntermediate
A tall image card with a title and meta reversed out over a gradient at the base.
2 frameworksIntermediate
A fixed-ratio image frame - square, 16:9 or portrait - that holds its space as it loads.
2 frameworksBeginner
A main image above a row of thumbnails, the product-gallery pattern, with a selected state.
2 frameworksIntermediate
A low-quality placeholder blurs in first, then the full image fades over it once loaded.
2 frameworksAdvanced
A row of overlapping circular photos with an overflow count - who is here, at a glance.
2 frameworksBeginner
Grid items that fade and slide up in sequence as the grid enters the viewport.
3 frameworksIntermediate
An animated counter that eases up to its target value when scrolled into view.
3 frameworksIntermediate
Text typed out character by character, with an optional blinking cursor and loop.
3 frameworksBeginner
A reading-progress bar that fills as its scoped content container is scrolled.
3 frameworksBeginner
A card that lifts and deepens its shadow on hover and keyboard focus.
3 frameworksBeginner
A heading whose gradient fill pans continuously across the text.
3 frameworksBeginner
An expanding ring that pulses behind any element to draw the eye.
3 frameworksBeginner
A card that flips in 3D on hover and keyboard focus to reveal its back.
3 frameworksIntermediate
A button that spawns a material-style ripple from the click point.
3 frameworksIntermediate
An element that springs into place with a bouncy scale on mount.
3 frameworksBeginner
Layered shapes that drift at different depths as the pointer moves.
3 frameworksAdvanced
An SVG success checkmark whose circle and tick draw themselves in.
3 frameworksBeginner
An organic gradient blob that morphs and rotates on a slow loop.
3 frameworksBeginner
Text that resolves out of scrambled glyphs into its final string.
3 frameworksIntermediate
Text whose letters bob up and down in a staggered wave.
3 frameworksBeginner
A button that bursts confetti particles from its center on click.
3 frameworksIntermediate
A card wrapped in a conic gradient border that rotates continuously.
3 frameworksIntermediate
Content that slides and fades in from a chosen edge as it enters view.
3 frameworksIntermediate
A link whose underline scales in from the left on hover and focus.
3 frameworksBeginner
A card that tilts in 3D toward the pointer as it moves across it.
3 frameworksAdvanced
A hamburger button whose bars morph into an X when toggled.
3 frameworksIntermediate
Text overlaid with two clipped color clones that jitter for a glitch look.
3 frameworksIntermediate
A Products button opens a full-bleed mega panel on desktop and a flat headed list on mobile.
3 frameworksAdvanced
A header with an inline search field that flexes to fit, collapsing the links to a hamburger.
3 frameworksIntermediate
A shop header that keeps account and cart icons on the bar at every width, with a cart badge.
3 frameworksIntermediate
A thin utility strip over the main bar; the strip folds into the drawer on mobile.
3 frameworksIntermediate
A bar that floats over a hero with white labels, opening a solid, legible panel on mobile.
3 frameworksIntermediate
Links sit in a rounded pill track with a raised active pill, collapsing to a stacked list.
3 frameworksBeginner
Links carry an underline that scales in from the centre on hover and stays on the active link.
3 frameworksBeginner
A dismissible promo strip above the bar; dismissing it removes the row rather than hiding it.
3 frameworksIntermediate
A ghost sign-in link, a divider and a filled sign-up button - the two-tier auth cluster.
3 frameworksBeginner
A product bar over a horizontally scrolling section tablist that never wraps on mobile.
3 frameworksAdvanced
Five columns of links under a brand blurb - a full sitemap that never squeezes on a phone.
4 frameworksIntermediate
A last-chance conversion panel above an ordinary link row, painting its own colour in both themes.
4 frameworksBeginner
App Store and Google Play badges over a link row, drawn in inline SVG.
4 frameworksIntermediate
A centred logo mark, link row and social icons stacked down the middle.
4 frameworksBeginner
Contact details as a real address beside two link columns.
4 frameworksIntermediate
A locale and currency switcher beside the link row, for a footer that serves several markets.
3 frameworksIntermediate
A row of headline stats over the link columns, marked up as a description list.
3 frameworksIntermediate
A self-painted dark gradient footer with an oversized wordmark and link columns.
3 frameworksIntermediate
Link columns that collapse to native accordions on phones and open to a grid on desktop.
3 frameworksAdvanced
A compact floating card footer that sits inset from the page edges.
3 frameworksBeginner
A centred headline over a bento-style grid of gradient feature tiles that restacks cleanly on mobile.
3 frameworksIntermediate
A headline and CTA above a row of headline metrics that reflows from two columns to four.
3 frameworksBeginner
A headline over a prominent search field with a submit button and quick-fill popular tags.
3 frameworksIntermediate
A headline and CTA above a wrapping strip of customer wordmarks for instant social proof.
3 frameworksBeginner
A centred headline above a pure-CSS browser-window mockup of the product - no image to go stale.
3 frameworksIntermediate
A headline whose last word cycles through a rotating list via a CSS-only vertical rotator.
3 frameworksAdvanced
A near-black hero with a soft radial glow behind the headline and a pair of CTAs.
3 frameworksIntermediate
Copy and a CTA on one side, a checkmarked list of benefits on the other, stacked on mobile.
3 frameworksBeginner
A headline over a collage of testimonial cards with gradient initials avatars and staggered offsets.
3 frameworksAdvanced
A pill announcement link above the headline, pairing a launch note with the main hero CTA.
3 frameworksBeginner
A copy-and-media split with a decorative gradient panel and a single CTA.
3 frameworksBeginner
A "trusted by" wall of inline-SVG brand marks that wraps instead of overflowing.
3 frameworksBeginner
A dismissible page-top notice with a message, a link and a close button.
3 frameworksBeginner
A gradient promo card with a badge, headline and CTA over a contrast scrim.
3 frameworksIntermediate
A live countdown to a deadline with a CTA that respects reduced motion.
3 frameworksAdvanced
A three-up grid of benefits, each with an inline-SVG icon, title and copy.
3 frameworksBeginner
A gated-download card with a gradient cover and a UI-only email form.
3 frameworksIntermediate
A webinar registration card with a date badge and a UI-only email form.
3 frameworksIntermediate
A referral share card with a read-only code field and a copy-to-clipboard button.
3 frameworksIntermediate
A gradient metrics band whose white numerals sit over a contrast scrim.
3 frameworksBeginner
An iOS-style segmented control where the selected tab lifts to a card.
3 frameworksBeginner
A tab strip that scrolls sideways when the tabs outrun the row.
3 frameworksIntermediate
Underline tabs that carry a count badge beside each label.
3 frameworksBeginner
Editor-style tabs each with a real close button you can dismiss.
3 frameworksAdvanced
Pill tabs above a raised, bordered card panel.
3 frameworksBeginner
A single underline bar that slides between tabs as selection moves.
3 frameworksAdvanced
Compact icon tabs with no visible label, each named for AT.
3 frameworksIntermediate
Tabs that split the row into equal columns to fill their container.
3 frameworksBeginner
Tabs inside a tab panel, each level with its own keyboard scope.
3 frameworksAdvanced
A tab strip whose tail collapses into a "More" dropdown menu.
3 frameworksAdvanced
A card carousel where the next and previous cards peek in from the edges.
3 frameworksIntermediate
A transform carousel turned on its side, paging up and down.
3 frameworksIntermediate
The active card sits centred and full-size while its neighbours peek and dim.
3 frameworksAdvanced
A slide carousel with a determinate progress bar alongside the dots.
3 frameworksIntermediate
A quote slider with gradient initials avatars and no image assets.
3 frameworksIntermediate
An infinite, auto-scrolling logo strip that pauses on hover and reduced motion.
3 frameworksIntermediate
A full-bleed hero carousel with gradient panels, headings and real CTAs.
3 frameworksAdvanced
A main stage and a thumbnail rail that stay in sync, with the active thumb auto-scrolling into view.
3 frameworksAdvanced
A carousel whose backdrops lag behind the text to read as depth.
3 frameworksAdvanced
A full-slide carousel that is one native CSS scroll-snap container.
3 frameworksBeginner
Two panels - mission and vision - each with an icon, overline and copy.
3 frameworksBeginner
Founding copy beside a CSS-gradient media panel - no image asset to load.
3 frameworksBeginner
A signed letter from the founder with an initials-avatar signature block.
3 frameworksBeginner
Culture principles in a check-marked grid, the principle as each heading.
3 frameworksBeginner
Stat band whose numbers count up from zero the moment it scrolls into view.
3 frameworksAdvanced
A large heading in one column and the lead paragraphs in the other.
3 frameworksBeginner
A large pull quote with an initials avatar and attribution beneath.
3 frameworksBeginner
A numbered, ordered list of the steps in how the team works.
3 frameworksIntermediate
Award badges with inline-SVG laurels above a wrapping press-logo strip.
3 frameworksIntermediate
A gradient call-to-action banner inviting readers to join the team.
3 frameworksBeginner
A non-destructive alertdialog with a single acknowledge button that takes focus.
3 frameworksBeginner
A confirmation dialog with a check mark that scales in once, dropped under motion-reduce.
3 frameworksBeginner
A consent dialog whose long body scrolls between a fixed header and Accept/Decline footer.
3 frameworksIntermediate
A gallery lightbox over a dark scrim with Prev, Next and Close as real 40px buttons.
3 frameworksAdvanced
A video dialog with a CSS play mockup - no real media - ready to drop your player into.
3 frameworksIntermediate
A Spotlight-style palette that opens top-aligned, filters as you type and runs on Enter.
3 frameworksAdvanced
A consent dialog with three real choices - Accept all, Reject non-essential and Manage.
3 frameworksBeginner
A right-hand slide-over: full-width on a phone, capped at max-w-md from there up.
3 frameworksIntermediate
A base dialog that raises a second dialog on top, peeled one layer at a time by Escape.
3 frameworksAdvanced
A multi-step wizard in one dialog with progress dots, Back/Next and a Finish on the last step.
3 frameworksAdvanced
A click-triggered panel holding a small edit form, with focus moved into the field.
3 frameworksIntermediate
A lightweight confirmation with role="alertdialog", focused on the safe action.
3 frameworksBeginner
A profile card in a dialog: gradient-initials avatar, name, role and a follow action.
3 frameworksBeginner
A swatch grid in a dialog, wired as a radiogroup so the choice is single-select.
3 frameworksIntermediate
A compact month grid in a dialog: leading blanks, pressed selection, pick-to-close.
3 frameworksAdvanced
A grid of reaction buttons in a dialog, each with a real accessible name.
3 frameworksBeginner
A dialog with a read-only link field, a copy button and stacking destination chips.
3 frameworksIntermediate
A menu whose last item opens a submenu - flying out on desktop, stacking at 320px.
3 frameworksAdvanced
A rich preview card that opens on hover AND keyboard focus, not hover alone.
3 frameworksIntermediate
A bell trigger with an announced unread count, opening a dialog list of notifications.
3 frameworksIntermediate
A wide multi-column navigation panel where every link is a menuitem on one keyboard ring.
3 frameworksAdvanced
A menu that lays its items into balanced columns for scanning, on one wrapping ring.
3 frameworksIntermediate
A menu with a search field that narrows the items as you type.
3 frameworksAdvanced
A menu of checkbox rows that stays open so you can tick several at once.
3 frameworksAdvanced
A menu where exactly one row is checked and picking a new one closes it.
3 frameworksIntermediate
A workspace switcher with avatars, the active one checked, and an add action.
3 frameworksAdvanced
A bell trigger with an unread count opening a menu of notification rows.
3 frameworksAdvanced
A grid of colour swatches as a listbox, navigated with two-dimensional arrows.
3 frameworksAdvanced
A search-driven command list steered by a virtual highlight, combobox-style.
3 frameworksAdvanced
A primary action button joined to a chevron that opens a menu of alternatives.
3 frameworksIntermediate
A polite success toast with an icon, capped width and a real dismiss button.
3 frameworksBeginner
A toast with a countdown bar that respects reduced motion.
3 frameworksAdvanced
A scannable activity feed with typed icons and no interrupting live region.
3 frameworksIntermediate
Many related events collapsed into one line with an initials avatar stack.
3 frameworksIntermediate
A single notification row with an initials avatar and an accessible unread marker.
3 frameworksBeginner
A preferences list of channels with accessible switch toggles.
3 frameworksIntermediate
A soft opt-in card shown before the one-shot browser permission dialog.
3 frameworksIntermediate
A dark snackbar carrying one reversible action such as Undo.
3 frameworksIntermediate
A dismissible announcement banner on a gradient, with an icon and CTA.
3 frameworksBeginner
A zero-state for an empty inbox with an inline illustration.
3 frameworksBeginner
A loud, filled confirmation alert with a real dismiss button.
3 frameworksBeginner
The quiet variant - a coloured border and text on the page background.
3 frameworksBeginner
A gentle tinted alert with the severity icon in its own swatch.
3 frameworksBeginner
A "fix these first" summary over a real, semantic list of specifics.
3 frameworksIntermediate
A self-clearing alert with a visible countdown bar.
3 frameworksAdvanced
A short summary that opens onto the noisy detail on demand.
3 frameworksIntermediate
A labelled cookie banner with an equally prominent reject button.
3 frameworksIntermediate
A service health row where the state is never carried by colour alone.
3 frameworksIntermediate
A live countdown to a deadline that stays quiet for screen readers.
3 frameworksAdvanced
Several related alerts as one labelled, navigable region.
3 frameworksIntermediate
A committed-dark navigation column that needs no light styles and no `dark:` toggle to look right.
3 frameworksBeginner
A sidebar whose links filter live as you type into a labelled search field.
3 frameworksIntermediate
A scrolling nav with a pinned footer card showing the signed-in user.
3 frameworksIntermediate
Nav links carrying numeric badges that pair the count with a screen-reader context word.
3 frameworksIntermediate
A sidebar topped with a menu button that switches between workspaces.
3 frameworksAdvanced
Parent links each showing their child links, indented by a single border guide.
3 frameworksIntermediate
A detached, rounded, shadowed card that floats in a padded gutter instead of a flush column.
3 frameworksBeginner
A sidebar led by a gradient brand header with white text over a fixed dark gradient.
3 frameworksBeginner
A mini icon rail that expands to a full-width labelled sidebar on toggle.
3 frameworksAdvanced
Navigation split into labelled groups, each list tied to its heading as a real group name.
3 frameworksIntermediate
A frosted-glass icon dock that lifts each item on hover, gated to fine pointers.
3 frameworksBeginner
An icon dock whose tooltip appears on hover and keyboard focus, above each button.
3 frameworksIntermediate
A floating segmented control that selects a single view from an icon-and-label set.
3 frameworksIntermediate
An icon dock with numeric badges and a status dot, each announced to screen readers.
3 frameworksBeginner
A launcher button that opens a grid popover of app links, closable with Escape.
3 frameworksAdvanced
A now-playing strip with transport controls, a play/pause toggle and a progress bar.
3 frameworksIntermediate
A vertical rail that toggles between icon-only and icon-plus-label from one button.
3 frameworksIntermediate
A horizontal strip of command buttons, each with a visible label and a shortcut hint.
3 frameworksIntermediate
A speed-dial FAB that fans out secondary actions above it on demand.
3 frameworksAdvanced
A floating tab bar whose pill indicator slides to the active tab.
3 frameworksIntermediate
A FAB whose actions fan out along a quarter arc, using the disclosure pattern with focusable-only-when-open actions.
3 frameworksAdvanced
A toggle FAB that morphs its shape, colour and icon between two states, all hung off aria-pressed.
3 frameworksIntermediate
A round FAB that expands into a labelled pill on hover and keyboard focus, its label doubling as the accessible name.
3 frameworksIntermediate
A FAB that opens a vertical list of labelled actions, each row naming itself, with Escape and focus return wired up.
3 frameworksAdvanced
A chat launcher FAB with an unread badge that opens a small message panel, the count folded into its accessible name.
3 frameworksIntermediate
A FAB wrapped in an SVG progress ring driven by a single 0-100 prop, with the ring as pure decoration.
3 frameworksIntermediate
A FAB the user can drag with a pointer or nudge with the arrow keys, so the reposition is not mouse-only.
3 frameworksAdvanced
A FAB that opens a modal bottom sheet of actions, with Escape to close and focus that moves in and returns.
3 frameworksAdvanced
A FAB with a numeric badge whose count is announced in the accessible name and clamps to 99+.
3 frameworksBeginner
A compact 44px FAB - trimmed to the minimum comfortable touch target and no smaller.
3 frameworksBeginner
Plan cards whose prices switch between monthly and annual from an accessible toggle.
3 frameworksIntermediate
Two labelled panels with a decorative VS badge that steps aside when they stack.
3 frameworksBeginner
Two lists of pros and cons where each item carries an icon and a hidden label.
3 frameworksBeginner
Three plan columns that collapse to two then one, keeping excluded rows aligned.
3 frameworksIntermediate
A two-product spec sheet built from a definition list that stacks cleanly on mobile.
3 frameworksBeginner
A pricing matrix with a price under each plan name, scrolling inside its wrapper.
3 frameworksIntermediate
Attribute rows where the winning side is tinted and flagged, never colour alone.
3 frameworksIntermediate
Two product cards with gradient avatars, feature lists and CTAs that stack on mobile.
3 frameworksBeginner
A compact support grid of pure ✓/✗ cells inside a table that scrolls, not the page.
3 frameworksBeginner
Plan tiers that state what they inherit in words rather than re-listing every feature.
3 frameworksBeginner
A Basic / Premium pair that stacks to one column on phones.
3 frameworksBeginner
A contact-sales panel that puts the copy and buttons side by side on desktop.
3 frameworksBeginner
A real table comparing features across plans, scrollable inside its own wrapper.
3 frameworksIntermediate
Tier cards on decorative gradients, with the popular one ringed and labelled.
3 frameworksIntermediate
One centred plan with no card chrome, sized for a simple product.
3 frameworksBeginner
Annual-billed tiers that show the saving as a badge and strike out the monthly price.
3 frameworksBeginner
A seat stepper that recomputes the monthly total and announces it live.
3 frameworksAdvanced
A Free and a Pro card, the paid one inverted to a dark surface for emphasis.
3 frameworksBeginner
Three tiers where the popular one is ringed and carries a text badge.
3 frameworksBeginner
A price panel beside a native accordion of common billing questions.
3 frameworksIntermediate
A single scroll-snap row of gradient tiles that pans sideways instead of wrapping.
3 frameworksBeginner
A responsive grid whose tiles scale up on hover and keyboard focus.
3 frameworksIntermediate
A grid whose visible tiles switch with single-select category chips.
3 frameworksIntermediate
A CSS-columns masonry wall with captions overlaid on a readable scrim.
3 frameworksIntermediate
A Flickr-style justified wall where each row stretches edge-to-edge.
3 frameworksIntermediate
A one-slide-at-a-time carousel with arrows, dot navigation and a live caption.
3 frameworksAdvanced
Snapshot cards on white print frames, tilted and straightening on interaction.
3 frameworksBeginner
A tight three-across square grid with a like and comment overlay on interaction.
3 frameworksIntermediate
A video-wall mock with a pure-CSS play button and duration badge - no real video.
3 frameworksIntermediate
A grid that reveals more tiles in place with a live-announced running count.
3 frameworksIntermediate
A dot-per-page pager where each 10px mark sits inside a 40px tap target.
3 frameworksIntermediate
Fully-rounded pill page links that collapse long runs to an ellipsis.
3 frameworksBeginner
First, previous, next and last icon links with a visually-hidden status.
3 frameworksBeginner
A number field that jumps straight to a typed page, with prev/next either side.
3 frameworksAdvanced
A "Showing 11–20 of 240" readout paired with previous and next links.
3 frameworksBeginner
A segmented group of page links joined by a shared border and hairline dividers.
3 frameworksIntermediate
Two chevron links either side of a compact "Page 3 of 12" readout.
3 frameworksBeginner
A full-width footer bar joining a table above with a range readout and steppers.
3 frameworksIntermediate
Two links driven by opaque next/previous cursors, hidden when an end is reached.
3 frameworksAdvanced
A pill-shaped inline pager with a tiny count and full-size arrow tap targets.
3 frameworksBeginner
Three blurred radial pools over an opaque base - a mesh section that never has to fight its own text for contrast.
6 frameworksBeginner
Blurred colour blobs drifting on twenty-second loops behind ordinary, fully legible content.
3 frameworksIntermediate
A northern-lights sweep on a self-painted night sky, with a scrim that keeps the text legible at every frame.
3 frameworksAdvanced
A card whose radial glow follows the pointer - custom properties do the tracking, opacity does the reveal.
3 frameworksAdvanced
A card wrapped in a slowly rotating conic-gradient border - one paint, then pure transform.
4 frameworksIntermediate
A headline painted with a gradient via bg-clip-text - still real, selectable, announced text.
6 frameworksBeginner
A card with a 1px gradient border via the padding trick - because border-image cannot round corners.
4 frameworksBeginner
A gradient panel with SVG turbulence grain on top - texture without a texture file.
3 frameworksIntermediate
A hairline that fades out at both ends, with an optional soft glow - a breath between sections.
5 frameworksBeginner
Solid and outline gradient buttons whose hover shift is an opacity cross-fade, not a repaint.
3 frameworksIntermediate
Initials on a colour computed from the name - the same person gets the same colour on every page, with no image involved.
4 frameworksIntermediate
One avatar, six sizes - xs through 2xl, with the type scaling in step with the box.
3 frameworksBeginner
A rounded-square avatar for teams, workspaces and projects, with a circle opt-out for people.
3 frameworksBeginner
An avatar with a presence dot - online, away or offline - that says its status in words as well as colour.
5 frameworksBeginner
An avatar with a corner count badge that caps visually at 9+ but tells screen readers the real number.
3 frameworksBeginner
Overlapping avatars with a +N chip for the remainder - the classic "who’s on this" cluster.
4 frameworksIntermediate
An avatar inside an Instagram-style gradient ring that greys out once the story is seen.
3 frameworksIntermediate
The avatar-plus-text block every user list is made of, built so long names truncate instead of breaking the row.
6 frameworksBeginner
An avatar button that opens an account menu - open state, chevron and correct ARIA, with no dropdown library.
4 frameworksAdvanced
The two states of "no face yet": a shimmering skeleton while loading, and an SVG glyph for the user with no photo.
6 frameworksIntermediate
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
5 frameworksBeginner
Tinted pill badges in six colours and three sizes - for tags and categories, not for alarms.
4 frameworksBeginner
Bordered badges with no fill - they borrow whatever surface they sit on.
3 frameworksBeginner
A count badge that caps at "99+", hides at zero, and tells screen readers what it is counting.
5 frameworksIntermediate
A filter chip with a dismiss × - a real button with a real name, not a clickable pill.
4 frameworksIntermediate
A pill badge with an inline SVG beside the label - the icon decorates, the text informs.
3 frameworksBeginner
A gradient pill with a periodic shine sweep - and a reduced-motion story that keeps the gradient.
3 frameworksIntermediate
A count or dot pinned to the corner of anything - button, avatar, icon - via a positioning wrapper.
4 frameworksIntermediate
A 45° ribbon across a card corner, built from one rotated span and one equation.
5 frameworksAdvanced
An inline scalloped seal with a check, drawn in two SVG paths - no icon library.
3 frameworksIntermediate
A responsive grid of quote cards that stacks to one column on mobile.
3 frameworksBeginner
One centred quote with a large avatar - the featured testimonial on its own.
3 frameworksBeginner
A horizontally scrollable row of quote cards using CSS scroll-snap, no JavaScript.
3 frameworksIntermediate
Variable-height quotes flowing down CSS columns for a Twitter-style wall.
3 frameworksIntermediate
Quote cards each headed by a company wordmark rendered as styled text.
3 frameworksIntermediate
Review cards led by an inline-SVG star rating with an accessible label.
3 frameworksBeginner
Quote cards topped by a gradient video thumbnail with an accessible play control.
3 frameworksIntermediate
A large featured quote on a gradient panel beside a stacked list of shorter ones.
3 frameworksAdvanced
A compact stack of overlapping avatars over a rating, count and one-line quote.
3 frameworksBeginner
An editorial serif pull-quote with a single-line attribution.
3 frameworksBeginner
A plain vertical rail with a dot, time, title and description per entry - the default timeline.
3 frameworksBeginner
Entries zig-zag either side of a centre line on desktop and collapse to one column on phones.
3 frameworksIntermediate
A horizontal strip of milestone cards on a rail that scroll-snaps instead of wrapping.
3 frameworksIntermediate
A status-driven roadmap where every item pairs a coloured dot with a worded state badge.
3 frameworksIntermediate
A compact feed of who-did-what, with gradient initial avatars and relative timestamps.
3 frameworksBeginner
A release log with version and date on the left and typed, tagged changes on the right.
3 frameworksIntermediate
A vertical rail of circular icon markers, each paired with a bordered milestone card.
3 frameworksBeginner
Entries bucketed under sticky year headings that pin while their own group scrolls past.
3 frameworksIntermediate
A step tracker that fills the rail up to the current step and marks each state clearly.
3 frameworksAdvanced
A tight event log with an aligned tabular time column and small dots on a slim rail.
3 frameworksBeginner
An endless horizontal strip of wordmarks that loops seamlessly for social proof.
3 frameworksBeginner
Bold phrases that slide past with a dot between each, like a headline ticker.
3 frameworksBeginner
Fixed-width quote cards that scroll continuously, each with an avatar and role.
3 frameworksIntermediate
A fixed-height column of items that scrolls upward and loops, for activity feeds.
3 frameworksIntermediate
Two chip rows that scroll in opposite directions using a single keyframe.
3 frameworksIntermediate
A looping row that pauses on hover and on keyboard focus so items stay clickable.
3 frameworksBeginner
A scrolling strip whose edges fade to transparent with a CSS mask.
3 frameworksIntermediate
A row of fixed-size gradient tiles that scrolls endlessly, ready to swap for photos.
3 frameworksIntermediate
A slim full-width banner that loops short messages on a solid colour surface.
3 frameworksBeginner
A looping row of dotted skill pills, ideal for a portfolio or about page.
3 frameworksBeginner
A stylised dotted-continent world drawn in inline SVG, with labelled city pins and no tile server.
3 frameworksIntermediate
A dotted map panel of office pins beside a matching address list, stacking on mobile.
3 frameworksIntermediate
Address, email and phone on one side, a dotted map with a single pin on the other.
3 frameworksBeginner
An abstract grid of region tiles you can pick from, with the choice announced below.
3 frameworksAdvanced
Dotted map pins that open a small details popover on click, one at a time.
3 frameworksAdvanced
A dotted map with a floating stat card summarising reach - countries, cities, uptime.
3 frameworksBeginner
A scannable store list linked to a dotted map, where selecting either highlights the pair.
3 frameworksAdvanced
A zig-zagging SVG route with numbered stops above an ordered list of directions.
3 frameworksIntermediate
A responsive 16:9 map frame that renders a styled placeholder and leaves the live iframe commented out.
3 frameworksBeginner
A near-black dotted world with a soft radial glow behind it and glowing city pins.
3 frameworksIntermediate
A row of numbered markers joined by connectors, with completed steps shown as checks.
3 frameworksBeginner
A vertical list of steps, each with a title and description and a connecting rail.
3 frameworksBeginner
A horizontal stepper whose markers hold your icons, swapping to a check once complete.
3 frameworksIntermediate
The smallest footprint of the set: a row of dots plus a single active-step line.
3 frameworksBeginner
A titled "Step 2 of 5" fraction over a real progressbar fill.
3 frameworksBeginner
A four-stage checkout indicator that restates the active stage as a line on mobile.
3 frameworksIntermediate
A stepper header over a content panel with working Back and Next controls.
3 frameworksAdvanced
A row of even segments that fill as you progress, with a fraction label above.
3 frameworksBeginner
A horizontal stepper whose visited steps are buttons you can click to jump back.
3 frameworksAdvanced
A vertical stepper where each step declares its own state, including error.
3 frameworksIntermediate
A full month laid out as an accessible table with prev/next navigation, a today ring and a selectable day.
3 frameworksIntermediate
A tight datepicker-body calendar with single-letter headers that drops into a popover at ~260px wide.
3 frameworksBeginner
A single week as seven equal-width day buttons that shrink to ~40px without overflowing a phone.
3 frameworksBeginner
A single day's hours as rows, each event dropped into the hour it starts - no overlap, no overflow.
3 frameworksIntermediate
A month grid that carries event chips per day, truncating to two plus a "+N more" so busy days never blow out the row.
3 frameworksAdvanced
A GitHub-style 53-week by 7-day contribution grid in a horizontal scroll container with a Less-to-More legend.
3 frameworksIntermediate
A vertical list of upcoming events, each a full-row link with a fixed date badge and a coloured tone dot.
3 frameworksBeginner
A booking grid of 30-minute slots - two columns on a phone, three on desktop - with taken slots shown struck through.
3 frameworksIntermediate
Two side-by-side months for range selection that stack to one column at 320px, with a shaded span between endpoints.
3 frameworksAdvanced
All twelve months as mini-tables that reflow from one column to four, with today marked once across the whole year.
3 frameworksAdvanced
A small dot replaces the native cursor and tracks the pointer inside its panel.
3 frameworksBeginner
An outlined ring that eases in behind the pointer with a per-frame lerp.
3 frameworksIntermediate
A dark panel that reveals its content through a radial spotlight following the pointer.
3 frameworksIntermediate
A button that is gently pulled toward the pointer while it is near, eased in rAF.
3 frameworksAdvanced
A comet trail of fading particles that follows the pointer across the panel.
3 frameworksAdvanced
A word that scales up and tilts toward the pointer on hover.
3 frameworksIntermediate
Hovering a link floats a thumbnail preview that follows the pointer.
3 frameworksIntermediate
A soft blurred gradient blob eases after the pointer behind the panel content.
3 frameworksIntermediate
Two thin guides track the pointer with a live coordinate readout.
3 frameworksIntermediate
An inline SVG arrow replaces the cursor and leans into the direction of travel.
3 frameworksBeginner
A short hint that appears above a control on hover and on keyboard focus.
3 frameworksBeginner
A tooltip that anchors to the top, right, bottom or left of its trigger via a `side` prop.
3 frameworksIntermediate
A row of tooltips that share a delay: the first waits, the rest open instantly while you sweep across.
3 frameworksAdvanced
A wider tooltip with a bold title over a line of supporting description.
3 frameworksIntermediate
A "?" help dot beside a label that reveals an explanatory hint on hover or focus.
3 frameworksBeginner
Ellipsised text that reveals the full string in a tooltip on hover and focus.
3 frameworksIntermediate
A tooltip pairing an action label with its hotkey rendered in real `<kbd>` elements.
3 frameworksBeginner
A tooltip that tracks the pointer as it moves across the trigger, with a fixed fallback for keyboard.
3 frameworksAdvanced
A tooltip that previews on hover or focus and latches open when the trigger is clicked.
3 frameworksIntermediate
An editor-style bottom bar whose compact items each reveal a tooltip above on hover or focus.
3 frameworksIntermediate
A read-only field that opens an absolutely positioned calendar popover, filling the input on select.
3 frameworksIntermediate
An always-visible single-month calendar with month navigation and a selected day.
3 frameworksBeginner
Pick a start and end date in one month; the days between highlight as a range.
3 frameworksIntermediate
Two side-by-side months sharing one range, stacking to a single column on mobile.
3 frameworksAdvanced
A calendar beside quick-pick shortcuts like Today, Tomorrow and Next week.
3 frameworksIntermediate
Native month and year selects above the grid for fast jumps across the calendar.
3 frameworksBeginner
A keyboard-first MM/DD/YYYY field that masks as you type and mirrors a valid parse in a mini calendar.
3 frameworksAdvanced
A calendar where days outside a min-max window are truly disabled, not just greyed.
3 frameworksIntermediate
Three native day, month and year selects - the right tool for a date decades in the past.
3 frameworksBeginner
Clicking any day selects its whole Sunday-Saturday week, highlighting the entire row.
3 frameworksIntermediate
A native select of times generated on a fixed interval, so the value always lands on the grid.
3 frameworksBeginner
Hours and minutes as ARIA spinbuttons with plus/minus controls and arrow-key support.
3 frameworksIntermediate
A clock face whose twelve hour marks are real buttons, with an SVG hand pointing at the selection.
3 frameworksAdvanced
Hour and minute selects with a format switch, while the stored value stays 24-hour throughout.
3 frameworksIntermediate
Paired start and end selects that stack on mobile and flag an end that precedes the start.
3 frameworksIntermediate
A radiogroup of tappable time-slot buttons that wraps from one column at 320px upward.
3 frameworksBeginner
Three independently scrollable columns of hours, minutes and AM/PM in a compact wheel-style panel.
3 frameworksAdvanced
Two masked HH and MM fields that clamp input, auto-advance and respond to the arrow keys.
3 frameworksAdvanced
Hours and minutes selects that edit a single total-minutes value with a live summary.
3 frameworksBeginner
A time select paired with an IANA timezone select for unambiguous cross-zone scheduling.
3 frameworksIntermediate
A recursive, data-driven tree of folders and files with expand/collapse toggles.
3 frameworksBeginner
A file tree that tints each file icon by its extension for quick visual scanning.
3 frameworksBeginner
A file tree that flags each change with an M/A/D/U badge and a matching tint.
3 frameworksIntermediate
A multi-select file tree where a folder reflects and toggles all of its files.
3 frameworksAdvanced
A file tree with a live filter that keeps ancestors, auto-expands and highlights matches.
3 frameworksAdvanced
An IDE-style explorer panel with an EXPLORER header and a highlighted active file.
3 frameworksIntermediate
A file tree whose rows reveal add, rename and delete buttons on hover and focus.
3 frameworksIntermediate
A file tree that mirrors the selected file as a wrapping breadcrumb path above it.
3 frameworksIntermediate
A file tree showing a formatted byte size per file and a child count per folder.
3 frameworksBeginner
A file tree with a grip handle that appears on hover to signal reorderable rows.
3 frameworksIntermediate
A context menu that opens at the pointer on right-click, scoped to its own area so the native browser menu still works elsewhere.
3 frameworksAdvanced
A three-dot overflow button on a list row that opens a menu of row actions.
3 frameworksBeginner
A menu with a flyout submenu that opens sideways, with full arrow-key navigation between levels.
3 frameworksAdvanced
A horizontal application menu bar of File / Edit / View menus with desktop-style keyboard navigation.
3 frameworksAdvanced
A bottom action sheet that slides up over a scrim, with large touch targets and a drag handle.
3 frameworksIntermediate
An app-launcher popover of gradient icon tiles arranged in a grid, with two-dimensional arrow-key navigation.
3 frameworksIntermediate
A user menu triggered by an avatar, with an identity header above the profile, settings and sign-out commands.
3 frameworksBeginner
A multi-select filter menu of checkboxes with a live count badge and a clear-all action.
3 frameworksIntermediate
A menu whose items can be pinned into a Favorites group at the top, toggled with a star.
3 frameworksIntermediate
The reference keyboard menu: wrapping arrows, Home/End, Enter/Space, Escape, and typeahead that jumps to the first matching item.
3 frameworksAdvanced
A labelled horizontal progress bar with a live percentage readout above the track.
3 frameworksBeginner
An SVG ring that fills from the top with a bold percentage in its centre.
3 frameworksIntermediate
A discrete progress track split into equal pill segments that fill left to right.
3 frameworksBeginner
A thick progress bar with a moving barber-pole stripe that freezes under reduced motion.
3 frameworksIntermediate
A single bar split into coloured category segments with a labelled, numeric legend.
3 frameworksAdvanced
A card pairing a raised-versus-goal amount with a progress bar and a caption.
3 frameworksIntermediate
A semicircular gauge with a large numeral, built from one SVG arc drawn twice.
3 frameworksAdvanced
A compact single-row progress bar with a label and percentage, sized for table cells.
3 frameworksBeginner
A checklist of tasks with a bar whose range is completed steps, not a percentage.
3 frameworksIntermediate
A slim indeterminate loading bar with a sliding chip and a static reduced-motion fallback.
3 frameworksIntermediate
A text field that turns typed values into removable chips, with the chips wrapping above the input.
3 frameworksAdvanced
A wrapping list of chips, each with a real remove button and an accessible label.
3 frameworksBeginner
Category labels tinted from a fixed, contrast-safe colour palette keyed by name.
3 frameworksBeginner
A wrapping row of toggle chips for faceted filtering, each carrying its pressed state.
3 frameworksIntermediate
A combobox that filters a suggestion list as you type and adds the picked value as a chip.
3 frameworksAdvanced
Shows the first few tags and rolls the rest into a +N button that expands them.
3 frameworksIntermediate
A wrapping grid of multi-select tags with a check cue layered on top of the selected colour.
3 frameworksIntermediate
Chips that pair a leading icon from a small fixed set with their text label.
3 frameworksBeginner
Chips whose label doubles as an edit button, swapping in an inline field to rename.
3 frameworksAdvanced
One chip rendered at three sizes, with padding and text scaling together per step.
3 frameworksBeginner
A radiogroup of preset colour swatches where the choice is marked by a ring and a check, not colour alone.
3 frameworksBeginner
A single native range painted with the hue wheel that reports the resolved hex.
3 frameworksBeginner
Three native ranges for hue, saturation and lightness, each track previewing its own channel.
3 frameworksIntermediate
A typed hex field paired with a native colour input, flagging invalid entries with an icon and text.
3 frameworksIntermediate
The classic saturation/brightness square, driveable by pointer and by arrow keys.
3 frameworksAdvanced
An opacity range over a CSS checkerboard that reports the full rgba() value.
3 frameworksIntermediate
A ten-step tint and shade ramp generated from one base colour by walking lightness.
3 frameworksIntermediate
Two colour inputs and an angle slider composing a live linear-gradient with copy-ready CSS.
3 frameworksIntermediate
A WCAG contrast checker whose AA and AAA verdicts read as a tick and a word, not a colour.
3 frameworksAdvanced
A native colour input backed by a de-duplicated, capped most-recently-used strip.
3 frameworksIntermediate
A dashed drop area with a real file input that stays reachable by keyboard and screen reader.
3 frameworksBeginner
A single labelled button that opens the file picker and reports the chosen file name inline.
3 frameworksBeginner
A dropzone that lists each picked file with a simulated per-file progress bar and cancel control.
3 frameworksIntermediate
An image dropzone that renders picked files as a responsive thumbnail grid with per-tile remove.
3 frameworksIntermediate
A round avatar picker with a live preview, a simulated upload state and change/remove controls.
3 frameworksIntermediate
A content card that reveals a full-card drop overlay while a file is dragged over it.
3 frameworksIntermediate
A file input that validates type, size and count on pick and splits results into accepted and rejected.
3 frameworksAdvanced
A focusable target that accepts an image pasted from the clipboard, with a browse fallback.
3 frameworksAdvanced
A queue of files with simulated uploads, per-item status and a Retry action on failures.
3 frameworksAdvanced
A tabbed control offering a file picker on one tab and a validated URL field on the other.
3 frameworksAdvanced
A semantic list of rows with a primary label and an optional trailing meta value.
3 frameworksBeginner
Contact rows with a gradient initials avatar, name, email and a trailing action button.
3 frameworksIntermediate
Multi-select rows where the whole row is the label and checked rows tint their background.
3 frameworksIntermediate
An email-style list with sender, subject, a preview line, a timestamp and an unread dot.
3 frameworksIntermediate
Rows fronted by a fixed gradient thumbnail tile with a title, description and trailing badge.
3 frameworksBeginner
A list pairing each label with a trailing value and a coloured up/down delta.
3 frameworksBeginner
A scrollable list whose section headers pin to the top as their rows scroll under them.
3 frameworksIntermediate
Disclosure rows built on native details/summary that expand to reveal more content.
3 frameworksIntermediate
An ordered leaderboard where the rank badge accents the top three and scores align on the right.
3 frameworksBeginner
Rows reordered with up/down buttons - the accessible baseline that drag-and-drop forgets.
3 frameworksAdvanced
A large hero search field with a live combobox suggestion list driven by the keyboard.
3 frameworksIntermediate
A navbar search icon that expands into a full input on click and collapses when empty.
3 frameworksIntermediate
A ⌘K-style command palette opened by a button, with keyboard-navigable filtered commands.
3 frameworksAdvanced
A search field over toggleable category chips that narrow an in-memory result list.
3 frameworksIntermediate
A search field that drops down recent searches on focus, each removable individually.
3 frameworksIntermediate
A search field that filters a list and wraps the matched substring in a semantic mark.
3 frameworksIntermediate
A search field with segmented scope tabs that narrow the same result set client-side.
3 frameworksIntermediate
A button that opens a full-viewport search overlay with a large field and live results.
3 frameworksAdvanced
A search field that debounces input, shows an in-field spinner, then reveals filtered results.
3 frameworksAdvanced
A search field above a table that filters rows live across every column, with a scroll wrapper.
3 frameworksIntermediate
A labelled on/off switch built on a real checkbox with `role="switch"`, driven entirely by CSS.
3 frameworksBeginner
A switch that prints ON/OFF inside the track so the state is legible without any colour.
3 frameworksBeginner
A switch whose check and cross icons swap with state, so it reads in pure greyscale.
3 frameworksIntermediate
An exclusive segmented picker built from a real radio group inside a fieldset.
3 frameworksIntermediate
A toolbar of `aria-pressed` buttons where several toggles can be active at once.
3 frameworksIntermediate
A sticky Follow/Following pill on one `aria-pressed` button whose label and icon change with state.
3 frameworksBeginner
A grid of selectable cards backed by a radio group, showing a ring and a check on the chosen one.
3 frameworksIntermediate
A switch that shows a spinner and waits for the server before committing the new state.
3 frameworksAdvanced
A settings-list row pairing a title and helper text with a switch, tappable across its full width.
3 frameworksBeginner
A show/hide disclosure on native `<details>`/`<summary>` with a chevron that rotates on open.
3 frameworksIntermediate
A spotlit target with a positioned callout card - Step X of N, Back, Next and Skip, all scoped to its own box.
3 frameworksAdvanced
A getting-started card with checkable tasks, a live progress bar and a collapse toggle.
3 frameworksIntermediate
A scoped "what's new" dialog with an inline-SVG illustration, a version tag, feature bullets and dual actions.
3 frameworksIntermediate
Pulsing beacon dots over a mock UI that open a small tip popover on click or focus.
3 frameworksAdvanced
A driver.js-style sequence whose highlight and tooltip caret move along a mock toolbar as you advance.
3 frameworksAdvanced
A data-driven table with zebra striping, wrapped in a horizontal scroller that keeps it usable at 320px.
3 frameworksBeginner
A table whose columns sort on a keyboard-reachable header button, with the state exposed via `aria-sort`.
3 frameworksIntermediate
Row checkboxes with a tri-state select-all header and a live-updating selection count.
3 frameworksIntermediate
A members table with gradient-initials avatars and status badges that pair a colour dot with a word.
3 frameworksIntermediate
A scrollable table whose header pins to the top of its own scroll box as the body scrolls under it.
3 frameworksIntermediate
Each row expands to reveal a detail row spanning every column, toggled by an accessible disclosure button.
3 frameworksAdvanced
Client-side pagination in a real `<tfoot>`, with a live "Showing X-Y of Z" range and Prev/Next controls.
3 frameworksIntermediate
Inline cell editing: click a cell to swap in an input, commit on Enter or blur and cancel on Escape.
3 frameworksAdvanced
One semantic table that renders as labelled cards on mobile and a normal grid from `md` up - no sideways scroll.
3 frameworksIntermediate
A table with a toolbar above it: text search, a category filter select and a column-visibility toggle.
3 frameworksAdvanced
A centred heading, sub-copy and a primary/secondary button pair - the default closing call-to-action.
3 frameworksBeginner
Copy and a button on one side, a pure-CSS gradient media panel on the other, stacked on mobile.
3 frameworksBeginner
A rounded CTA banner on a colour gradient, with a scrim that keeps the white text legible.
3 frameworksIntermediate
A heading over an inline email field and submit button - the whole CTA is the signup.
3 frameworksIntermediate
A heading and button above a row of headline metrics that reflows from two columns to four.
3 frameworksIntermediate
A near-black CTA with a soft radial glow behind the heading and a pair of buttons.
3 frameworksIntermediate
A heading over two buttons of equal weight - a genuine self-serve-or-demo decision.
3 frameworksBeginner
A CTA inside an elevated card that reads as lifted off the page with a ring and soft shadow.
3 frameworksBeginner
An edge-to-edge CTA over a CSS dot pattern, with a scrim gradient holding the white text.
3 frameworksIntermediate
A heading and copy above App Store and Google Play badges built from inline SVG.
3 frameworksIntermediate
A centred login card with email, a toggleable password field and a submit button.
3 frameworksBeginner
A two-column sign-in with the form beside a decorative gradient panel that hides on mobile.
3 frameworksIntermediate
Google and GitHub buttons above a labelled "or" divider and a standard email/password form.
3 frameworksBeginner
A passwordless sign-in that takes only an email and shows a "check your inbox" confirmation.
3 frameworksBeginner
A one-time-code step with a single numeric field styled to look segmented, plus a resend action.
3 frameworksAdvanced
A bare email/password form with no card chrome, for when it already sits inside a container.
3 frameworksBeginner
A branded gradient panel beside the form, carrying the logo and tagline through props.
3 frameworksIntermediate
A gradient logo badge centred above the login card, deriving its initial from the brand prop.
3 frameworksBeginner
A login card in its error state, with a role="alert" banner and an aria-invalid password field.
3 frameworksIntermediate
A login card with a real "remember me" checkbox and a "forgot password?" link that wraps on mobile.
3 frameworksBeginner
A centred registration card with name, email and password fields and a full-width submit.
3 frameworksBeginner
A registration form beside a checkmarked benefits panel that stacks below it on mobile.
3 frameworksIntermediate
OAuth buttons above an "or" divider and an email fallback, all inside one card.
3 frameworksBeginner
The first step of a wizard: a labelled progress bar over step 1 of 3 with a Continue button.
3 frameworksIntermediate
A registration form whose password field drives a live four-segment strength meter.
3 frameworksAdvanced
A registration card with a required terms-and-privacy consent checkbox linked to its label.
3 frameworksIntermediate
A single email field and button for passwordless or waitlist sign-up, stacking on mobile.
3 frameworksBeginner
A registration form beside a gradient testimonial panel that stacks below it on mobile.
3 frameworksIntermediate
A private-beta form gating registration behind a monospace invite-code field.
3 frameworksIntermediate
A registration card topped by a pure-CSS boxed logo mark and brand name.
3 frameworksBeginner
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
3 frameworksBeginner
KPI cards where each delta pairs a direction arrow and a hidden word with its colour.
3 frameworksIntermediate
Metric cards with an inline SVG sparkline drawn from each series.
3 frameworksIntermediate
A single dominant metric with a label, optional delta and supporting copy, centred.
3 frameworksBeginner
A grid of SVG circular progress rings, each a real `progressbar` with a centred percentage.
3 frameworksAdvanced
Period-over-period stat cards showing the current value, delta and the prior figure.
3 frameworksIntermediate
Horizontal tiles pairing a coloured icon badge with a metric value and label.
3 frameworksBeginner
A titled panel wrapping a divided row of KPIs with optional deltas.
3 frameworksIntermediate
Labelled progress bars showing current value against a target with an accessible ratio.
3 frameworksIntermediate
A dark gradient band of centred metrics that paints its own surface, no `dark:` variants.
3 frameworksIntermediate
A responsive card grid of people with gradient-initials avatars, names and roles.
3 frameworksBeginner
Team cards where each person carries LinkedIn, X and GitHub links with per-person labels.
3 frameworksBeginner
A compact divided list of people, each row an avatar with name, role and an optional tag.
3 frameworksBeginner
A large featured leader card above a reflowing grid of the rest of the team.
3 frameworksIntermediate
Gradient tiles whose bio fades in over a scrim on hover and keyboard focus.
3 frameworksIntermediate
A dense grid of circular gradient-initials avatars with names and short roles.
3 frameworksBeginner
People grouped by department into reflowing columns, each under its own heading.
3 frameworksIntermediate
An avatar-free, typographic list of names and roles that reflows into columns.
3 frameworksBeginner
A horizontally scrolling, snap-aligned strip of team cards with no JavaScript.
3 frameworksIntermediate
A team card grid whose final tile is a dashed "join us" call to action.
3 frameworksIntermediate
A centred 404 with a big gradient code, a heading, sub-copy and a pair of recovery actions.
3 frameworksBeginner
A 404 built around an inline single-colour SVG of a disconnected cable, with a return-home action.
3 frameworksIntermediate
A 500 crash screen with a warning icon, an apology and both a Retry action and a way home.
3 frameworksBeginner
An access-denied screen with a lock icon, a clear explanation and a request-access action.
3 frameworksBeginner
A friendly down-for-maintenance screen with a clock icon, an ETA pill and a status-page link.
3 frameworksIntermediate
An offline screen with a struck-through wifi icon and a single Retry action to reconnect.
3 frameworksIntermediate
An empty search-results state that echoes the query and offers Clear search and Browse all.
3 frameworksBeginner
A first-run empty state with a dashed placeholder tile and a primary Create action.
3 frameworksBeginner
A 429 throttle screen with a stopwatch icon, a retry-after hint and a Try again action.
3 frameworksIntermediate
A 404 that offers a real native search form plus a fallback link back home.
3 frameworksIntermediate
A dotted-sphere globe that turns slowly under a fixed highlight - pure CSS and inline SVG, no WebGL.
3 frameworksBeginner
A latitude/longitude wireframe sphere drawn entirely in SVG ellipses, turning gently.
3 frameworksIntermediate
A dotted globe with flowing connection arcs and interactive, keyboard-reachable location pings.
3 frameworksAdvanced
A two-column hero: headline, copy and CTA on one side, a rotating dotted globe on the other.
3 frameworksBeginner
A rotating globe ringed by KPI badges that overlap it on desktop and drop below it on phones.
3 frameworksIntermediate
A dotted globe overlaid with a mesh of links and nodes that twinkle on staggered timers.
3 frameworksAdvanced
A near-black section with a pulsing radial glow behind a rotating dotted globe.
3 frameworksBeginner
A small globe circled by three tilted orbit rings, each with a satellite sweeping its own speed.
3 frameworksIntermediate
A flat SVG dot-map with stylised continents and interactive, pulsing location markers.
3 frameworksAdvanced
A dark call-to-action band with a rotating dotted globe bleeding off the right edge.
3 frameworksBeginner
Asymmetric feature tiles where a hero cell spans two columns and two rows and the rest pack around it.
3 frameworksIntermediate
A grid of whole-card product links with gradient art panels and one large feature tile.
3 frameworksIntermediate
Key metrics as bento tiles - one hero number on a gradient panel, the rest bordered around it.
3 frameworksBeginner
Colourful gradient panels in an asymmetric bento layout, each captioned with a single word.
3 frameworksBeginner
A photo-collage bento built from CSS gradient panels, so there is no external image to preload.
3 frameworksIntermediate
A pure-CSS app mockup as the hero tile, flanked by feature cards in a bento grid.
3 frameworksAdvanced
Testimonials at mixed sizes - one hero quote on a dark tile, shorter quotes packed beside it.
3 frameworksIntermediate
Feature tiles each led by an inline-SVG icon in a rounded badge, arranged as a bento grid.
3 frameworksIntermediate
A near-black bento with a soft radial glow and frosted glass tiles over it.
3 frameworksIntermediate
A portfolio of whole-tile project links over gradient thumbnails with a masonry-style span layout.
3 frameworksAdvanced
A wrapping row of icon-only social links, each an inline SVG with an accessible name.
3 frameworksBeginner
Labelled share buttons that open real share-intent URLs in a new, isolated tab.
3 frameworksBeginner
A profile card with a gradient-initials avatar and a follow button that toggles state.
3 frameworksIntermediate
A stack of post cards, each with an author row and icon-plus-number engagement counts.
3 frameworksIntermediate
A profile header with a gradient cover, overlapping avatar, verified badge and stats.
3 frameworksIntermediate
A responsive grid of labelled social tiles - two columns on phones, three from small up.
3 frameworksBeginner
An as-seen-on wordmark row paired with follower counts for instant social proof.
3 frameworksIntermediate
A tweet-style quote card built from real figure and blockquote semantics.
3 frameworksIntermediate
A vertical share rail that sticks beside the article as it scrolls, scoped to its row.
3 frameworksAdvanced
A wrapping row of metric counters, each an icon plus a number plus a label.
3 frameworksBeginner
A centred name, email and message form with inline validation and no chrome.
3 frameworksBeginner
A contact form beside a stylised inline-SVG map panel that stacks on mobile.
3 frameworksIntermediate
A form beside a column of address, phone and email with icons.
3 frameworksBeginner
An intro column with a response-time note beside the contact form.
3 frameworksBeginner
The contact form inside a bordered, shadowed card centred on the page.
3 frameworksBeginner
A department/topic radio-card picker above the contact form.
3 frameworksIntermediate
A gradient invitation panel beside the contact form, stacked on mobile.
3 frameworksIntermediate
A compact two-field email and message form with no card or chrome.
3 frameworksBeginner
A contact form beside a short native-details FAQ, stacked on mobile.
3 frameworksIntermediate
A contact form followed by a row of social icon links.
3 frameworksBeginner
A right-anchored cart panel over a dimmed backdrop, with line items, a subtotal and a checkout button.
3 frameworksIntermediate
A two-column cart page with line items and an order summary that drops below the items on mobile.
3 frameworksIntermediate
The reusable core: an accessible list of cart rows with gradient thumbnails and per-row remove buttons.
3 frameworksBeginner
A centred empty-cart placeholder with a decorative icon, a message and a start-shopping CTA.
3 frameworksBeginner
A header cart button with a count badge that opens a compact dropdown of items and a subtotal.
3 frameworksIntermediate
Line items beside an order-summary sidebar whose subtotal, tax and total are all derived from the items.
3 frameworksIntermediate
Cart rows with working minus/plus quantity steppers that recompute each line and the subtotal live.
3 frameworksAdvanced
An apply-code form that validates against a code map and shows the discount and new total live.
3 frameworksAdvanced
Two lists - in-cart and saved-for-later - with each row moving to the other on a labelled button press.
3 frameworksIntermediate
A cart whose order-summary sidebar sticks in view as a long list of items scrolls on desktop.
3 frameworksIntermediate
Contact, shipping and payment in one scrolling form with a single place-order button.
3 frameworksIntermediate
A checkout form beside a sticky order summary that stacks below the form on mobile.
3 frameworksIntermediate
A four-step wizard - contact, shipping, payment, review - with a progress bar and step tracker.
3 frameworksAdvanced
A read-only summary card listing line items, subtotal, shipping, tax and a bold total.
3 frameworksBeginner
A card-details form - number, name, expiry, CVC - that is UI only and charges nothing.
3 frameworksIntermediate
An address form wired with the exact autocomplete tokens browser autofill expects.
3 frameworksBeginner
Apple Pay, Google Pay and PayPal-style express buttons over a labelled "or" divider.
3 frameworksBeginner
A review step summarizing contact, shipping and a masked card, gated by a terms checkbox.
3 frameworksBeginner
A single email field with a continue-as-guest button and a route to sign in.
3 frameworksBeginner
A "this is a gift" toggle that reveals gift wrap and a message field with a CSS-only peer.
3 frameworksIntermediate
A three-field change-password form - current, new and confirm - with a show/hide toggle and live mismatch feedback.
3 frameworksBeginner
A new-password form with a live strength bar whose label is announced through an aria-live region.
3 frameworksIntermediate
A self-contained card with current/new/confirm fields and a Cancel plus Update button pair.
3 frameworksBeginner
A settings-page row with a description on one side and a compact change-password form on the other.
3 frameworksIntermediate
A new-password field over a live checklist of rules that tick green as each is satisfied.
3 frameworksIntermediate
A dialog-styled change-password card with a title, close button and current/new fields.
3 frameworksAdvanced
An explainer panel beside the form, collapsing to a single stack on mobile with the copy first.
3 frameworksIntermediate
A new-password field paired with a six-digit verification code input to confirm the change.
3 frameworksAdvanced
A change-password card that swaps to a confirmation panel with a check icon after submit.
3 frameworksIntermediate
A stripped pair of underlined new and confirm fields with a single save button.
3 frameworksBeginner
Step one of a reset: an email field and a submit that mails a recovery link.
3 frameworksBeginner
A new-password and confirm-password pair with a show toggle and a live mismatch hint.
3 frameworksBeginner
A single numeric field for the emailed 6-digit code, with a resend action.
3 frameworksIntermediate
A branded card with a lock badge, heading and a single new-password field.
3 frameworksBeginner
The confirmation screen after a reset request, with a resend button and back link.
3 frameworksBeginner
The all-done screen with a green check and a link onward to sign in.
3 frameworksBeginner
A new-password field with a live four-segment strength meter announced to screen readers.
3 frameworksIntermediate
A two-column layout: the reset form on one side, a decorative gradient panel on the other.
3 frameworksIntermediate
The error state for a stale or used reset link, with a one-tap request for a fresh one.
3 frameworksBeginner
A chrome-free reset form - just a label, an email field and a submit for embedding in a framed page.
3 frameworksBeginner
A call-to-action button with a gradient fill and a soft coloured glow on hover.
6 frameworksBeginner
An FAQ accordion with a search box that filters the questions as you type.
6 frameworksAdvanced
An avatar trigger with an identity header, account items and sign out.
6 frameworksIntermediate
A photo grid with tag filters and a live-announced result count.
6 frameworksIntermediate
The complete keyboard contract - arrows, Home/End, Enter, two-stage Escape and Backspace.
6 frameworksAdvanced
One line - copyright and the legal links. For an app shell or a checkout page.
6 frameworksBeginner
A price block with inclusions and a CTA band across the foot of the same card.
6 frameworksIntermediate
An anchored popover with a pointing tail that says which control it belongs to.
6 frameworksIntermediate
An off-canvas sidebar with a backdrop, a real focus trap, Escape to close and focus restoration.
6 frameworksAdvanced
A red button that arms on the first click and only deletes on the second.
6 frameworksIntermediate
A media card with the image beside the content that stacks vertically on mobile.
6 frameworksBeginner
A subscribe dialog built on native `<dialog>` - focus trap, Escape, and backdrop dismissal.
6 frameworksAdvanced
A markdown field with bold, italic and link buttons that wrap the selection.
6 frameworksAdvanced
Grouped checkboxes with a three-state select-all per group.
6 frameworksAdvanced
A radio group laid out in a row, for two to four short options.
6 frameworksBeginner
Content that fades and rises into place as it enters the viewport.
6 frameworksIntermediate
Dated milestones running down a rail, oldest first.
6 frameworksIntermediate
A modal sheet that slides up from the bottom edge, with the full dialog contract.
6 frameworksAdvanced
A table footer bar: a range readout, a rows-per-page select and two step links.
6 frameworksIntermediate
A sweeping bar for work whose length nobody knows.
6 frameworksIntermediate
A button that shows an inline spinner and blocks input while work is in flight.
6 frameworksBeginner
An accordion that tints the whole card while its answer is open.
6 frameworksBeginner
A muted looping video behind a scrim, with a poster fallback and no autoplay for reduced-motion users.
6 frameworksAdvanced
A capped multi-select that disables the rest at the cap - and says why.
6 frameworksAdvanced
A numbered step flow with a connector rail running between the markers.
6 frameworksIntermediate
A slide-in drawer with a real focus trap, Escape to close, scroll lock and focus restoration.
6 frameworksAdvanced
A menu with a submenu that flies out sideways, driven by Left and Right.
6 frameworksAdvanced
A photo stage with prev/next arrows, a position counter and a scrolling thumbnail filmstrip.
6 frameworksAdvanced
A photo card with a gradient scrim, text laid over it and a hover zoom.
6 frameworksIntermediate
A tab rail down the left with the panel beside it.
6 frameworksIntermediate
A round FAB whose label appears on hover and on focus - while the real accessible name lives on the button.
6 frameworksIntermediate
A seat slider that recomputes the price live, built on a native range input.
6 frameworksAdvanced
An accessible accordion where one answer opens at a time.
6 frameworksIntermediate
Each option carries a title and an explaining line, wired with aria-describedby.
6 frameworksIntermediate
A full-width strip that sits above the site footer.
6 frameworksBeginner
Expandable sections of sub-links built on the disclosure pattern - real triggers, real panels.
6 frameworksAdvanced
Copies text to the clipboard and confirms with a check and a "Copied" label for two seconds.
6 frameworksIntermediate
A field with attached prefix and suffix addons - https:// … .com.
6 frameworksIntermediate
Tags rendered inside the trigger, with Backspace removing the last one.
6 frameworksAdvanced
A popover holding menu items, with the full arrow-key model and Escape.
6 frameworksAdvanced
A floating icon dock whose items swell under the pointer, the neighbours lifting less than the one you are on.
6 frameworksAdvanced
A page-wide status bar for a condition that is true right now.
6 frameworksIntermediate
Service cards that lift and reveal a call to action on hover and on focus.
6 frameworksIntermediate
Three cards at a time on desktop, one on mobile, built on scroll-snap.
6 frameworksIntermediate
Takes the whole viewport on a phone and collapses to a centred card from sm: up.
6 frameworksIntermediate
A dismissible notice with a severity icon, message, timestamp and close button.
6 frameworksIntermediate
An accordion inside an accordion panel, with the heading levels kept correct.
6 frameworksAdvanced
A disclosure over a fieldset of real checkboxes - no listbox, no virtual focus.
6 frameworksIntermediate
Four big metrics with their labels, marked up as a definition list.
6 frameworksBeginner
A full-width OAuth provider button with a brand icon slot - "Continue with GitHub".
6 frameworksBeginner
A translucent sticky bar that stays blurred over the page and earns a border once you scroll.
6 frameworksIntermediate
A character counter that warns near the limit and announces only when it matters.
6 frameworksAdvanced
A bordered list of checkbox rows with a tri-state select-all and a live count in the header.
6 frameworksIntermediate
The inbox behind the bell - everything the toasts already discarded.
6 frameworksAdvanced
A FAB that expands into a stack of actions - the disclosure pattern, with Escape and focus return wired up.
6 frameworksAdvanced
A long, grouped comparison table with sticky plan headers and an accented column.
6 frameworksAdvanced
A thumbnail grid whose photos open in a real modal dialog.
6 frameworksAdvanced
An IntersectionObserver sentinel that keeps a real Load more button beside it.
6 frameworksAdvanced
Content-shaped placeholders that stand in while data loads.
6 frameworksBeginner
A headline over an inline email field and submit - the whole hero is the signup.
6 frameworksIntermediate
A main image with a clickable thumbnail strip beneath it.
6 frameworksIntermediate
A two-column feature checklist, each column under its own heading.
6 frameworksBeginner
A menu split into labelled sections with separators - groups that are real semantics.
6 frameworksAdvanced
An exclusive accordion built on `<details name>` with no JavaScript at all.
6 frameworksBeginner
A media card’s placeholder - cover, title, body, byline.
6 frameworksBeginner
A centred stack - wordmark, links, a row of social icon buttons and a copyright.
6 frameworksIntermediate
Chosen options as removable chips in the control, over a multi-select listbox.
6 frameworksAdvanced
Category tabs switching service panels, with the full ARIA tabs keyboard pattern.
6 frameworksAdvanced
An icon dock whose labels fade in under the icon on hover and on keyboard focus.
6 frameworksIntermediate
A real table comparing every feature across plans, with accessible tick cells.
6 frameworksIntermediate
A popover with a heading, body copy and an action - labelled by its own heading.
6 frameworksIntermediate
The pitch on the left, the form on the right, stacked on mobile.
6 frameworksIntermediate
An invalid field whose error message is wired to it with aria-describedby.
6 frameworksIntermediate
A segmented control - the look of a button row, the behaviour of a native radio group.
6 frameworksIntermediate
A default action attached to a dropdown toggle, with a real keyboard-navigable menu.
6 frameworksAdvanced
A customer quote with a star rating, avatar, name and company.
6 frameworksBeginner
Folder-style tabs where the active tab joins the panel below it.
6 frameworksIntermediate
A closable status message that hands focus somewhere sensible.
6 frameworksIntermediate
A 4rem rail of icon-only links, each with a tooltip on hover and on keyboard focus.
6 frameworksIntermediate
A questions-and-answers block scoped to one service, built on native disclosure.
6 frameworksBeginner
A floating vertical dock pinned to the left edge, with an active indicator that hangs off aria-current.
6 frameworksIntermediate
Tabs that pair a leading icon with a visible label.
6 frameworksBeginner
An invalid select wired with `aria-invalid` and `aria-describedby` - not just a red border.
6 frameworksIntermediate
An accordion whose + indicator morphs into a − as the panel opens.
6 frameworksIntermediate
Value cards pairing an icon with a principle and the copy that explains it.
6 frameworksBeginner
A dialog wrapped around a real form - Enter submits, submitting closes it.
6 frameworksIntermediate
A status message that asks for something back.
6 frameworksIntermediate
A textarea that grows to fit its content, with no scrollbar and no drag handle.
6 frameworksAdvanced
A parent checkbox that goes mixed when only some of its children are selected.
6 frameworksAdvanced
An article card with a cover image, category chip, excerpt and author byline.
6 frameworksBeginner
An avatar, name and email per row, with the filter searching name and email both.
6 frameworksAdvanced
Links left, wordmark dead centre, actions right - a three-column editorial header.
6 frameworksBeginner
A hero on a slowly panning CSS gradient, with a scrim that keeps the text legible at every frame.
6 frameworksIntermediate
The top of a single service page - kicker, title, summary, dual CTA and a meta row.
6 frameworksBeginner
Two photographs stacked under a draggable wipe handle that also works from the keyboard.
6 frameworksAdvanced
A fully rounded button with a leading count badge for unread or pending totals.
6 frameworksBeginner
A disclosure accordion with the chevron leading the label.
6 frameworksBeginner
A carousel that advances on a timer, pauses on hover and focus, and respects reduced motion.
6 frameworksAdvanced
A capped queue of toasts sharing one live region.
6 frameworksAdvanced
A back-to-top button that appears past a scroll threshold and leaves the tab order when it leaves the screen.
6 frameworksIntermediate
A single pricing tier with a feature list, price and call to action.
6 frameworksBeginner
An append-on-demand list that announces its new result count.
6 frameworksIntermediate
A listbox with labelled groups - the ARIA analogue of `<optgroup>`, with a flat keyboard.
6 frameworksAdvanced
A menu with a glyph on every row - icons as scanning aids, labels as the names.
6 frameworksIntermediate
An email capture beside two link columns, with inline validation announced to screen readers.
6 frameworksAdvanced
A label that sits inside the field and floats above the value on focus or fill.
6 frameworksIntermediate
Avatar cards with name, role, short bio and social links.
6 frameworksIntermediate
A floating strip of formatting actions with real separators and full arrow-key navigation.
6 frameworksAdvanced
A determinate bar that knows its number and says so.
6 frameworksIntermediate
A keyboard-accessible tab strip with the active tab underlined.
6 frameworksIntermediate
Selectable cards for a single choice - a plan picker built on a real radio group.
6 frameworksIntermediate
A marketing feature tile with an icon, heading, copy and a "Learn more" link.
6 frameworksBeginner
A bordered card with a heading, a pitch, the form, and the privacy note underneath.
6 frameworksBeginner
A hint that opens on hover AND keyboard focus, with role="tooltip" and aria-describedby.
6 frameworksIntermediate
A pricing grid with a real switch that recomputes every price.
6 frameworksIntermediate
A combobox that offers to create the tag you just typed when nothing matches.
6 frameworksAdvanced
A textarea with a bounded drag handle - vertical only, between a min and a max.
6 frameworksBeginner
A single-column list of services with the icon in a fixed left gutter.
6 frameworksBeginner
The "Note:" block in a page of prose - an alert with no ARIA at all.
6 frameworksBeginner
A sidebar that animates between 15rem and 4rem, hiding its labels and leaving the icons behind.
6 frameworksIntermediate
Two captioned figures side by side, showing both states at once.
6 frameworksIntermediate
A square, icon-only button whose accessible name is enforced by its own type signature.
6 frameworksBeginner
A storefront card with a square image, price, star rating and an add-to-cart button.
6 frameworksIntermediate
Each question is a detached card, separated by whitespace instead of dividers.
6 frameworksBeginner
A settings toggle styled over a native checkbox, with `role="switch"` on the input itself.
6 frameworksIntermediate
A transient, auto-dismissing confirmation announced politely.
6 frameworksIntermediate
A nav bar whose Products link opens a real keyboard-navigable submenu - click, arrows, Escape.
6 frameworksAdvanced
Copy on the left, picture on the right, stacked in reading order on mobile.
6 frameworksBeginner
A listbox with an icon per option, mirrored into the trigger once chosen.
6 frameworksIntermediate
A destructive confirmation that opens with focus on Cancel, not on Delete.
6 frameworksAdvanced
A pill-shaped FAB carrying its icon and a visible label, for when the action needs saying out loud.
6 frameworksBeginner
A Pinterest-style wall of varying-height photos, built on CSS columns.
6 frameworksIntermediate
Two independent lists side by side - the versus layout that is deliberately not a table.
6 frameworksBeginner
A search field with a leading icon and a clear button that appears once filled.
6 frameworksIntermediate
One plan in a split card: the pitch on one side, the price panel on the other.
6 frameworksBeginner
Two step links either side of a live "Page 3 of 10" readout.
6 frameworksBeginner
A KPI tile with a large metric, a label and a coloured trend delta.
6 frameworksBeginner
A menu button with the full keyboard model - arrows, Home/End, Escape, focus restore.
6 frameworksIntermediate
Three dots on a stagger - the “still thinking” loader.
6 frameworksBeginner
A four-column sitemap with a brand blurb - the full footer for a marketing site.
6 frameworksIntermediate
A slide carousel with prev/next arrows, dots and a polite live region.
6 frameworksIntermediate
A debounced combobox with real loading, empty and idle states - and a race guard.
6 frameworksAdvanced
Image-and-copy rows that alternate sides down the page.
6 frameworksIntermediate
A borderless button that stays invisible until hover - for the quiet half of a button pair.
6 frameworksBeginner
A five-tab bottom bar with an active state, an unread badge and safe-area padding for notched phones.
6 frameworksBeginner
One outlined container with hairline dividers between the rows.
6 frameworksBeginner
A selectable card whose entire surface is the target - and which is still a real checkbox underneath.
6 frameworksIntermediate
A click-triggered panel anchored to its button, with Escape and outside-click dismiss.
6 frameworksIntermediate
New activity announced in the flow, without an overlay.
6 frameworksIntermediate
One row, one field, one button - the smallest honest email capture.
6 frameworksBeginner
A segmented control where the selected tab becomes a filled pill.
6 frameworksBeginner
A labelled multi-line field with helper text and a vertical resize handle.
6 frameworksBeginner
A listbox with the full ARIA pattern - virtual focus, arrow keys, and dismiss on outside click.
6 frameworksAdvanced
Founding narrative beside a portrait, with a founding-year callout.
6 frameworksBeginner
A logo, an inline link row and a CTA, collapsing to a hamburger menu below the md breakpoint.
6 frameworksIntermediate
A native radio group in a fieldset, with a legend that gives it an accessible name.
6 frameworksBeginner
A titled dialog with a focus trap, Escape to close and focus returned to the trigger.
6 frameworksIntermediate
A static status message in four severities, sitting in the flow.
6 frameworksBeginner
A plan-versus-feature matrix built as a real table, with readable boolean cells.
6 frameworksBeginner
The canonical Starter / Pro / Enterprise grid, with the middle tier promoted.
6 frameworksBeginner
An even, responsive grid of captioned photos with no JavaScript.
6 frameworksBeginner
A numbered page strip that collapses long runs to an ellipsis.
6 frameworksIntermediate
A centred team member card with an avatar, role, short bio and social links.
6 frameworksBeginner
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
6 frameworksBeginner
A static navigation column - brand, icon-and-label links, and one clearly marked current page.
6 frameworksBeginner
A labelled text input with helper text wired to it via aria-describedby.
6 frameworksBeginner
A combobox that filters as you type, over a multi-select listbox.
6 frameworksAdvanced
A three-column grid of services, each an icon, a title and a line of copy.
6 frameworksBeginner
A bordered button with a transparent fill that floods with colour on hover.
6 frameworksBeginner
An accordion where any number of answers can stay open at once.
6 frameworksIntermediate
An unread counter that accrues without ever interrupting.
6 frameworksBeginner
A round, fixed icon button for the one action a screen is really about - with a ring that survives any backdrop.
6 frameworksBeginner
A native checkbox wired to its own label and hint - the three-element field every form starts from.
6 frameworksBeginner
A carousel that cross-fades between slides instead of sliding.
6 frameworksBeginner
A logo, one row of links and a copyright line - stacked on mobile, spread on desktop.
6 frameworksBeginner
A styled native `<select>` - the accessible baseline, with the platform popup left intact.
6 frameworksBeginner
The rotating ring, with a sentence attached for anyone who can’t see it.
6 frameworksBeginner
Use it from npm
Prop-driven sections you import instead of paste. Typed, tree-shakeable, and upgradeable with a version bump.
npm install adysreBrings the design tokens and tells Tailwind to scan the package. Skip it and import the pre-compiled stylesheet instead.
@import "tailwindcss";
@import "adysre/styles.css";Its own entry point, so nothing else comes along for the ride.
import { AboutStats } from 'adysre/blocks';
// Or import just the one, and skip the barrel entirely:
// import { AboutStats } from 'adysre/blocks/about-stats';
export function Section() {
return (
<AboutStats
kicker="By the numbers"
title="Where we are after six years"
stats={[
{ label: 'People', value: '12' },
{ label: 'Projects shipped', value: '148' },
{ label: 'Client retention', value: '94%' },
]}
/>
);
}