Components

Interactive arena seating chart matrix grid with row letters, seat numbers, tier types, and price calculator.

Numeric PIN keypad with tactile mechanical keys, visual pulse, and masked PIN display.

Complete admission ticket with notched edges and seat details.

Discount coupon with scissor cutout lines and promo code copy.

Flight pass with origin, destination and receipt section.

Price tag with eyelet string hole and sale mark.

Baggage claim tag with handle loop and destination code.

Dynamic SVG barcode with mono serial readout.

Rotated rubber stamp badge with double dashed circular ring.

Contactless gate pass tap simulator with animated radio wave ripple pulse, status badge, lanyard notch, and admission chime.

Turnstile simulated camera QR and barcode scanner viewfinder with animated laser sweep and targeting reticle.

3D accordion fold pass that unfolds with smooth perspective rotation and tear-away slip.

Mechanical departure board with flipping characters and retro terminal styling.

Repeating watermark pattern with security angle.

Mechanical rotor barrier with pass counter, status LED, and push animation.

Two-team score card with rolling digit animation

Loyalty punch card with stamped circles and reward row.

Employee ID card with hologram shine sweep and barcode.

Take-a-number queue ticket with a big tear-off number tab, NOW SERVING ring and queue stats.

Double-frame passport cover with monogram, holder fields and staggered visa stamp marks.

Circular wax blob with a pressed-in monogram entrance and an optional cracked break state.

Envelope whose flap opens with a 3D rotateX and the letter inside rises, on hover or via an open prop.

Airmail bordered letter with red/blue diagonal stripes, mono lines, a postmark corner and an unfold entrance.

Circular postal cancellation stamp with wavy lines, city and date arcs that stamps in on mount.

Cassette with two spinning reels, shifting tape amounts and a handwritten-style label with play toggle.

Spinning vinyl with radial grooves, center label, a tonearm that slides in and a wobble on drop.

Mechanical split-flap HH:MM clock whose digit cards flip on change with a blinking colon.

Neon sign with layered glow text-shadow, flicker-in entrance and a subtle per-letter buzz.

Marquee board framed by chase-blinking bulbs with scrolling center text.

Laminated ALL ACCESS pass with lanyard hole, rotated stripe strip, shine sweep on hover and fake barcode.

Festival wristband with patterned repeating stripes, snap closure, serial and a subtle breathing animation.

Strap with clip that sways gently from the top and holds an attached card slot for children.

Rip-off event stub whose tear line detaches the stub with rotate-and-fall on tear, plus serial and barcode.

Generates QR codes with Reed-Solomon error correction, mask evaluation, and finder patterns. Includes encodeQrMatrix helper.

Ticket validator device with blinking green/red result light.

Punch clock with live digital time and in/out stamp feed.

Mailbox with flag raise and letter send animation.

Medal board with gold/silver/bronze tiers and shine sweep.

Trophy shelf with earned/empty slots and drop-in animation.

Award rosette badge ribbon with swallow-tail streamers and certified stamp.

Thermal badge printer with feed-out animation.

Digital LED chronometer with laps.

Consulate stamp showcase for achievements.

Date-stamped return tracker card.

Two-part perforated claim coupon.

Sealed ornate certificate card.

Mechanical flap departure panel.

Scratch-to-reveal coupon card.

Photo ID card with MRZ strip.

Numbered early-access queue ticket.

Live purchase notification toast.

Tracking label with barcode and fragile stamp.

Route boarding card with delay stamp.

Plate countdown stub with expiry.

Draggable deck with keyboard reorder.

Winter card with falling snow.

Autumn harvest greeting card.

Animated button with hover feedback and crisp focus.

Text input with dashed focus border and design tokens.

Multi-line text area matching Input styling.

Crisp checkbox with bold checked states.

Two-state toggle switch with sliding thumb.

Accessible single-select radio button set.

Draggable value slider with chunky thumb.

Increment and decrement buttons with mono readout.

Interactive star rating with live hover preview.

Tactile button with clipboard feedback and check state.

Dashed search field with shortcut keycap and clear action.

Segmented security verification meter with animated strength bars and criteria checklist.

Click-to-edit field with focus outline, animated save pulse, and cancel action.

Price range selector with minimum and maximum draggable handles.

Mechanical multi-option lever switch with smooth slide carriage.

Single-choice segmented control with roving tabindex.

Form label with mono uppercase styling and an animated stamp-red asterisk when required.

