All Available components.

Add To Cart Button / Buttons — A single button that morphs through idle → loading → added, then settles back. The label slides vertically between states — no layout shift.

Analog Clock — Minimal / Clocks — Ticks and hands on a quiet face, nothing else. When you want the time to sit in the background without shouting over your UI.

Analog Clock — Numeric / Clocks — Arabic numerals and a live second hand on a clean analog dial. Readable from across the room, still far from a default system clock.

Analog Clock — Roman / Clocks — A live analog clock dressed in roman numerals — classic dial, real moving hands. Swap the variant prop to match the mood of your layout.

Annotated Text / Underlines — Hand-drawn text annotations — wavy underlines, highlights, arrows, brackets, and more. Pass variant and optional color to style any inline label or callout.

Apple Notification / Notifications — Frosted iOS notification with app name, sender, message, and avatar — dismisses with animation and can be triggered again via button.

Audio Recorder / Audio — Dark recording card with title, date, animated red waveform, and elapsed time. Play and pause feel like a native voice memo app.

Battery Face / Battery — Battery level as a character — arc ring, percentage, hours left, and a face that actually looks sad when you're running low.

Blob Profile / Profile — Profile card with an organic blob-shaped photo frame, name, verified check, and handle. Stands out from every circular-avatar layout on the web.

Bluetooth Face / Bluetooth — A teal mascot face that reacts when Bluetooth connects or drops. Toggle on/off with an expression change — playful, but still reads as a real status widget.

Booking Slot Calendar / Calender — Appointment booking flow — week strip on top, time slots below. Unavailable slots are crossed out, tap to book.

Bookmark Save Button / Buttons — Save for later — bookmark icon fills amber and label swaps to Saved. Square-ish control for articles and products.

Browser / Mockups — Desktop browser chrome with traffic lights and a URL bar framing your website screenshot. Pass theme for light, dark, or transparent chrome.

Calendar Reminder Notification / Notifications — Calendar reminder on the iOS grid — red app tile, event name, and time until it starts.

Chat Bubble Notification / Notifications — Messenger-style bubble — small avatar, sender name, rounded message bubble with a flat tail corner.

Cinema Ticket / Text — Split cinema ticket with film title, venue, screen, seats, show time, and a perforated stub. Dark ticket stock that feels printed, not flat.

Compass / Compass — A compass dial with labeled directions and a needle that follows device tilt. Pass a heading prop or let the browser handle orientation.

Copy Button / Buttons — Copies text to the clipboard and cross-fades the copy icon into a check with a Copied label. Monospace value, resets on its own.

Credit Card Glass / Users — Glassmorphism payment card with chip, masked number, holder name, and expiry. Glow on hover — fintech landing pages eat this up.

Customers Table / Table — SaaS customer list with plan, last active, and MRR. Common billing dashboard table.

Daily Activity Calendar / Calender — Month grid with a highlighted day — like a lightweight activity calendar without the GitHub heatmap complexity. Good for habit trackers and dashboards.

Daily Motivation / Text — Editorial poster with multi-line headline, flower icon, tilted polaroid, and a GOOD DAY sticker. Morning routine apps and wellness newsletters.

Date Range Picker / Calender — Travel-style date range picker — first tap sets check-in, second sets check-out, days between fill in.

Delivery Notification / Notifications — Shipping update — package icon, delivery status, ETA, and order number in a compact row.

Denim Product Editorial / Text — Fashion editorial with two square photos, rotated callout labels, and uppercase product description. Lookbook energy for apparel and accessories.

Deploy Notification / Notifications — Deploy alert on the iOS grid — Vercel triangle tile, short status line with project, branch, and duration.

Discord Chat / Discord — Dark Discord channel with server header, threaded messages, avatars, timestamps, and a send input. Community product mockups in one card.

Dnd Face / Activity — Focus mode as a purple moon mascot — tap to toggle DND and watch the expression shift. Makes a utilitarian setting feel a little human.

Download Button / Buttons — Download with a horizontal sky fill while the file loads, then a green done state. Different rhythm from the add-to-cart morph.

Drop Cap Editorial / Text — Editorial quote block with a large drop-cap letter, body text, and author attribution. Magazine typography without opening InDesign.

