M
MiniDev UI
Admin consoleadmin-consoleA full admin console with an impersonation banner, org switcher, KPI strip and tabs for users, SSO and IP allowlist, resource quotas and bulk user import.
Admin overviewadmin-overviewAn admin overview section with a heading and invite action, stat tiles with deltas for seats, MRR, NPS and churn, and a recent activity feed below.
Agency portfolioagency-portfolioAn agency portfolio page with a marketing navbar, animated headline, project cards that fade up in sequence as they scroll in, and a mega footer.
Analytics pageanalytics-pageA React analytics page with a KPI strip for installs, trials, conversions and seats, plus two chart cards showing 30 day bar trends side by side.
Animated beamanimated-beamLight travels along curved paths from sources into a hub and out to a result, measured from the real DOM. Includes a Beam primitive to connect any two elements.
Animated feature rowanimated-feature-rowA row of feature cards that slide up with a staggered delay when scrolled into view. Pass title and description pairs; reduced motion keeps them still.
Animated listanimated-listA live feed where new items drop in at the top with a spring and older ones slide down. Ideal for activity streams, notifications and happening now sections.
Animated tabsanimated-tabsTabs with a sliding pill indicator and panels that fade in the direction of travel. Full WAI-ARIA tabs keyboard support with Arrow keys, Home and End.
Animated tooltipanimated-tooltipA row of overlapping avatars where hovering or focusing one pops up a name and role card that leans and slides with the pointer.
Api docs pageapi-docs-pageA React API reference page with a sidebar nav, endpoints tagged by HTTP method, a copy base URL action and a curl request example in a code block.
Aurora backgroundaurora-backgroundSoft northern-lights curtains that drift and sway across the panel behind your content.
Background boxesbackground-boxesA skewed grid of hairline boxes behind your content where the box under the pointer lights up in colour and fades out behind it.
Before after wipebefore-after-wipeA before and after comparison slider in React: drag the handle or use the labelled range input to wipe between two layouts across the full width.
Bento livebento-liveA React bento feature grid where each tile runs a live demo: a rolling MRR counter, a typed AI answer, ranked alerts and an orbiting integrations ring.
Billing pagebilling-pageA Tailwind workspace billing page with three plan cards and a highlighted Pro tier, a seat usage meter, and an invoice list with paid and void statuses.
Blog homeblog-homeA blog index page with a marketing nav, tag filter chips for all, design and engineering, a grid of post cards with excerpts and dates, and a footer.
Blur fadeblur-fadeReveals its children as they scroll into view, rising out of a soft blur and settling into focus on a spring.
Border beamborder-beamWrap any card with a beam of light that travels around its border. A masked conic gradient in your accent colors, with pricing card demo, pauses for reduced motion.
Brand kit pagebrand-kit-pageA brand showcase page combining poster type, a typographic marquee, tilt cards, a text scramble, a grid reveal, a price morph and a magnetic CTA.
Browser mockupbrowser-mockupA browser window frame with traffic lights, back and forward buttons, an address bar and optional tabs, wrapping your screenshot or any children.
Card tiltcard-tiltA card that tilts in 3D toward the pointer on springs, with an accent glare that follows the cursor. It stays flat when reduced motion is preferred.
Careers pagecareers-pageA React careers page with a marketing nav, animated headline, open roles listing location and employment type with apply buttons, and a mega footer.
Changelog marketingchangelog-marketingA marketing changelog with a gradient masked headline, a subscribe CTA and a timeline of versions with highlight dots and bullet lists that slide in.
Changelog motionchangelog-motionA React changelog timeline where each release slides in on scroll with version, date, title, an optional New, Fix or Premium badge and a bullet list.
Changelog pagechangelog-pageA Tailwind changelog card listing releases with a monospace version, tag badge, date, title and summary, separated by hairline dividers.
Chat pagechat-pageA fixed height AI chat page in React with a header, a scrollable thread of user and assistant messages, and a prompt input pinned to the bottom.
Client pitch kitclient-pitch-kitA full client pitch page chaining a kinetic hero, metric ticker, live component rail, product mock, proof panel, before and after wipe, FAQ and quotes.
Command centercommand-centerA React operations dashboard with a KPI row for agents, jobs, failures and latency, plus a command palette dialog opened from the header action.
Command waitlistcommand-waitlistA React terminal styled waitlist card with a join --email prompt, a required email input and a join button that confirms, springing into view on scroll.
Commerce checkoutcommerce-checkoutA two column React checkout page with an editable cart line item, a shipping address form, and an order summary with subtotal, tax, total and a pay button.
Confetti buttonconfetti-buttonA React button that bursts confetti from itself on click, with gravity, drag and spin on a temporary canvas. No library, and skipped for reduced motion.
Contact salescontact-salesA contact sales page with an animated headline, a case study card and press quote on one side, and a work email, company and message form on the other.
Cta bandcta-bandA closing CTA section with a large lit headline and an inline email form whose button animates from idle to sending to a success check. Async onSubmit.
Cta glowcta-glowA call to action card in Tailwind with soft accent glow layers, a title, optional description, a magnetic get started button and an outline button.
Cursor spotlight panelcursor-spotlight-panelA panel whose accent radial spotlight follows the cursor, driven by Framer Motion values without re-renders. It shows a still surface for reduced motion.
Dashboard homedashboard-homeA React dashboard home screen with a page header and new project action, a KPI row with deltas, a 30 day active users bar chart and an activity feed.
Device framedevice-frameWraps any React UI in a phone with notch, status bar and side buttons, or a browser window with a URL bar. Built from theme tokens for light and dark.
Device frame stackdevice-frame-stackThree device frames labelled mobile, app and docs that spring into a fanned, rotated stack when scrolled into view. Works as a hero or feature visual.
DockA macOS style dock for React: icons magnify under the pointer with spring physics and show a label. Real buttons or links, keyboard reachable and labelled.
Docs marketingdocs-marketingA React docs landing page with an animated headline, docs search, get started and API buttons, a table of contents and scroll revealed code and callouts.
Docs pagedocs-pageA Tailwind documentation page layout with a table of contents sidebar, prose with anchored headings, a copyable install command and an info callout.
Dot patterndot-patternA dot or grid background drawn as one SVG pattern, faded at the edges, with an optional accent glow that follows the pointer and lights the dots beneath it.
Email receiptemail-receiptA payment receipt email in a preview frame with a branded header, plan and tax line items, a bold total and a footer. A React starting point for billing mail.
Email welcomeemail-welcomeA React welcome email template in a preview frame with a branded header, intro copy, a call to action button, a quick start card and a standard footer.
Empty workspaceempty-workspaceAn empty workspace screen with a no projects empty state and new project action, plus follow up buttons to import from Git or invite teammates.
Engineering consoleengineering-consoleAn engineering console with an environment switcher, build pipeline, and tabs for commits, CI checks with coverage, a trace waterfall and code review.
Faq accordion motionfaq-accordion-motionAn FAQ accordion where one answer opens at a time with an animated height transition. Triggers expose aria-expanded and motion is skipped when reduced.
Faq sectionfaq-sectionAn FAQ section with a heading column and an accessible accordion: one answer open at a time, arrow key navigation, aria-expanded and smooth row animation.
Feature bento motionfeature-bento-motionA four cell Tailwind bento grid of feature cards that rise in with a stagger and lift slightly on hover, alternating wide and narrow tiles across rows.
Feature comparisonfeature-comparisonA free versus premium comparison table with check, dash or text cells whose rows fade in on scroll. Pass an array of rows to compare plan features.
Feature flagsfeature-flagsA feature flag settings list that pairs each flag key in monospace with a labelled switch. Drop it into admin or developer settings to toggle rollouts.
Filmstrip scrubfilmstrip-scrubA filmstrip scrubber with a preview area, a row of selectable frame buttons using aria-pressed, and a range slider to scrub through frames quickly.
Flickering gridflickering-gridA canvas grid of small squares whose brightness flickers at random behind your content, like a board of quiet signals.
Flip stat boardflip-stat-boardA stat board where each number counts up with digits that flip in on a spring once in view. Pass values and labels; reduced motion shows the final value.
Floating navfloating-navA sticky marketing navbar that tucks into a floating pill after you scroll, with a hover highlight that glides between links and an animated mobile menu.
Form wizardform-wizardA three step React form wizard with a stepper for basics, details and review, per step fields, and back and next buttons that become submit at the end.
Free premium comparefree-premium-compareA two column tier comparison with free and premium cards, feature checklists, price blurbs and CTAs, with the featured tier outlined in the accent color.
GlobeA dotted globe drawn on a plain canvas, no WebGL, that turns on its own and spins under your finger.
Gradient textgradient-textHeadline text filled with a slowly drifting gradient built from your accent tokens. A real text node for SEO and screen readers, still for reduced motion.
Grid revealgrid-revealA grid of labelled tiles that slide up in quick succession as the section scrolls into view. Pass any list of strings; it honors reduced motion.
Hero aurorahero-auroraA React hero with slow drifting aurora gradient blobs behind an eyebrow, headline, description and two action buttons that fade up in sequence.
Hero bentohero-bentoA Tailwind hero section with a large headline above a bento grid of product tiles for AI, billing, auth and admin that fade up with a stagger on load.
Hero client pitchhero-client-pitchA React pitch hero where headline words slide up from masks in sequence, followed by a lede, showcase and gallery buttons, and a row of proof stats.
Hero editorial splithero-editorial-splitA two column editorial hero in Tailwind with a masked two line headline and lede on the left and an animated device frame stack on the right.
Hero gradient meshhero-gradient-meshA dark hero on a layered radial gradient mesh with a scale in headline, supporting copy and high contrast launch and docs buttons for launch pages.
Hero kinetic typehero-kinetic-typeA kinetic type hero where each headline line slides up from a mask with staggered timing and the last line is accented. Pass your own lines and copy.
Hero marquee brandshero-marquee-brandsA hero headline above an endlessly scrolling marquee of brand names for social proof. The loop stops when reduced motion is requested by the user.
Hero poster typehero-poster-typeA poster scale typography hero in React whose three headline lines rise from masks in turn, with an eyebrow, supporting copy and a magnetic CTA.
Hero split showcasehero-split-showcaseA split hero with headline and copy on the left and a product card on the right whose bar chart grows into place on load. Suits launch and docs homes.
Hero spotlighthero-spotlightA launch hero with a pulsing eyebrow, blur-in headline with a cursor lit second line, two actions, a proof line and a product visual that tilts into place.
Hero typed headlinehero-typed-headlineA centered hero whose headline cycles through rotating words such as dashboards and AI apps with a slide transition. Rotation pauses for reduced motion.
Horizontal product railhorizontal-product-railA horizontally scrolling rail of tagged product cards that slide in and lift on hover. The rail is a focusable, labelled region for keyboard scrolling.
Hyper texthyper-textText that decodes itself: every character cycles through random glyphs and locks into place from left to right.
Icon cloudicon-cloudA sphere of icons that turns slowly in 3D, scales and fades with depth, and can be dragged to spin with inertia.
Inbox pageinbox-pageA Tailwind inbox panel listing messages with sender, preview line and timestamp, a New badge on unread items, and a mark all read action in the header.
Investor updateinvestor-updateAn investor update page with a gradient headline, flip counting stats, a highlights list, a product rail and a cursor spotlight panel for the ask.
Lamp effectlamp-effectA glowing strip light at the top of a dark panel that switches on and widens to light the headline beneath it.
Launch countdownlaunch-countdownA React launch countdown showing days, hours, minutes and seconds to a target time, with digits that slide in on each tick and a waitlist call to action.
Light fieldlight-fieldA WebGL shader background of drifting color silk with a soft cursor light and grain. It renders at half resolution, pauses offscreen and adapts to dark mode.
Live component raillive-component-railA rail of live component cards, including buttons, a badge, a switch and a destructive action, that rise into view with a quick stagger on scroll.
Logo wall motionlogo-wall-motionA logo wall that scrolls brand names in an endless marquee loop. Pass your own logos array; the motion stops for users who prefer reduced motion.
Logs viewerlogs-viewerA Tailwind log viewer with a filter input and a scrollable monospace list of timestamped entries tagged info, warn or error. Focusable for keyboard scroll.
Magnetic ctamagnetic-ctaA magnetic button that drifts toward the cursor on a spring and snaps back on leave. Takes all Button props plus a strength value; static for reduced motion.
Marketing landingmarketing-landingA complete Tailwind landing page assembled from a hero with two actions, a logo cloud, a stats strip, a three column feature grid and a closing CTA banner.
Marquee quotesmarquee-quotesTwo rows of testimonial quotes scrolling in opposite directions as looping React marquees. Pass quote and name pairs; motion stops for reduced motion.
Masked gradient headlinemasked-gradient-headlineA gradient text headline that wipes in from left to right with a clip path reveal when it scrolls into view. Accepts any children as the heading text.
Media librarymedia-libraryA Tailwind media library panel with an upload action and a two column grid of assets showing file name, size and a type badge for image, video, vector or doc.
MeteorsMeteor streaks with fading tails that fall diagonally behind your content at random intervals.
Metric ticker boardmetric-ticker-boardA four cell metric board where each number counts up from zero with an eased tween when it enters the viewport, with optional suffixes like plus or %.
Morph pricemorph-priceA price display with a monthly or yearly toggle where the old amount springs out and the new price springs in. A compact pricing interaction for plan cards.
Morphing textmorphing-textA headline that cycles through phrases by melting each one into the next with a blur and crossfade on two stacked layers.
Notification centernotification-centerA React notification center card with a settings action and a stack of notification items showing title, body, relative time and an unread marker.
Onboarding flowonboarding-flowA three step onboarding card for naming a workspace, inviting teammates by email and reviewing theme choices, with step progress and back or continue.
Onboarding motiononboarding-motionAn animated onboarding card with a clickable segmented step bar, content that slides between steps, back and continue buttons, and a final CTA.
Orbit logo clusterorbit-logo-clusterA cluster of logo chips orbiting a center badge in a slow continuous rotation, with labels counter rotating to stay upright. Pass center text and logos.
Orbiting circlesorbiting-circlesIcons orbit a central hub on hairline rings for integration sections. Set radius, speed and direction per ring; icons stay upright while they travel.
Parallax panelparallax-panelA panel where the heading text and a glowing accent orb move at different speeds as you scroll, giving scroll linked parallax depth with transforms only.
ParticlesA canvas particle field that drifts behind your content and parts around the pointer, or gathers toward it.
Pin scroll gallerypin-scroll-galleryA pinned horizontal scroll gallery: the section sticks while vertical scrolling slides frames sideways. Falls back to a three column grid for reduced motion.
Premium landingpremium-landingA React motion landing page combining an aurora hero, an animated feature row, three tier pricing cards that rise into view and a glowing closing CTA.
Pricing kineticpricing-kineticA pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.
Pricing motionpricing-motionPricing plan cards that fade up in sequence on scroll, each with name, price, blurb, feature bullets and a choose button, plus an accent featured plan.
Pricing pagepricing-pageA full Tailwind pricing page with a monthly or yearly toggle, animated plan cards, a feature comparison table, pricing FAQs, a glowing CTA and a mega footer.
Pricing planspricing-plansA React pricing section with a monthly or yearly switch that rolls prices to the new value, a featured ink plan, and feature rows marked included or not.
Product launchproduct-launchA product launch page with a scroll progress rail, kinetic hero, device stack, sticky feature story, before and after wipe, stats, countdown and waitlist.
Product os mockproduct-os-mockA mock product interface that auto cycles through inbox, pipeline and agents views with animated rows and progress bars. Click the sidebar to switch.
Product tourproduct-tourA React product tour with a clickable list of steps beside a detail panel that fades in for the active step, plus back and next buttons that stop at the ends.
Project detailproject-detailA project detail header in React with a back link, page title and description, and a description list for owner, stack, license and registry.
Project listproject-listA React projects list with a page header and new project button, and bordered rows that show each project name with an active or paused status badge.
Report builderreport-builderA React report builder layout with an export action, a date range picker and a chart card for the selected metrics. A base for custom reporting screens.
Retro gridretro-gridA retro perspective grid floor that recedes to a glowing horizon and scrolls slowly toward you.
RippleConcentric rings behind your content with a soft pulse that travels outward ring by ring, like a sonar ping.
Saas landingsaas-landingA full React SaaS landing template with an aurora hero, logo wall, counting stats, animated features, pricing cards, a testimonial carousel, FAQ and CTA.
Saas marketing pagesaas-marketing-pageA full SaaS marketing page stacking a kinetic pitch hero, moving logo wall, feature bento, free versus premium compare, testimonials and a magnetic CTA.
Scratch to revealscratch-to-revealA scratch card: a foil you rub away with the pointer or a finger to reveal what is underneath, which clears itself once enough is gone.
Scroll chapter storyscroll-chapter-storyA scroll story of three chapters that slide in as you scroll, with a sticky progress bar that fills with scroll position across the whole section.
Scroll progressscroll-progressReading progress as a thin bar that fills along the top edge and a ring with the percent inside, for the page or any scrollable element.
Scroll progress railscroll-progress-railA React reading progress bar that fills with page scroll on a spring, with section labels such as intro, product, proof and pricing shown beneath it.
Scroll revealscroll-revealA React wrapper that slides its children up into place once they scroll into view, with configurable offset and delay. Renders still for reduced motion.
Scroll storyscroll-storyA scrollytelling section: steps scroll on one side while a pinned visual swaps as each reaches mid screen and a progress rail fills. Inline on mobile.
Search results pagesearch-results-pageA search results panel with a query input, result count and a list of hits, each showing a monospace item name, a tier badge and a one line summary.
Settings pagesettings-pageA React settings page combining a profile form, theme picker, notification preferences and a danger zone for destructive actions under one header.
Shimmer buttonshimmer-buttonA React call to action with a slow band of light sweeping across it, a lit top edge and a press state. Ink or accent tone, renders as a button or a link.
Shine bordershine-borderA card whose border is a band of coloured light sweeping around it, masked to the border ring so the content is untouched.
Sign in pagesign-in-pageA centered Tailwind sign in page in an auth card with social login buttons, email and password fields, a full width submit and a sign up link in the footer.
Social proof wallsocial-proof-wallA testimonial wall with a logo marquee that pauses on hover and three columns of quote cards drifting at different speeds, with metric chips and edge fades.
Soft stacksoft-stackA stack of three offset cards that spring up into a layered, slightly scaled pile when scrolled into view. A compact depth visual for feature sections.
Sparkles textsparkles-textHeadline text with four point stars that twinkle around it in your accent colors. The sparkles are decorative and hidden; the text stays plain and readable.
Split proof panelsplit-proof-panelA two column proof section with a badge, pitch copy and checklist on one side, and key facts on gallery, registry and quality gates rising in on the other.
Stack reveal storystack-reveal-storyThree story cards that rise and overlap into a stack on wider screens as they scroll into view, falling back to a simple vertical list on mobile.
Stats counterstats-counterA single stat that counts up from zero to its value once it is in view, with a label below. Combine several in a row for landing page metrics.
Status marketingstatus-marketingA status marketing section with an incident banner, operational badge, gradient headline and uptime bars for showing off reliability on a public page.
Status pagestatus-pageA React system status panel with an overall outage badge and a list of services, each marked operational or degraded by a colored health indicator.
Sticky cta barsticky-cta-barA Tailwind floating CTA bar that slides up from the bottom once the page scrolls past 320px, with a title, a docs link and a magnetic get started button.
Sticky feature storysticky-feature-storyA sticky scroll section where the active step highlights as you scroll and a pinned preview swaps with a step counter. Pass your own steps as props.
Support inboxsupport-inboxA React support ticket inbox with search and compose actions and a list of threads showing ticket ID, subject, requester, status badge and SLA time left.
TerminalAn animated terminal window that types each command and prints its output line by line, with a blinking cursor and a replay button.
Testimonial carouseltestimonial-carouselA React testimonial carousel that auto advances every few seconds with slide transitions, dot indicators using aria-current, and prev and next buttons.
Text revealtext-revealA paragraph that lights up word by word as it scrolls through the viewport, from muted to full ink, using Motion scroll progress. Still text for reduced motion.
Text scrambletext-scrambleA text effect that scrambles random glyphs and resolves to the final string letter by letter when it scrolls into view. Its aria-label keeps the real text.
Tilt cardtilt-cardA card that tilts toward the pointer in 3D, with a sliding glare and parallax children, and springs flat when the pointer leaves.
Tracing beamtracing-beamA vertical beam beside long content that grows as you scroll, with a glowing tip and a node that lights for each entry.
Typing texttyping-textA React typewriter that types a phrase, holds, deletes and moves on, with a blinking accent caret. Starts in view and gives screen readers the plain text.
Typographic marqueetypographic-marqueeA large type Tailwind marquee that loops phrases horizontally in an endless scroll. Pass a phrases array; the loop stops for users who prefer reduced motion.
User detailuser-detailA Tailwind user detail header with a back link to users, an avatar beside the name in the title, a role and email line, and a team member row with role.
Users table pageusers-table-pageA React users admin page with an invite action, a search toolbar that filters rows as you type, and a data table with name, role and status badge columns.
Waitlist herowaitlist-heroA React waitlist hero with a pulsing background glow, an email input, a request access button with an onSubmit callback, and an avatar stack of signups.
Waveform herowaveform-heroA hero with an audio waveform of hairline bars that pulse in a staggered loop, a headline, copy and a magnetic CTA. Bars hold still for reduced motion.
Wavy backgroundwavy-backgroundLayered canvas waves that roll across the bottom of the panel behind your content, each at its own pace.
Word rotateword-rotateRotates words inside a sentence: the old word lifts and blurs away as the next rises in. The slot keeps the widest word's width so the line never jumps.
Workflow boardworkflow-boardA triage and approvals screen in Tailwind with an issue key, due date chip and priority picker, next to an approval card and a review queue card.