Field wrapper with label, control, description, and error message with a shake-in animation on error.

Composable field primitives: Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldGroup, FieldSet.

Two-state button with aria-pressed, springy press animation, and default/outline/accent variants.

Input with prefix icon slot, suffix slot, and inner action button; dashed focus ring and animated underline sweep.

Joins buttons with rounded outer corners, internal separators, and sliding hover highlight.

Button with loading spinner swap, width locking to avoid jumps, and a brief success check-mark stamp.

Checkbox options with a select-all row (indeterminate state), animated check fills, and staggered entrance.

Floating action button fixed in corner with hover growth, ripple press, and tooltip label on hover.

Heart wishlist button with pop fill and floating burst.

Add-to-cart button with flying dot arc and check stamp.

Heart/thumb button that fills on click with burst particle animation and count increment.

Small mono chip that copies to clipboard with check morph and 'COPIED' feedback

Email input with live validation and typo domain suggestions

Slider with tick marks, labels, and snap-to-ticks functionality

SSR-safe React hooks: media query, localStorage, intersection, click-outside, copy, hotkey, and debounce.

Pure TypeScript focus trapping helpers for accessible overlays: getFocusable and trapFocus.

Login form with live validation, show/hide password, remember me and social buttons.

Registration form with name, email, animated password strength and terms consent.

Password reset flow: email input transitions to animated sent confirmation.

Form completion progress with segmented dashed bars.

Vertical/horizontal stepper v2 with descriptions and done states.

Combined search, sort and filter toolbar with animated chips.

Shipping option radio cards with carrier, duration and price.

Payment method selector with card, bank, cash, wallet icons.

Credit card form with live number formatting and expiry mask.

Installment plan picker: months, monthly amount, total.

Coupon code field with validation, success check and shake error.

Card-style checkbox with title, description and check pop.

Radio tile with icon, description and sliding dot.

Switch card combining title, description and toggle.

Auto-growing textarea with min/max height bounds.

Character counter with near-limit and over-limit states.

Password input with animated show/hide eye toggle.

GDPR/KVKK consent checkbox with link and required marker.

Address form grid: street, city, district, postal, country.

Rich selectable radio cards with prices, perks and active ticket border.

Dual-action button with primary click trigger and dropdown secondary actions.

Async searchable combobox with debounced loading and infinite scroll.

Grouped select with sticky headers and disabled options.

Six-box one-time code with paste split and autocomplete.

Schema-less validation hooks with rules and helpers.

Language picker with native names and codes.

IANA timezone picker with live UTC offsets.

Stepped numeric input with locale grouping and currency.

Inline search field with keyboard-navigated result panel.

Dual-handle range slider with live min/max labels.

Image dropzone with thumbnail grid and remove.

Country-aware phone mask with completion counter.

Combined date and time picker with live preview.

Month grid with range highlight and night counter.

Chips flow inside the input with backspace delete.

Printable signature line with typed name.

Approval stamp box with name, date and seal.

Smart card input with brand detect and grouping.

GitHub-style contribution heatmap grid.

Shortcut search bar with filter and history.

Hoverable five-star rating field with readout.

Preset palette swatches with hex readout.

Seat slider with live tier cost math.

3D flipping bank card with CVC back.

Bill splitter with tip and per-person math.

Passwordless sign in trigger.

Email field with sent confirmation.

Provider buttons with or divider.

Session rows with revoke action.

Two-step typed confirmation zone.

Stampable steps with progress rail.

Email plus role picker with log.

Demo seed loader with state stamp.

Segmented OTP with paste fill.

Email capture with success stamp.

Add rename remove fields.

Inputs by ticket type.

Zero to ten score buttons.

Mini filing form with severity.

Custom dashed listbox dropdown with keyboard navigation.

Segmented single-character boxes for codes and OTP.

Filterable searchable dropdown with instant keyboard filter.

Drag-and-drop upload zone with dashed borders and file preview.

Palette swatch picker with framing and active mark.

Curtain call showtime selector with hours, minutes, and AM/PM stepper.

Formatted code field with auto-formatted delimiters and validation mark.

Date picker input with popover calendar and quick date selection.

Typeahead search input with instant suggestions and keyboard select.

Hierarchical seating dropdown selector with expandable zone nodes.

Formatted currency price input with prefix badge and numeric mask.

Interactive canvas endorsement pad with clear action and receipt stamp.