Editorial Quote / Text — Pull quote with issue metadata and a highlighted word inside the line — author and role at the bottom. Built for case studies and long reads.

Electric Scooter / Travel — Ride summary with scooter photo, distance, average speed, and duration. Leaf icon included — built for micro-mobility or fitness stats.

Email Notification / Notifications — Mail alert on the iOS grid — sender avatar, app name header, natural from: subject — preview body line.

Event Countdown Card / Calender — Live countdown to an event — days, hours, and minutes update every minute. Editorial typography, no ticker gimmicks.

Event Ticket / Event — Perforated event ticket with a cover-image date block and VIP pass details on the right. Concert, conference, or launch night — same component.

Facebook Post / Facebook — Facebook feed post with reactions, comments, share counts, optional image, and the full action bar. Familiar layout, your content.

File Menu / Dropdowns — Folder icon you can right-click or tap to open a centered action menu — edit, duplicate, pin, move, delete. Keyboard-friendly item hints included.

Film Strip / Gallery — Horizontal 35mm strip with sprocket holes and multiple frames. Roll label up top — great for photo galleries and vintage layouts.

Filter Sort / Dropdowns — Native select-style box — dropdown is flush below the trigger with matching width and a left-border active state.

Flight Arrival / Travel — Countdown to landing with departure and arrival airports and a plane moving along a progress bar. Built for travel dashboards and trip widgets.

Flight Boarding / Travel — Airline boarding pass with tear line, route codes, seat, gate, boarding time, and passenger name. Travel mockups that feel airport-real.

Focus Breath / Activity — A breathing guide that pulses between inhale and exhale every four seconds. One tap to start — useful in wellness or focus flows.

Follow Button / Buttons — Social follow toggle — dark Follow pill becomes a quiet Following state with a user-check icon. Tap again to unfollow.

Gallery Grid / Gallery — Album preview with title, subtitle, and a three-cell photo grid — last cell shows a +N overflow count. Portfolio and gallery index pages.

Github Contribution / Github — GitHub-style contribution heatmap with year selector, total count, and Less/More legend. Pulls real data when you pass a username.

Github Repo / Github — GitHub repo card with owner, description, language dot, star/fork counts, and a toggleable Star button. Open source landing pages, simplified.

Glass Overlay Image / Gallery — Full-bleed photo with frosted bottom panel — location, title, saved avatars, and Explore CTA. Like and share buttons float top-right.

Heart Rate / Activity — Heart rate in the DND face layout — mascot at the bottom, BPM above the dial, soft pulse on the ring.

Hold To Delete Button / Buttons — Press and hold as a fill sweeps across; release early to cancel, hold to the end to delete. Prevents accidental destructive taps.

Hydration / Activity — Tall bottle card — count at the top, water level rises inside a simple bottle outline. Tap to log a glass.

Incoming Call Notification / Notifications — Incoming call card — large avatar, caller name, FaceTime label, Accept and Decline buttons.

Instagram Post / Instagram — Full Instagram post layout — header, square image, action icons, like count, caption, and timestamp. Looks native, props for your content.

Ios Calender / Calender — Today's date in the classic iOS calendar tile — red weekday, big day number, month underneath. Updates live, no refresh needed.

Ios Digital Clock / Clocks — Live HH:MM in an iOS squircle with subtle tick marks around the edge. The kind of clock tile you'd find on a lock screen.

Ios Earbuds / Audio — AirPods-style widget showing device name and connection status. Small, familiar, and perfect beside other iOS-style controls.

Ios Map Location / Map-location — Map pin widget with your city name — simple location card in the iOS family. Good for travel apps, weather screens, or profile headers.

Journal Writing / Text — Journal card with title, date header, editable textarea, live word count, and saving status. The writing flow, not just a static textarea mockup.

Kebab Actions / Dropdowns — List row that expands inline — actions open inside the same card so widths always align.

Keyboard Shortcuts / Text — Shortcut reference card with rendered key caps and a ⌘K header hint. Docs pages and onboarding modals use this constantly.

