Components / Docs
All Available components.
Explore 207 polished React and Next.js components, organized across 30 categories. Pick what you need, copy the code, and make it yours.
- A
Add to Cart / 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.
- A
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.
- A
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.
- A
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.
- A
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.
- A
App Dock / Docks — Bottom app launcher dock matching MacDock shell, spacing, and hover lift — with active state and optional labels.
- A
Apple Browser / Mockups — Desktop browser chrome with traffic lights and a URL bar framing your website screenshot. Pass theme for light, dark, or transparent chrome.
- A
Apple Hello Loader / Loaders — Apple-style greeting loader that cycles through hello, bonjour, hola, and more with a soft fade. Pass greetings, intervalMs, and fadeMs to tune the loop.
- A
Apple iPadNew / Mockups — iPad Air frame with metallic bezel, top-edge buttons, and a full-screen preview slot. Pass variant for space gray, space black, silver, starlight, blue, purple, pink, or yellow finishes. Use visibleRatio to crop from the top, and showCamera to toggle the front camera dot.
- A
Apple iPhone / 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.
- A
Apple iPodNew / Mockups — Classic iPod frame with a screen slot and click wheel — silver, black, white, pink, blue, green, or red finishes. Drop any UI into the screen area.
- A
Apple Macbook / 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.
- A
Apple Notification / Notifications — Frosted iOS notification with app name, sender, message, and avatar — dismisses with animation and can be triggered again via button.
- A
Apple WatchNew / Mockups — Apple Watch frame with sport band and a rounded display slot for your UI. Pass variant for black, silver, titanium, starlight, blue, gold, or rose finishes.
- A
Arc Bands / Background-gradient — Retro poster arcs with sky, teal, amber, and rose blending in soft radial gradients from the base — festivals, launches, and playful brand moments.
- A
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.
- A
Aurora Background / Background-gradient — Soft aurora wash with lime, mint, cyan, and blue blobs over a warm paper base — wrap any page section or hero and pass children on top.
- B
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.
- B
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.
- B
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.
- B
Booking Slot Calendar / Calender — Appointment booking flow — week strip on top, time slots below. Unavailable slots are crossed out, tap to book.
- B
Bookmark Save / Buttons — Save for later — bookmark icon fills amber and label swaps to Saved. Square-ish control for articles and products.
- C
Cafe Menu Board / Text — Dark chalkboard-style menu with cafe header, item notes, and amber price accents — hospitality and local brand sites.
- C
Calendar Reminder Notification / Notifications — Calendar reminder on the iOS grid — red app tile, event name, and time until it starts.
- C
Chat Bubble Notification / Notifications — Messenger-style bubble — small avatar, sender name, rounded message bubble with a flat tail corner.
- C
Checkbox Field Input / Inputs — Accessible checkbox with custom mark, inline label, hint, and error. Controlled or uncontrolled checked state.
- C
Cherry Petal / Background-gradient — Soft spring canvas with drifting cherry petals and a blush radial glow — weddings, florists, and seasonal campaigns.
- C
Cinder LatchNew / Buttons — Charcoal latch button with a warm ember under-glow, center groove, and face sheen — built for secure-action CTAs.
- C
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.
- C
Circle Cut Frame / Frames — Ticket-style frame with circle-cut edges on all sides — defaults to white; pass width, height, frameColor, and any image, video, or content as children.
- C
Combobox Field Input / Inputs — Searchable combobox with filtered listbox, keyboard navigation, click-outside close, and hidden field for form posts.
- C
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.
- C
Contact Form / Forms — Contact form with honeypot spam guard, character count, field validation, loading state, and success confirmation screen.
- C
Contact Profile / Profile — Museum placard contact directory — mono labels, serif name, and typographic rows without icon clutter.
- C
Copy to Clipboard / 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.
- C
Coral Glow / Background-gradient — Warm aurora wash in rose, peach, coral, and gold over a blush paper base — beauty, lifestyle, and invitation hero sections.
- C
Credit Card Glass / Users — Glassmorphism payment card with chip, masked number, holder name, and expiry. Glow on hover — fintech landing pages eat this up.
- C
Customers Table / Table — SaaS customer list with plan, last active, and MRR. Common billing dashboard table.
- D
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.
- D
Daily Motivation / Text — Editorial poster with multi-line headline, flower icon, tilted polaroid, and a GOOD DAY sticker. Morning routine apps and wellness newsletters.
- D
Dark Arc Bands / Background-gradient — Blended sky, teal, amber, and rose arcs on a midnight base — cinematic dark posters and event keynotes.
- D
Dark Aurora / Background-gradient — Charcoal stage with soft teal, cyan, and emerald aurora blooms — premium dark hero sections and product launches.
- D
Dark Carbon Spotlight / Background-gradient — Carbon black stage with a soft overhead spotlight and vignette — product reveals, keynotes, and gallery dark modes.
- D
Dark Ember / Background-gradient — Warm noir base with amber, ember orange, and rose glow pools — luxury dining, nightlife, and editorial dark modes.
- D
Dark Ink Field / Background-gradient — Near-black canvas with soft graphite ink washes — galleries, studios, and minimal dark editorial layouts.
- D
Dark Midnight Mesh / Background-gradient — Midnight frost mesh with whisper-soft grid, teal and sky blooms, and a gentle vignette — dashboards, terminals, and refined dark UI.
- D
Dark Rose Noir / Background-gradient — Elegant noir with restrained rose and crimson bloom accents — fashion, beauty, and premium dark branding.
- D
Dark Teal Depth / Background-gradient — Deep oceanic black with layered teal and cyan depth blooms — fintech, dev tools, and refined SaaS dark themes.
- D
Date Field Input / Inputs — Custom calendar popover with month navigation, today shortcut, min/max limits, and styled day grid — no native browser picker.
- D
Date Range Picker / Calender — Travel-style date range picker — first tap sets check-in, second sets check-out, days between fill in.
- D
Delivery Notification / Notifications — Shipping update — package icon, delivery status, ETA, and order number in a compact row.
- D
Denim Product Editorial / Text — Fashion editorial with two square photos, rotated callout labels, and uppercase product description. Lookbook energy for apparel and accessories.
- D
Deploy Notification / Notifications — Deploy alert on the iOS grid — Vercel triangle tile, short status line with project, branch, and duration.
- D
Depth Outline / 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.
- D
Diagonal Box / Background-pattern — Classic 45° hairline hatch on white — the same quiet stage used across marketing mockups and component previews.
- D
Dimple SwitchNew / Buttons — Tactile switch with a dimpled knob, metallic track, and amber on-state fill. Hidden checkbox drives the slide — controlled or uncontrolled.
- D
Discord Chat / Socials — Dark Discord channel with server header, threaded messages, avatars, timestamps, and a send input. Community product mockups in one card.
- D
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.
- D
Dot Grid / Background-pattern — Soft dotted grid on neutral paper — watch mockup stages, device demos, and minimal product sections.
- D
Download with States / 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.
- D
Drop Cap Editorial / Text — Editorial quote block with a large drop-cap letter, body text, and author attribution. Magazine typography without opening InDesign.
- E
Editor Tool Dock / Docks — Vertical editor tool dock using MacDock tile size, padding, and ease-smooth hover scale.
- E
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.
- E
Editorial Staff Profile / Profile — Numbered editorial roster row with serif name, uppercase role, and a square photo. Built for about pages and team indexes.
- E
Electric Scooter / Widgets — Ride summary with scooter photo, distance, average speed, and duration. Leaf icon included — built for micro-mobility or fitness stats.
- E
Email Notification / Notifications — Mail alert on the iOS grid — sender avatar, app name header, natural from: subject — preview body line.
- E
Event Countdown Card / Calender — Live countdown to an event — days, hours, and minutes update every minute. Editorial typography, no ticker gimmicks.
- E
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.
- F
Facebook Post / Socials — Facebook feed post with reactions, comments, share counts, optional image, and the full action bar. Familiar layout, your content.
- F
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.
- F
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.
- F
Film Strip / Gallery — Horizontal 35mm strip with sprocket holes and multiple frames. Roll label up top — great for photo galleries and vintage layouts.
- F
Filter Sort / Dropdowns — Native select-style box — dropdown is flush below the trigger with matching width and a left-border active state.
- F
Fine Grain / Background-pattern — Micro dot grain for a film-paper feel — hero backgrounds that need texture without competing with content.
- F
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.
- F
Flight Boarding / Travel — Airline boarding pass with tear line, route codes, seat, gate, boarding time, and passenger name. Travel mockups that feel airport-real.
- F
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.
- F
Floating Pill / Buttons — Floating rounded pill with a soft drop shadow — light or dark. Pass any children. Nudges down slightly on press.
- F
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.
- F
Follow Toggle / Buttons — Social follow toggle — dark Follow pill becomes a quiet Following state with a user-check icon. Tap again to unfollow.
- F
Forgot Password Form / Forms — Password reset request form with email validation, loading state, success screen, and back-to-login navigation.
- F
Frost Mesh / Background-gradient — Cool frost-white mesh with teal and emerald corner washes — SaaS dashboards, health apps, and minimal product launches.
- G
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.
- G
Gallery Wall / Gallery — Gallery wall mat with cream matting, artwork preview, and caption block — clean exhibition styling.
- G
Github Contribution / Socials — GitHub-style contribution heatmap with year selector, total count, and Less/More legend. Pulls real data when you pass a username.
- G
Github Repo / Socials — GitHub repo card with owner, description, language dot, star/fork counts, and a toggleable Star button. Open source landing pages, simplified.
- G
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.
- G
Graph Paper / Background-pattern — Clean square grid for sketches, wireframes, and planning boards — subtle ink lines on white.
- H
Halftone Pop / Background-gradient — Risograph-style halftone dots in rose, teal, and amber on cream — posters, zines, and bold creative brands.
- H
Hard Shadow Polaroid Frame / Frames — Polaroid frame with a crisp inner border, thick caption chin, and hard offset shadow — pass caption and any image or video as children.
- H
Heart Rate / Widgets — Heart rate in the DND face layout — mascot at the bottom, BPM above the dial, soft pulse on the ring.
- H
Hold to Delete / Buttons — Press and hold as a fill sweeps across; release early to cancel, hold to the end to delete. Prevents accidental destructive taps.
- H
Honey Ember / Background-gradient — Cozy aurora glow in honey, amber, ember orange, and soft rose over warm ivory — food, bakery, and autumn campaigns.
- H
Hydration / Widgets — Tall bottle card — count at the top, water level rises inside a simple bottle outline. Tap to log a glass.
- I
Incoming Call Notification / Notifications — Incoming call card — large avatar, caller name, FaceTime label, Accept and Decline buttons.
- I
Ink Stamp Document / Files — Paper filing card with reference metadata and a rotated approval stamp — contracts, invoices, and admin dashboards.
- I
Ink Wash / Background-gradient — Minimal sumi-e ink clouds in soft stone gray on warm paper — galleries, studios, and calm editorial layouts.
- I
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.
- I
Instagram Post / Socials — Full Instagram post layout — header, square image, action icons, like count, caption, and timestamp. Looks native, props for your content.
- I
Ios Calender / Widgets — Today's date in the classic iOS calendar tile — red weekday, big day number, month underneath. Updates live, no refresh needed.
- I
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.
- I
Ios Earbuds / Widgets — AirPods-style widget showing device name and connection status. Small, familiar, and perfect beside other iOS-style controls.
- I
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.
- J
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.
- K
Kebab Actions / Dropdowns — List row that expands inline — actions open inside the same card so widths always align.
- K
Keyboard Shortcuts / Text — Shortcut reference card with rendered key caps and a ⌘K header hint. Docs pages and onboarding modals use this constantly.
- L
Like Toggle / 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.
- L
Line Grid / Background-pattern — Horizontal ruled lines with a soft paper gradient — editorial layouts, docs, and notebook-style sections.
- L
Linen Tab / Buttons — Woven linen tab with dashed stitch borders and a soft fold sheen — warm, editorial, and understated.
- L
Linen Weave / Background-gradient — Warm editorial linen with crosshatch weave, soft paper grain, and a gentle vignette — portfolios, magazines, and craft-brand pages.
- L
Linked In Post / Socials — LinkedIn feed post with headline, body text, link preview card, reaction counts, and like/comment/repost/send actions.
- L
Linked In Profile / Socials — LinkedIn profile card with cover photo, avatar, headline, stats, bio, and Connect/Message buttons. Professional social, component-sized.
- L
Login Form / Forms — Production login form with email/password validation, remember me, show password, loading state, and forgot-password link.
- M
Mac Dock / Docks — Frosted macOS-style app dock with smooth hover lift, tooltips, and brand icons — Tailwind-only, no motion library.
- M
Magazine Cover / Text — Tall magazine cover with issue badge, category, title, author, and read time. Hover zoom on the cover image — editorial hero material.
- M
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.
- M
Mint Lagoon / Background-gradient — Cool aurora wash in emerald, teal, cyan, and mint over a fresh white base — wellness, spa, and clean product launches.
- M
Month Picker Calendar / Calender — Full month picker with prev/next navigation — tap any day to select it, today gets a quiet ring.
- M
Museum Placard / Gallery — Gallery exhibition label that flips to reveal curator notes and acquisition details. Art portfolios and culture sites love this interaction.
- M
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.
- M
Music Playlist / Audio — Playlist card with cover, header stats, and a track list where each row toggles play independently. One component, full playlist UI.
- N
Neumorphic Soft UI / Buttons — Universal soft-UI / neumorphic button — even light and dark shadows. Pass any children. Press flips to an inset look.
- N
Newsletter Form / Forms — Email subscribe form with inline button, validation, privacy note, and inline success message — built for footers and landing pages.
- N
Notepad / Text — Sticky notepad with an italic quote, author line, and checkbox task list. Bookmark ribbon on top — good for editorial or productivity layouts.
- N
Notification / Dropdowns — Square bell trigger with a gray inset tray — each notification is a small bordered card inside the panel.
- N
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.
- O
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.
- O
Orders Table / Table — E-commerce orders table — sort by date, total, or status. The standard admin dashboard orders view.
- O
Otp Boxed Input / Otp — Full email verification card with icon header, destination text, animated square cells, progress dots, shake-on-error, and resend countdown.
- O
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.
- P
Paper Fold / Background-gradient — Tactile cardstock with a diagonal crease, soft highlight, and shadow — invitations, stationery, and craft portfolios.
- P
Password Field Input / Inputs — Password input with show/hide toggle, hint text, and error state. Keeps autocomplete defaults and accessible visibility control.
- P
Payment Notification / Notifications — Payment received on the iOS grid — emerald tile, amount, and sender name.
- P
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.
- P
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.
- P
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.
- P
Polaroid Image / Gallery — Classic white polaroid with photo, caption, and date — slight tilt that straightens on hover. Nostalgic without feeling like a filter preset.
- P
Pomodoro / Widgets — Dark pomodoro timer — thin ring, split monospace time, tap to start or pause. Polished to match the DND card size and proportions.
- P
Presence Dock / Docks — Collaborator presence dock with MacDock-sized avatar tiles and expandable member list.
- P
Prism Depth / Buttons — Dark depth button with a cyan edge flare, rim glow, and layered core veil — pass any label as children.
- P
Progress Ring / Others — Animated SVG ring with percentage label and clickable stage rows below. Defaults to Design/Development/Testing — pass your own milestones.
- Q
Quantity Stepper / Buttons — Inline minus / count / plus control for carts and forms. Clamps between min and max, disables at the edges.
- R
Radio Group Field Input / Inputs — Card-style radio group for checkout and settings flows. Vertical or horizontal layout, descriptions, and arrow-key navigation.
- R
Rain Prism / Background-gradient — Moody rainfall with angled streaks and a soft prism band across the scene — music, film, and reflective editorial layouts.
- R
Recent Transactions Table / Table — Stripe-style transaction list with positive and negative amounts and simple pagination.
- R
Recessed Inset / Buttons — Recessed inset button — looks pressed into the surface. Light or dark variant. Pass any children.
- R
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.
- R
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.
- R
Retail Price Tag / Pricing — Hanging store tag with discount badge, sale price, SKU, and barcode stripes. E-commerce editorial and product drops.
- R
Reverse Diagonal Box / Background-pattern — Mirrored 45° hairline hatch — same quiet stage as Diagonal Box, rotated right to left for visual variety.
- R
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.
- S
Sand Drift / Background-gradient — Layered desert dunes in stone and amber tones with fine grain — travel, hospitality, and calm wellness layouts.
- S
Search Input / Inputs — Search field with leading icon and clear button. Controlled or uncontrolled value, hidden native cancel, and keyboard-friendly reset.
- S
Segmented Control / Buttons — iOS segmented control — sliding white pill between Day, Week, and Month. Pass your own options array for view modes or filters.
- S
Select Field Input / Inputs — Custom listbox select with styled dropdown, keyboard navigation, click-outside close, and hidden input for native form posts.
- S
Share Menu / Dropdowns — Square icon trigger opens a horizontal brand rail — four social tiles in a row plus a full-width copy button.
- S
Sheen Pill / Buttons — Frosted pill with layered shade veil, light band, and rim wire — hover brightens the sheen and clears the fill. Pass width, height, and highlight to tune the frame.
- S
Signup Form / Forms — Registration form with name, email, password strength rules, confirm password match, and required terms acceptance.
- S
Slate Chip Switch / Buttons — Smooth pill chip switch with a white thumb and sky on-state fill — a cleaner alternative to textured toggles.
- S
Sleep Score / Widgets — Sleep score in the DND face layout — sleeping mascot at the bottom, score and quality above, duration tucked below.
- S
Slide to Confirm / 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.
- S
Slow Living Polaroid / Gallery — Dark editorial layout with a taped, tilted polaroid and lowercase lifestyle copy. Slow living, coffee brands, quiet product launches.
- S
Soft Spotlight / Background-gradient — Gallery stage light from above with a gentle vignette — product reveals, keynote heroes, and museum-style layouts.
- S
Spin Loader / Loaders — Minimal spinning loader built on a lucide icon — defaults to Loader, but pass any icon prop. Sizes: sm, md, lg.
- S
Spotlight Bar / Docks — Spotlight-style command search in the frosted dock shell — keyboard nav and suggestions.
- S
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.
- S
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.
- S
Stamp Postcard / Gallery — Vintage postcard with landscape photo, postage stamp overlay, handwritten message, and posted-from address. Travel and lifestyle brands love this one.
- S
Step Count / Widgets — Editorial step stat — light wide card, large number, goal in a quiet footer row. No progress bars or icons.
- S
Sticky Note Polaroid Frame / Frames — Polaroid-style frame with a paper-clipped sticky note overlay — pass noteHeader, noteBody, noteFooter, and any image or video as children.
- S
Stopwatch / Widgets — Millisecond-precision stopwatch with reset, play-pause, and stop in a compact white widget. Running state shown with a small indicator dot.
- S
Sunrise Horizon / Background-gradient — Warm dawn sky with peach horizon bands, a soft sun glow, and cool teal lift at the base — editorial hero sections and landing pages.
- S
Sunset Bloom / Background-gradient — Golden-hour aurora with orange, rose, amber, and sun yellow blooms — events, photography, and warm brand storytelling.
- S
Switch Field Input / Inputs — Toggle switch with role=switch, keyboard support, hidden input for forms, and label/hint/error layout.
- S
System Alert / Notifications — Settings-style iOS alert — amber app tile, title: description in one natural line. For storage, limits, and warnings.
- T
Tactile 3D / 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.
- T
Tactile 3D Icon / Buttons — Square 3D icon button — pass any icon as children and a required label for accessibility. Same solid / soft / muted materials as ThreeDButton.
- T
Tasks Table / Table — Project tasks with checkboxes, assignee avatars, and due dates. Tap to mark complete.
- T
Team Member / Users — Full-bleed portrait card — hover reveals GitHub and mail buttons, role, name, and bio. About pages without the generic card grid.
- T
Team Member Profile Grid / Profile — Responsive team grid with vertical portrait cards — section header plus name, role, bio, and profile link per member.
- T
Team Members Table / Table — Team members with profile photos, email, role, and status. Uses /profile-picture.png and /woman.png avatars.
- T
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.
- T
Terrazzo Fragment / Background-gradient — Stone terrazzo base with scattered rose, teal, amber, and clay fragments — interior brands, cafés, and design studios.
- T
Testimonial / Users — Auto-advancing testimonial carousel with stars, quote, avatar, and dot navigation. Social proof that moves on its own.
- T
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.
- T
Text Loader / Loaders — Animated text loader with a spinning color orb and staggered letter pulses. Pass text, variant, and textColor to match your UI.
- T
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.
- T
Thermal Receipt / Others — Monospace receipt with line items, tax, total, perforated edges, and a QR footer. Reads like paper from a real register.
- T
Threads Post / Socials — Threads-style post with avatar thread line, text, optional image, and engagement counts. Like toggles on tap.
- T
Toast Notification / Notifications — Light snackbar with check icon — message, undo action, slides up on dismiss. For save confirmations and quick feedback.
- T
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.
- T
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.
- T
Transform Box Frame / Frames — Design-tool bounding box with separate line and handle colors — defaults to all black; pass lineColor and handleColor for dual-tone frames.
- T
Transform Plus Frame / Frames — Bounding box with plus corner handles — thicker handle strokes than border lines. Defaults to all black; pass lineColor and handleColor for dual-tone frames.
- T
Travel Postcard / Travel — Vintage sepia postcard with map badge, greeting title, location, and author signature. Wanderlust landing pages and newsletter headers.
- T
Tropical Tide / Background-gradient — Vibrant aurora wash in turquoise, lime, sky blue, and sea green — travel, resorts, and summer product drops.
- T
Twitter Post / Socials — Tweet card with avatar, handle, timestamp, hashtags, and full engagement row. For social embeds, mockups, or feed previews.
- T
Twitter Profile / Socials — Twitter/X profile with cover, avatar, bio, location, website link, and follower counts. Follow button included.
- U
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.
- U
User Profile / Profile — Author byline on warm editorial paper — square portrait, serif name, and text links. Built for personal sites and portfolio sidebars.
- U
Users Select Table / Table — Bulk-select users table with header checkbox and live selection count. Clean white admin pattern for permissions or exports.
- V
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.
- W
Wallet Pass / Wallet — Flippable membership pass — gradient front with tier and expiry, QR grid on the back. Tap or hover to flip between sides.
- W
Weather Snapshot / Others — Compact weather card with temperature, highs/lows, humidity, and wind — clear or rain variants.
- W
Week Strip Calendar / Calender — Horizontal week strip for booking and scheduling apps — arrow through weeks, tap a day to select.
- W
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.
- W
Workspace Switcher / Dropdowns — Rectangular org bar that expands inline — workspace list opens inside the same bordered box, not a floating panel.