Tag input with pill chip badges, remove buttons, backspace deletion, and dashed container.

Month calendar with date selection, month navigation, and today indicator.

Multi-file upload manager queue with individual file progress percentage bars, file size formatting (KB/MB), file type badges, cancel/retry/remove buttons, and overall upload count status.

Popup actions menu with keyboard shortcuts and items.

Trigger + popover picker with search input, checkbox options, and animated removable selection chips.

V2 dropdown menu: nested submenus, checkbox items, radio groups, separators, danger items, and shortcut kbd hints.

Size chip picker with out-of-stock strikes and stock dots.

Color swatch and size variant picker with animated selection.

Panel with category tabs (Smileys, Gestures, Hearts, Objects), search filter, and emoji grid with selection callback.

Phone number input with country code selector and formatted display

Two-month mini calendar grid for selecting start and end dates with nights count

12-month grid for selecting a month with year navigation

Year grid with page navigation for selecting a year

Two time inputs with duration readout that animates on change

Analog clock with draggable hands for time selection

Record keyboard hotkey combinations with visual chip display

Styled file input with drop chips and selection count animation

Canvas-based image cropping with draggable crop rect, rule-of-thirds grid, resize handles, and dataURL output.

6-digit OTP verification with auto-advance, paste support and resend countdown.

2FA setup panel with animated QR scan line, recovery codes and copy action.

Avatar upload circle with hover camera overlay and preview.

Dynamic form rows: add, remove, move up/down.

Currency select dropdown with symbols and codes.

Country select with flag emojis and codes.

Duration input: hour/minute/second steppers.

Serial number input: grouped boxes, auto-advance, paste support.

History list with clear action.

Hot chip row with active stamp.

Named queries with run and delete.

Compact calendar with today ring.

Swatch preset cards.

Lightweight SVG trend sparkline with animated end-point.

Mini data bar chart with dashed guideline grids and hover zoom.

Interactive SVG donut and pie chart with segment hover highlight, tooltips, center total readout, and custom color legend.

Multi-series line chart with stroke-dasharray animation and hover tooltips

Filled area chart with gradient fills and hover highlights

Horizontal stacked bars with segmented rows and legend chips

Half-donut SVG gauge with needle animation and value readout

Spider web chart with polygon axes and data polygon animation

Grid of colored cells showing value intensities with diagonal stagger

GitHub-style Git calendar heatmap grid

Horizontal funnel stages showing conversion percentages between steps

SVG scatter plot with dashed axes and hover enlargements

Floating bars showing incremental changes with connecting guides

OHLC candlestick chart for financial data visualization

Squarified treemap with recursive rectangles and staggered labels

Two-level flow diagram with bezier ribbons, value-based width, hover tooltips, and entrance animations.

Hierarchical tree of boxes with connector lines, expand/collapse nodes, avatar initials, and entrance animations.

Stylized world map grid with region value intensity and hover readout.

Bubble chart with size-coded circles and hover magnify.

Word cloud with weight-based font sizing and hover accent.

Node-edge network graph with bezier links and hover highlight.

Two-ring sunburst chart with segment hover dimming.

Target versus actual progress meter with qualitative ranges and goal marker.

Frequency distribution histogram with hover count readout and grow animation.

Horizontal milestone timeline progress line with reached checkpoints.

Quartile box plot with whiskers and median.

Kernel density violins with median ticks.

Mini bar sparkline with peak readout.

KPI card grid with mini trend lines.

Concentric multi-ring donut with legend.

Hover-exploding pie with live readout.

Circular flow ribbons with hover dimming.

Rectangular hierarchy partition chart.

Stacked flowing area layers with legend.

Banded area chart for dense time series.

Smooth distribution curve with rug ticks.

Quantile-quantile scatter against diagonal.

Process chart with UCL/LCL violation dots.

Row-column heat cells with labels.

Collapsible org tree, vertical or horizontal.

Ring with center usage readout.

Concentric rings per series value.

Bars plus line overlay chart.

Quota ring with over-limit stamp.

Horizontal KPI strip.

Two-column transfer list between available and claimed items.

Double-frame surface container with header, content, and footer.

Initials or photo badge with dashed ring.

Current-color star glyph for ratings and counts.

Data table with dashed row dividers and mono headers.

Vertical chronological events with dashed connection stem.

Sortable, searchable data table with row selection and pagination.

Stacked container with staggered angles and hover fan-out.