Laptop / Mockups — MacBook Pro frame wrapping your screenshot — black lid and bezel with a gray outer frame and base. Pass variant="titanium" for a titanium outer frame and base.

Like Button / Buttons — Heart toggle that pops and scatters particles on the way up, with a live count. Pill fills rose when active — no glow, no gradient.

Linked In Post / Linkedin — LinkedIn feed post with headline, body text, link preview card, reaction counts, and like/comment/repost/send actions.

Linked In Profile / Linkedin — LinkedIn profile card with cover photo, avatar, headline, stats, bio, and Connect/Message buttons. Professional social, component-sized.

Magazine Cover / Text — Tall magazine cover with issue badge, category, title, author, and read time. Hover zoom on the cover image — editorial hero material.

Minimal Agenda / Travel — Today's tasks with times — tap a row to mark it done with a strikethrough and checkmark. Clean enough for a daily planner sidebar.

Month Picker Calendar / Calender — Full month picker with prev/next navigation — tap any day to select it, today gets a quiet ring.

Museum Placard / Gallery — Gallery exhibition label that flips to reveal curator notes and acquisition details. Art portfolios and culture sites love this interaction.

Music Player / Audio — Full dark player card with cover art, album info, progress scrubber with times, and transport controls. Not a bar — the whole now-playing screen.

Music Playlist / Audio — Playlist card with cover, header stats, and a track list where each row toggles play independently. One component, full playlist UI.

Notepad / Text — Sticky notepad with an italic quote, author line, and checkbox task list. Bookmark ribbon on top — good for editorial or productivity layouts.

Notification / Dropdowns — Square bell trigger with a gray inset tray — each notification is a small bordered card inside the panel.

Now Playing Bar / Audio — Compact dark player bar with artwork, track info, transport controls, and a scrubber. The footer bar every music app eventually needs.

Opensource Folder Tab Card / Folder — Folder tab card with black frame, top-half image, and dark panel showing library stats. Opensource App branding by default.

Orders Table / Table — E-commerce orders table — sort by date, total, or status. The standard admin dashboard orders view.

Payment Notification / Notifications — Payment received on the iOS grid — emerald tile, amount, and sender name.

Phone / Mockups — iPhone 15 Pro frame with Dynamic Island and a full-screen preview slot. Pass variant for purple, orange, white, titanium, or cherry finishes. Use visibleRatio to crop from the top, and showDynamicIsland to toggle the island and camera.

Photo Album / Gallery — Swipeable square photo carousel with place and date caption plus dot indicators. Swap in your own photos and tell a travel story.

Photo Contact Sheet / Gallery — Film contact sheet with a 2×2 numbered frame grid and roll label header. Photographer portfolio vibes, straight from the darkroom.

Polaroid Image / Gallery — Classic white polaroid with photo, caption, and date — slight tilt that straightens on hover. Nostalgic without feeling like a filter preset.

Pomodoro / Activity — Dark pomodoro timer — thin ring, split monospace time, tap to start or pause. Polished to match the DND card size and proportions.

Progress Ring / Others — Animated SVG ring with percentage label and clickable stage rows below. Defaults to Design/Development/Testing — pass your own milestones.

Quantity Stepper Button / Buttons — Inline minus / count / plus control for carts and forms. Clamps between min and max, disables at the edges.

Recent Transactions Table / Table — Stripe-style transaction list with positive and negative amounts and simple pagination.

Recorder Face / Audio — A quirky record button with a mascot face, circular dial, and live timer. Tap to start and pause — feels like a tiny dedicated recorder app.

Resource Links Panel / Resources — Resource link list with logo, name, description, and domain per row — same layout as the homepage Resources section. Copy and pass title + items.

Retail Price Tag / Pricing — Hanging store tag with discount badge, sale price, SKU, and barcode stripes. E-commerce editorial and product drops.

Ride Pickup / Travel — Uber-style pickup card with brand, ETA, car illustration, and vehicle ID. The waiting-screen moment, ready to paste into a mobility app.

Segmented Toggle Button / Buttons — iOS segmented control — sliding white pill between Day, Week, and Month. Pass your own options array for view modes or filters.

Share Menu / Dropdowns — Square icon trigger opens a horizontal brand rail — four social tiles in a row plus a full-width copy button.

