All Available components.

3D Button / Buttons — Universal 3D button with tactile keycap shadows — pass any children (label, icon + label). Variants: solid, soft, muted. Sizes: sm, md, lg, icon. Press sinks the key in.

3D Icon Button / Buttons — Square 3D icon button — pass any icon as children and a required label for accessibility. Same solid / soft / muted materials as ThreeDButton.

Add To Cart Button / Buttons — Raised 3D add-to-cart key that sinks in while adding, with gentle label crossfades, then pops back up in a solid emerald added state before resetting.

Analog Clock — Minimal / Widgets — 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 / Widgets — 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 / Widgets — 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.

App Dock / Docks — Bottom app launcher dock matching MacDock shell, spacing, and hover lift — with active state and optional labels.

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 / Widgets — Dark recording card with title, date, animated red waveform, and elapsed time. Play and pause feel like a native voice memo app.

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

Blob Profile / Widgets — 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 / Widgets — 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.

Checkbox Field Input / Inputs — Accessible checkbox with custom mark, inline label, hint, and error. Controlled or uncontrolled checked state.

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.

Combobox Field Input / Inputs — Searchable combobox with filtered listbox, keyboard navigation, click-outside close, and hidden field for form posts.

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

Contact Form / Forms — Contact form with honeypot spam guard, character count, field validation, loading state, and success confirmation screen.

Contact Profile / Profile — Museum placard contact directory — mono labels, serif name, and typographic rows without icon clutter.

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 / Widgets — Month grid for the current month — today is highlighted in orange, with a short emerald streak on prior days. Pass activeDays or highlightDay to override.

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 Field Input / Inputs — Custom calendar popover with month navigation, today shortcut, min/max limits, and styled day grid — no native browser picker.

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.

Depth Outline Button / Buttons — Premium outline button with layered float depth, a soft top lip, and a press-in sink — secondary CTA that still feels tactile. Pass any children.

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

Dnd Face / Widgets — 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 — Raised 3D download key that sinks while downloading — arrow morphs to spinner to check — then pops back up as a solid emerald done state.

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

Editor Tool Dock / Docks — Vertical editor tool dock using MacDock tile size, padding, and ease-smooth hover scale.

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.

Editorial Staff Profile / Profile — Numbered editorial roster row with serif name, uppercase role, and a square photo. Built for about pages and team indexes.

Electric Scooter / Widgets — 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 / Socials — 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.

File Upload Field Input / Inputs — Card-style file upload with drag-and-drop zone, browse button, format/size hints, typed file rows, and remove actions.

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 / Widgets — 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.

Floating Label Field Input / Inputs — Outlined floating label that rests on the border notch when focused or filled — matches Material-style fields with autofill detection.

Focus Breath / Widgets — 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.

Forgot Password Form / Forms — Password reset request form with email validation, loading state, success screen, and back-to-login navigation.

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 / Socials — GitHub-style contribution heatmap with year selector, total count, and Less/More legend. Pulls real data when you pass a username.

Github Repo / Socials — 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 / Widgets — 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 / Widgets — 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.

Input Group Field / Inputs — Grouped input with prefix and suffix slots — URLs, currency, units. Wrapper border highlights on focus; inputs use border-only focus with ring-0.

Inset Button / Buttons — Recessed inset button — looks pressed into the surface. Light or dark variant. Pass any children.

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

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

Ios Digital Clock / Widgets — 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 / Widgets — AirPods-style widget showing device name and connection status. Small, familiar, and perfect beside other iOS-style controls.

Ios Map Location / Widgets — 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 / Socials — LinkedIn feed post with headline, body text, link preview card, reaction counts, and like/comment/repost/send actions.

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

Login Form / Forms — Production login form with email/password validation, remember me, show password, loading state, and forgot-password link.

Mac Dock / Docks — Frosted macOS-style app dock with smooth hover lift, tooltips, and brand icons — Tailwind-only, no motion library.

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 / Widgets — 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.

Newsletter Form / Forms — Email subscribe form with inline button, validation, privacy note, and inline success message — built for footers and landing pages.

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.

Otp Boxed Input / Otp — Full email verification card with icon header, destination text, animated square cells, progress dots, shake-on-error, and resend countdown.

Otp Underline Input / Otp — Editorial underline OTP with serif heading and animated focus rules. Same edge-case handling as boxed — typing, delete, paste, and one-time-code autocomplete.

Password Field Input / Inputs — Password input with show/hide toggle, hint text, and error state. Keeps autocomplete defaults and accessible visibility control.

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.

Phone Field Input / Inputs — Phone field with dial-code prefix and live US-style formatting. Returns raw digits via onChange for validation and API calls.

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 / Widgets — Dark pomodoro timer — thin ring, split monospace time, tap to start or pause. Polished to match the DND card size and proportions.

Presence Dock / Docks — Collaborator presence dock with MacDock-sized avatar tiles and expandable member list.

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.

Radio Group Field Input / Inputs — Card-style radio group for checkout and settings flows. Vertical or horizontal layout, descriptions, and arrow-key navigation.

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

Recorder Face / Widgets — 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 / Widgets — Uber-style pickup card with brand, ETA, car illustration, and vehicle ID. The waiting-screen moment, ready to paste into a mobility app.

Search Input / Inputs — Search field with leading icon and clear button. Controlled or uncontrolled value, hidden native cancel, and keyboard-friendly reset.

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.

Select Field Input / Inputs — Custom listbox select with styled dropdown, keyboard navigation, click-outside close, and hidden input for native form posts.

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

Signup Form / Forms — Registration form with name, email, password strength rules, confirm password match, and required terms acceptance.

Sleep Score / Widgets — 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.

Soft Pill Button / Buttons — Floating rounded pill with a soft drop shadow — light or dark. Pass any children. Nudges down slightly on press.

Soft UI Button / Buttons — Universal soft-UI / neumorphic button — even light and dark shadows. Pass any children. Press flips to an inset look.

Spotlight Bar / Docks — Spotlight-style command search in the frosted dock shell — keyboard nav and suggestions.

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 / Widgets — Editorial step stat — light wide card, large number, goal in a quiet footer row. No progress bars or icons.

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

Switch Field Input / Inputs — Toggle switch with role=switch, keyboard support, hidden input for forms, and label/hint/error layout.

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 Member Profile Grid / Profile — Responsive team grid with vertical portrait cards — section header plus name, role, bio, and profile link per member.

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.

Text Field Input / Inputs — Standard labeled text field with hint and error states. Supports all native input types, required marker, disabled, and full a11y wiring.

Textarea Field Input / Inputs — Multiline field with live character count, max length guard, resize support, and the same label/hint/error pattern as text fields.

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 / Socials — 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 / Widgets — 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 / Socials — Tweet card with avatar, handle, timestamp, hashtags, and full engagement row. For social embeds, mockups, or feed previews.

Twitter Profile / Socials — 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.

User Profile / Profile — Author byline on warm editorial paper — square portrait, serif name, and text links. Built for personal sites and portfolio sidebars.

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 / Widgets — 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 / Widgets — 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.