Centered layout wrapper with notch cutouts.

Queue and stage progression board with notch cards.

Interactive festival and stage timetable schedule with animated now indicator.

Standalone expandable disclosure card with notch header, animated height reveal and status mark.

Proportional media container with preset ratios, framed border, and corner guides.

3-tier matrix with billing switcher, highlighted plan and feature checklist.

Dashboard KPI card with value, trend delta and period label.

Universal user and team activity stream for deployments, invites, edits, and security audits with timeline avatars, action badges, relative timestamps, and event icons.

Universal payment card visualizer with real-time card number formatting, brand badge detection (Visa, Mastercard, Amex), metallic EMV chip, and interactive 3D flip card to show CVV.

Perforated placeholder box for zero-state views.

Collapsible disclosure items with smooth height transitions.

Overlapping avatar stack with +N overflow chip that fans out on hover.

Generic row surface with leading media, title, description, and trailing actions; hover lift with accent bar slide-in.

Single/multi selectable list with keyboard navigation, ARIA roles, and check marks that slide in.

List with dashed, numbered and icon variants plus staggered item entrances and List/ListItem composition.

Blockquote with dashed left frame, stamp entrance and mono uppercase cite line.

Term/description pairs with mono uppercase terms, muted descriptions and staggered row entrances.

Whole-card link with sliding arrow, darkening border on hover and fade-up entrance.

Grid or marquee row of monogram logo tiles in dashed frames with hover reveal.

Self-contained accordion Q&A with one-open behavior, grid-rows height reveal and rotating plus icon.

Quote card with initials avatar, name, role and staggered star rating pop-in.

Grid of member cards with initials avatars, roles, optional links and staggered hover-lift entrances.

Feature tiles with icon slot, stamp-on-hover icons, darkening borders and staggered entrance.

Ranked leaderboard with medal tiles for top 3 and count-up scores

Full-viewport dim overlay with cutout hole positioned via target ref/bounding box; pulse ring around target; caption card.

Windowed list for fixed-height rows: scrollTop math, visible slice renders, spacer divs; smooth scroll.

Product card with image slot, price, discount badge and wishlist heart.

Profile card with avatar, role, meta chips and action slot.

Blog article card with category badge, excerpt and author meta.

Event card with perforated date block, venue and time chips.

Invoice layout with line items, tax breakdown and stamped total.

Thermal receipt with zigzag tear edge, mono lines and barcode footer.

Cart summary with quantity steppers, tax row and checkout CTA.

Order status card with step dots and item summary.

Social post with header, body, gradient media placeholder, and action row with like/comment/share counts.

Rows with avatars, names, handles, and Follow buttons that morph between states.

Formatted money with symbol, mono integer part, smaller muted decimals, optional count-up animation

Thermal printer that feeds mono receipt lines out of a printer slot with a stepped paper animation.

Split-flap style NOW SERVING board whose digits flip on value change with a blinking chime dot.

3D cursor-tracking tilt card with springy reset and glare highlight.

Two-face card with rotateY flip animation, hover or click trigger.

Card with cursor-following radial spotlight glow.

HTML5 drag-and-drop reorderable list with grab handles and drop indicators.

Active session manager: device icons, location, revoke buttons.

Overview layout: KPI tile row, mini bar chart panel and recent records table.

User management table with role badges, status dots and remove action.

Settings section: title, description rows and save confirmation stamp.

Profile settings with avatar slot, fields and animated danger zone.

Billing panel: plan card, usage meters and invoice list.

Quota meter with color-coded fill bar and over-limit pulse warning.

Team member management: invite input, role chips, remove action.

Bento grid: variable-sized cells with hover lift and staggered entrance.

Split layout: left content and right emphasis panel with ratio control.

Centered single card layout for login/register pages.

Two-column notebook-style list with dashed separators.

CSS columns masonry: cards flow by height with break-inside protection.

Heavy data grid: sortable columns, pagination, sticky header.

Hierarchical table rows with expand/collapse chevrons.

Drag-and-drop kanban board v2 with animated column transfers.

Task checklist: checkboxes, assignee, priority badges and progress bar.

Task rows with assignee chips and priority badges.

Two-sided vertical timeline v2 with alternating cards.

Masonry feed of mixed-height content cards.

Email inbox list: unread dots, senders, stars, subject previews.

Filterable activity feed v2 with action badges and avatars.