Sleep Score / Activity — Sleep score in the DND face layout — sleeping mascot at the bottom, score and quality above, duration tucked below.

Slide To Confirm Button / Buttons — Drag the knob across the track to commit an action — snaps back if you release early, locks green when confirmed. Great for irreversible or high-intent actions.

Slow Living Polaroid / Gallery — Dark editorial layout with a taped, tilted polaroid and lowercase lifestyle copy. Slow living, coffee brands, quiet product launches.

Stacked Cards Effect / Others — Three skewed cards fanned behind a front hero card — hover brings subtle motion. Collection and portfolio layouts with depth, no Three.js required.

Stacked Folder Card / Files — Three stacked folder cards with thick white borders and smooth hover rotation — back and middle peeks bring any card to the front.

Stamp Postcard / Gallery — Vintage postcard with landscape photo, postage stamp overlay, handwritten message, and posted-from address. Travel and lifestyle brands love this one.

Step Count / Activity — Editorial step stat — light wide card, large number, goal in a quiet footer row. No progress bars or icons.

Stopwatch / Stopwatch — Millisecond-precision stopwatch with reset, play-pause, and stop in a compact white widget. Running state shown with a small indicator dot.

System Alert / Notifications — Settings-style iOS alert — amber app tile, title: description in one natural line. For storage, limits, and warnings.

Tasks Table / Table — Project tasks with checkboxes, assignee avatars, and due dates. Tap to mark complete.

Team Member / Users — Full-bleed portrait card — hover reveals GitHub and mail buttons, role, name, and bio. About pages without the generic card grid.

Team Members Table / Table — Team members with profile photos, email, role, and status. Uses /profile-picture.png and /woman.png avatars.

Terminal Log / Others — macOS terminal window with traffic-light dots, colored log lines, blinking cursor, and status footer. Dev tool aesthetic for changelogs or demos.

Testimonial / Users — Auto-advancing testimonial carousel with stars, quote, avatar, and dot navigation. Social proof that moves on its own.

Thermal Receipt / Others — Monospace receipt with line items, tax, total, perforated edges, and a QR footer. Reads like paper from a real register.

Threads Post / Facebook — Threads-style post with avatar thread line, text, optional image, and engagement counts. Like toggles on tap.

Toast Notification / Notifications — Light snackbar with check icon — message, undo action, slides up on dismiss. For save confirmations and quick feedback.

Toggle Pricing Cards / Pricing — Monthly and yearly billing toggle that updates three plan cards side by side — price and feature checklist included. SaaS pricing page, one paste away.

Torch Face / Torch — Yellow flashlight toggle with a face that lights up when the torch is on. Small detail, but the kind people notice on a control sheet.

Travel Postcard / Travel — Vintage sepia postcard with map badge, greeting title, location, and author signature. Wanderlust landing pages and newsletter headers.

Twitter Post / Twitter — Tweet card with avatar, handle, timestamp, hashtags, and full engagement row. For social embeds, mockups, or feed previews.

Twitter Profile / Twitter — Twitter/X profile with cover, avatar, bio, location, website link, and follower counts. Follow button included.

User Menu / Dropdowns — Account pill with avatar, name, and email that opens into profile, settings, messages, and sign out. The header dropdown every SaaS app needs, with keyboard shortcut labels.

Users Select Table / Table — Bulk-select users table with header checkbox and live selection count. Clean white admin pattern for permissions or exports.

Voice Assistant / Audio — Animated equalizer bars and a mic button that flip between idle and listening. Builds the voice-AI moment without building the whole assistant.

Wallet Pass / Wallet — Flippable membership pass — gradient front with tier and expiry, QR grid on the back. Tap or hover to flip between sides.

Week Strip Calendar / Calender — Horizontal week strip for booking and scheduling apps — arrow through weeks, tap a day to select.

Wifi Toggle / Wifi — The toggle you'd expect on an iPhone — network name, on/off switch, that familiar iOS weight. Drop it into any control panel or settings screen.

Workspace Switcher / Dropdowns — Rectangular org bar that expands inline — workspace list opens inside the same bordered box, not a floating panel.