Ranked list with drag-to-reorder and score readouts.

Table footer summary rows with bolded totals in dashed frame.

Empty table cell placeholder with floating icon animation.

Expandable row detail panels with height animation.

Column show/hide dropdown menu for data grids.

Mini quiz card with options and correct/incorrect feedback.

Bio card with social link icons and follow action.

Achievement badge grid with earned/locked states and shine sweep.

Price comparison table across sellers with best-offer highlight.

Cart count badge that pulses on item add.

Order tracking strip: status dots with dates and courier.

Refund status card with amount and reason.

Wallet balance card with top-up and mini transactions.

Crypto price ticker with animated up/down arrows.

Exchange rate converter with two-way live calculation.

Budget spending bar with category breakdown and overrun warning.

Subscription card: plan, renewal date, features, cancel.

Image gallery grid with fullscreen lightbox and keyboard paging.

Event poster card with gradient overlay and date corner.

Masonry quote wall built on Quote cards.

Glossary list with letter index tabs and term definitions.

Changelog list: version badges, added/fixed/breaking sections.

Recipe card: ingredients/steps tabs, time and servings.

Two-team score keeper with pulse on score change.

Live match ticker with scrolling scores and LIVE badges.

KPI metric box with big tabular numbers, delta change and sparkline bars.

Responsive grid strip of KPI metric tiles with deltas and spark bars.

Empty table cell placeholder with message.

Sales pivot by section tier.

Rule list with add remove.

Drop reader with grid preview.

Audit events with tone dots.

Plan comparison with highlight.

Collapsible filter panel with counts.

Bookable slot grid per resource.

Timed entries with done marks.

Comfortable compact segmented switch.

Format dropdown with stamp frame.

Selection bar with stamp actions.

Printable invoice stub with tear line.

Animated percentage result bars.

Version badge with change rows.

Now next later vote columns.

Masonry testimonial grid.

Editable mini cell grid.

Approve or drop import rows.

Seat stepper live total.

Idea rows with vote counts.

Micro status pill with subtle entrance transition.

Marching striped progress indicator bar.

Notice box with tone bar and status eyebrow.

Floating helper tooltip on hover and keyboard focus.

Accessible modal dialog with focus trap and scale animation.

Transient stacked notices with auto-dismiss.

Slide-over drawer panel with focus trap and scroll lock.

Floating content panel anchored to an interactive trigger.

Rotary loading indicator with dashed track and stamp accent.

Dashed placeholder box with gentle pulse animation.

Fixed privacy consent banner with accept and decline actions.

CSS celebration burst with stamp-colored pieces flying outward.

Interactive step-by-step guided onboarding card with progress indicators.

Popover preview on hover and focus with configurable delays and alignment.

Bottom slide-up drawer with pull handle, backdrop blur, and focus trap.

Festival alert and headline announcement ribbon bar with perforated top/bottom tear lines, countdown urgency badge, action CTA button, and dismiss action.

Live status beacon with radar sweep pulse, glow rings and occupancy levels.

Shimmer sweep skeleton with text-line and card composition presets.

Confirm/cancel modal with destructive variant for irreversible actions, Escape/backdrop close, and animated content.

Circular progress ring with stroke-dashoffset animation and center percentage

Self-contained confirm dialog with focus trap and stamp entrance for confirm button in destructive mode.

Full-panel status screen with icon circle, title, description, and actions slot; confetti-ish subtle burst on success.

Three dots bounce in sequence with keyframe animation; sizes sm/md/lg and tone prop.

Absolute/fixed veil with backdrop blur and spinner; fade in/out with opacity transition.

Bell button with unread badge + dropdown panel with notification rows, mark-all-read, empty state.

Single floating tip bubble anchored to trigger children with arrow, title, body, dismiss; pop-in with springy scale.

Slide-over cart drawer with quantity controls and animated removal.

LIVE indicator with blinking dot, mono uppercase label, and optional viewer count that ticks

Rockets that rise and burst into radial particle rings, looping while active.

Security score with animated arc gauge and per-check pass/fail list.

Role badge set: admin, editor, member, viewer with distinct tones.

Red-framed destructive actions area with two-step confirm.

Invite modal with email, role radio group and sent confirmation.

Upgrade call-to-action card with shine sweep, feature list and dismiss.

Maintenance notification bar with countdown chip and dismiss.

Offline banner listening to navigator.onLine with reconnecting state.

404/500/403 full-page layout with stamped code and return action.

Access denied panel with lock icon and request-access flow.

Auto-save status chip: idle, saving, saved, error states.

Connection badge with pinging dot and optional latency readout.

Version badge set: new, beta, stable, deprecated tones.

Sync status chip with spinning icon and last-sync timestamp.

Single file upload with circular progress ring and cancel.

Data migration banner with progress bar and expandable detail.

Rate limit notice with countdown timer.

Full-page notification feed with type icons and read states.

Mobile hamburger drawer sliding from the left with staggered links.

Stock status badge: in stock, low stock pulse, sold out.

Tactile admission callout note with dashed borders, status tones and dismiss action.

Turnstile capacity meter with notched frame, optimal indicator and tick marks.

Dynamic rate and velocity indicator badge with live pulse indicator.

Floating ticket feedback button and form.

Mobile sheet with pull handle.

Swipeable row revealing actions.

Refresh wrapper with sync stamp.

Option list with danger stamp.

Service rows with summary stamp.

Release phase stamp rail.

Production staging preview switch.

PWA install banner stub.

Version stamp with reload action.

Pending rows with retry stamp.

Zero-result state with clear.

Disconnected state with retry.

Stamped server error panel.

Intermission notice with ETA.

Granular consent toggles.

Showtime alert opt-in card.

Keycap indicator with raised bottom border for shortcuts.

Horizontal or vertical dashed divider.

Theater and arena section divider banner with dashed rules and zone badges.

Floating bottom checkout bar with item counter and admission button.

Splitter layout panels with draggable resize handle, min/max limits and collapse button.

Custom styled scrollable container with customized dashed scrollbar track, thumb indicator, horizontal/vertical support, and perforated top/bottom shadow fades.

Segmented panel switch with roving keyboard focus.

Numbered buttons with ellipsis and page stepping.

Hierarchical trail with slash separators.

Data-driven wizard progression with numbered stamps.

Modal search command palette with keyboard shortcuts, categorization, and filter.

Right-click menu with smooth reveal, shortcuts, and dashed divider.

Floating elevator button that scrolls smoothly to page top.

Theater box office menu bar with dropdown menus, shortcuts, and dashed frames.

Navigation bar with brand monogram and active links.

Hierarchical explorer with collapsible nodes and icons.

Collapsible navigation sidebar drawer with notch cutouts.

Hierarchical route breadcrumb with popover dropdown for intermediate tiers.

Floating application dock bar with hover magnification and active indicators.

Horizontal nav bar whose items reveal an animated panel below with height/fade reveal and sliding indicator.

Centered label over dashed separator lines with a line-grow scaleX animation on mount.

Semantic heading with level-based scale, optional mono eyebrow and per-level entrance animation.

Typographic paragraph primitive with default, muted, small, lead and mono variants.

Page title with stamp entrance, fading description, actions slot and optional mono eyebrow.

Landing hero with accent highlight word, primary/secondary actions and bottom marquee strip.

Site footer with brand monogram, staggered link columns and dashed-top bottom bar.

Double-frame call-to-action band with stamp-seal corner badge and stamping action button.

FAB that fans out mini action buttons in an arc with staggered scale-in when open; Escape closes.

IntersectionObserver sentinel: when visible calls onLoadMore, shows animated loader row; wraps children.

Button row "LOAD MORE" with progress mono counter; on click reveals hidden children with stagger.

Wrapper with top/bottom shadow indicators that fade in only when scrollable in that direction; dashed scrollbar styling.

Oversized scoreboard with pixel-style mono type, scanline sweep and scoreboard slots for home and away.

Fixed bottom navigation bar with sliding active indicator pill and badge support

Navigation page indicators with active dot that stretches and variant styles

Table of contents with IntersectionObserver scroll-spy and dashed active underline

Page skeleton with top bar, collapsible sidebar, and main content area with built-in skip-link

Accessibility skip-link that becomes visible on keyboard focus with translate animation

Chevron button with label that slides on hover, with focus ring

Hover dropdown menu with scale-in origin-top panel and keyboard navigation

Horizontal sticky navigation with active pill that slides under the active section, smooth scroll with reduced-motion fallback

Admin panel skeleton: collapsible sidebar nav, top bar, content area.

Sticky bottom bar that stays visible during scroll.

Split hero: left text block and right framed visual slot.

Single-row minimal footer: brand, links, copyright.

Auto-switching nav: desktop horizontal links, mobile hamburger panel.

Keyboard shortcut overlay opened with the ? key.

Multi-step wizard with validation shake, progress markers and summary.

Full-width mega menu with columns, links and featured box.

Site-map footer with link columns.

Sticky section anchor nav with IntersectionObserver spy.

Quick action toolbar with shortcuts and danger variants.

Back/forward history strip with breadcrumb entries.

In-page tabs synced to URL query parameter.

Full-screen mobile menu with staggered link entrance.

Two-level collapsible sidebar v2.

Hover flyout menu v2 with keyboard support.

Horizontal scroll-spy nav v2 with sliding active pill.

Hybrid pagination: numbered plus infinite scroll trigger.

Minimal top progress loader bar with smooth transit animation.

Sticky sidebar plus fluid content layout.

Bottom tabs with badges.

Dotted pager with prev next.

Staff shift board with claims.

Month grid with booked stamps.

Flip card live countdown.

Show timeline bar grid.

Rule picker with weekday stamps.

Two-pane frame with sticky rail.

Toggleable panels around a stage.

File-path trail with separators.

List pane with detail pane.

Header footer nav content aside shell.

Draggable divider two-pane layout.

Grouped link columns.

Action rows with keycaps.

Filterable command launcher.

Code snippet block with filename tab, language badge and copy button.

Collapsible JSON tree with mono keys and color-typed values

Unified diff viewer showing added/removed/context lines

Fake terminal card with sequential line reveal and blinking cursor

Scrolling log stream with level badges and filter chips

Word-level diff showing added/removed words with animation

Minimal contentEditable editor with toolbar (bold, italic, underline, lists, links, quote, code) and word/char counter.

API key card with masked value, reveal toggle, copy and regenerate actions.

Role � permission checkbox matrix with animated check pops.

Audit trail with actor avatars, color-coded action badges and timestamps.

Webhook list with URL, event chips, test button and remove.

Feature flag panel with toggle switches and rollout percentages.

Job queue panel with status, progress bars and cancel action.

Code editor: line-number gutter, Tab insertion, scroll sync.

Markdown write/preview tabs with built-in renderer.

Standalone markdown renderer: headings, lists, code, links, bold.

Sandboxed HTML preview frame.

Editable side-by-side diff view.

JSON editor with live validation, error line and format button.

Regex tester: pattern, test string, highlighted matches and count.

Cron expression builder: 5 fields, presets, live description.

Theme token table: swatch, value, copy action.

Code snippet card with language badge and copy button.

Console panel: colored output lines, input row, autoscroll.

Environment variable editor: secret masking, add/remove rows.

Multi-language code block with tabs and copy.

Collapsible folder tree with active selection.

Collapsible colored API response viewer.

Press-to-record keyboard shortcut field.

Collapsible reasoning trace with numbered steps.

Prompt composer with token estimate and send.

Character-by-character stream with cursor.

Token meter with context limit bar.

Saved prompt drawer with restore action.

Compact model selector with meta readout.

Up and down vote pair with live tally.

Framed agent output with copy and open.

Side-by-side prompt diff with highlights.

Animated voice bars for live chat state.

Citation marker with source popover.

Prompt composer with stamp submit.

Role-stamped chat message thread.

Pickable suggestion chip row.

Header payload signature inspector.

Encode decode panel with copy.

Cron expression plain English explainer.

WCAG contrast checker with pass stamps.

Match highlighter with validity flag.

Pretty printer with error stamp.

Placeholder paragraph generator.

Live prop editor with preview.

Open stub example live.

Past prompts with reuse action.

Method picker with fake latency.

Delivery rows with status codes.

Column to field mapping rows.

Mention input with instant @ autocomplete popover.

Theme switcher with day and night flip animation.

Smooth ticker reel that pauses on hover.

Cinema screening container with sprocket edges and play overlay.

Compact audio player with animated equalizer bars and duration counter.

Fullscreen media viewer with film frame edges and image paging.

Precision timer with lap tear-offs and digital readout.

Mechanical turnstile odometer counter with animated tally and slot frames.

Interactive multi-bar audio wave visualizer for concert recordings with live animated frequency bars and timestamp readout.

Live ticking event timer with segmented cards.

Sliding track carousel with prev/next arrows, dot indicators, keyboard arrows, and optional autoplay.

Framed media figure with double-frame surface and delayed figcaption fade-in.

Horizontal media plus content row with title, description, meta chips and hover lift.

Before/after slider with clip-path inset controlled by draggable divider; BEFORE/AFTER labels.

Image with hover magnifier lens tracking cursor; framed double border.

IntersectionObserver: children animate in when entering viewport with fade-up/scale variants, delay prop, once re-trigger option.

Gift card with ribbon stripe, amount and balance bar.

Invitation RSVP card with attending toggle and wax stamp.

Full chat panel with message list, input bar, and typing indicator slot.

Single message bubble with tail, status ticks, and hover press feedback.

Three bouncing dots with user name label indicating who is typing.

Nested comments with avatars, collapse/reply actions, and dashed indent guides.

Emoji buttons with counts, active reaction pops, and hover tooltips.

Platform icon row (X, Facebook, LinkedIn, Link) with copy link feedback and stamp stamp.

Circular story ring with progress animation, avatar names, and tap zones for prev/next.

Chat audio bubble with play/pause button and animated waveform bars showing audio duration.

Full deck audio player with play/pause morph button, seek bar, time readout, volume slider, and track info

Video frame with sprocket styling, hover fade-in controls, progress bar with scrub preview

Track rows with equalizer bars for active track, title/artist, duration, and slide-in marker

Vertical or horizontal slider with fill animation, mute toggle, and ARIA roles

Episode card with art slot, play button, speed selector chips, skip buttons, and chapter ticks

Poster frame with duration badge, play overlay circle that scales on hover with ripple ring, and title strip

Compact transport bar with prev/play/next/stop buttons, progress micro-bar, and time display

Relative time display showing '5 MIN AGO' with live re-render tick every 30s

Digital clock showing HH:MM:SS with optional timezone and variant support

Types text char-by-char with blinking block cursor, loops through phrases

Highlights query matches inside text with accent background and animated reveal

Single/multi-line clamp with optional expand toggle (MORE/LESS)

@mention suggestion panel with avatars and keyboard highlight.

Direct message thread: header with presence, bubbles, input.

Interactive poll with animated result bars and vote confirmation.

Highlight @mentions and #hashtags inside running text.

Gift message card with ribbon wiggle and open animation.

Voice note list: play buttons, waveforms, durations.

Image carousel with arrows, dots and swipe feel.

Horizontal thumbnail strip with animated selection frame.

Video results list: thumbnails, duration badges, channel names.

Microphone recording simulator with waveform and send action.

Embedded media frame: 16:9, skeleton shimmer, dashed border.

Browser-chrome screenshot frame with URL bar and controls.

Announcement megaphone with animated sound waves.

Print-ready admission ticket stub.

Print-ready invoice with totals.

Print-ready boarding pass with stub.

Print-ready staff badge template.

Speaker mute toggle with status label.

Swatch stamper with press count.

Analog touch stick with normalized axes and 44px knob.

Cross layout directional pad with four touch targets.

Diamond cluster of large touch action buttons.

Timed sequence input with draining timer bar.

Segmented vitality meter with low-health pulse.

Smooth energy meter with shimmer sweep.

Experience track with level badge and animated fill.

Encounter header with phase ticks and drain track.

Party roster with mini HP tracks and status dots.

Edge flash overlay that pulses on every hit.

Critical health edge glow with throb pulse.

Countdown ring with skip respawn action.

Floating points burst with rise fade.

Hit streak readout with heat scaling.

Stacked elimination log with weapon tags.

Match opener with auto 3-2-1 tick.

Unlock banner with stamp seal mark.

Tier rail with XP progress fill.

Head to head rounds with winner marks.

Tappable slot matrix with fill states.

Rarity framed cell with count badge.

Sealed crate with shake open action.

Single-draw capsule reveal card.

7-day claim strip with current day.

Purchasable cards with price and buy.

Objectives with progress bars and track.

Pinned HUD objective chip with mini bar.

Speaker panel with paged lines.

Coach-mark ring with hint capsule.

Ready-check roster with search state.

Presence roster with invite actions.

Guild banner with roster and join.

Speaking bars with mute state.

Latency badge with signal bars.

Overlay panel with resume restart quit.

Bottom drawer frame with close control.

Touch look-speed control slider.

Reticle style grid with live preview.

Transport bar with seek track.

Thumb grid with paged viewer.

Segmented avatar story ring.

Rotating quotes with dots.

Infinite monogram ticker.

Weekly roundup email card.