bigbullui logobigbullui

Components

464 tactile, zero-dependency open-source React components.

Quick install:npm install bigbullui

464 results

Ticket Stub & Retro

Tickets, stubs, coupons, passes, split-flap, and tactile mechanical controls.

Seat Map

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

Keypad

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

Ticket Card

Complete admission ticket with notched edges and seat details.

Coupon

Discount coupon with scissor cutout lines and promo code copy.

Boarding Pass

Flight pass with origin, destination and receipt section.

Price Tag

Price tag with eyelet string hole and sale mark.

Luggage Tag

Baggage claim tag with handle loop and destination code.

Barcode

Dynamic SVG barcode with mono serial readout.

Stamp Seal

Rotated rubber stamp badge with double dashed circular ring.

NFC Badge

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

Scratch Off

Lottery ticket with interactive foil scratch layer and auto-reveal.

QR Reader

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

Ticket Fold

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

Split Flap

Mechanical departure board with flipping characters and retro terminal styling.

Watermark

Repeating watermark pattern with security angle.

Turnstile Gate

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

Scoreboard

Two-team score card with rolling digit animation

Stamp Card

Loyalty punch card with stamped circles and reward row.

Id Card

Employee ID card with hologram shine sweep and barcode.

QueueTicket

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

Passport

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

WaxSeal

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

Envelope

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

AirmailLetter

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

Postmark

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

CassetteTape

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

VinylRecord

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

FlipClock

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

NeonSign

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

MarqueeBulbs

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

BackstagePass

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

Wristband

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

Lanyard

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

DrinkTicket

Perforated drink coupon with glyph, GOOD FOR ONE copy and a tear-off stub that rotates on hover.

RaffleTicket

Raffle ticket with a big number, matching stub number and a winning highlight that pulses and stamps.

SlotMachine

Three-reel slot machine with staggered spinning reels, a pulling lever and payline highlight on stop.

PrizeWheel

SVG prize wheel of tinted segments that spins with eased deceleration and a flicking pointer flapper.

Dice

Pair of 3D dice that tumble with rapid face swaps and settle with a bounce on roll.

CoinFlip

Coin that rotates on Y through multiple turns, decelerating to a heads or tails face with a stamped result badge.

PlayingCard

Playing card with corner rank and suit, big center suit, diamond-pattern back and a 3D flip on click.

BingoCard

5x5 B-I-N-G-O card whose cells stamp in on toggle with a free center and line-complete sweep highlights.

DiscoBall

Tiled mirror sphere that slowly rotates and projects dancing light dots around the room.

StageLights

Two to four gradient light cones that sweep alternately over a glowing stage floor ellipse.

TicketBooth

Booth window with TICKETS marquee header, counter ledge, speaker grille dots and a CLOSED flip sign.

DriveInScreen

Outdoor cinema screen with projection flicker, a car silhouette row and an intermission countdown slot.

TicketStubV2

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

QR Code

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

Lottery Machine

Lottery machine with shaking ball cage and stamped number results.

Ticket Validator

Ticket validator device with blinking green/red result light.

Vending Machine

Vending machine with product grid, coin slot and drop animation.

Arcade Cabinet

Retro arcade cabinet with scanline screen, joystick and coin slot.

Betting Slip

Betting slip: match picks, odds grid, stake and play button.

Punch Clock

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

Mailbox

Mailbox with flag raise and letter send animation.

Safe Vault

Safe vault with dial animation, code entry and open reveal.

Medal Display

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

Trophy Shelf

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

Pool Table

Pool ball grid organizer with striped/solid ball rendering.

Revolving Door

Revolving door with rotating panels.

Ferris Wheel

Ferris wheel with rotating cabins.

Carousel Ride

Carousel ride with circling horses.

Badge Ribbon

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

Core Form & Inputs

Buttons, text inputs, checkboxes, toggles, switches, and sliders.

Button

Animated button with hover feedback and crisp focus.

Input

Text input with dashed focus border and design tokens.

Textarea

Multi-line text area matching Input styling.

Checkbox

Crisp checkbox with bold checked states.

Switch

Two-state toggle switch with sliding thumb.

Radio Group

Accessible single-select radio button set.

Slider

Draggable value slider with chunky thumb.

Stepper

Increment and decrement buttons with mono readout.

Rating

Interactive star rating with live hover preview.

Copy Button

Tactile button with clipboard feedback and check state.

Search Bar

Dashed search field with shortcut keycap and clear action.

Password Strength

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

Inline Edit

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

Dual Slider

Price range selector with minimum and maximum draggable handles.

Segmented Switch

Mechanical multi-option lever switch with smooth slide carriage.

Toggle Group

Single-choice segmented control with roving tabindex.

Label

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

Form Field

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

Field

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

Toggle

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

Input Group

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

Button Group

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

Loading Button

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

Checkbox Group

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

Fab

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

Wishlist Button

Heart wishlist button with pop fill and floating burst.

Add To Cart Button

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

LikeButton

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

CopyChip

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

EmailInput

Email input with live validation and typo domain suggestions

SliderTicks

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

Hooks

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

Focus Trap

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

Login Form

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

Register Form

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

Forgot Password

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

Form Progress

Form completion progress with segmented dashed bars.

Stepper V2

Vertical/horizontal stepper v2 with descriptions and done states.

Search Filter Bar

Combined search, sort and filter toolbar with animated chips.

Shipping Options

Shipping option radio cards with carrier, duration and price.

Payment Methods

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

Credit Card Form

Credit card form with live number formatting and expiry mask.

Installment Picker

Installment plan picker: months, monthly amount, total.

Coupon Field

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

Checkbox Card

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

Radio Tile

Radio tile with icon, description and sliding dot.

Switch Card

Switch card combining title, description and toggle.

Textarea Autosize

Auto-growing textarea with min/max height bounds.

Char Counter

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

Password Input

Password input with animated show/hide eye toggle.

Consent Checkbox

GDPR/KVKK consent checkbox with link and required marker.

Address Form

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

Radio Cards

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

Split Button

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

Pickers & Selectors

Date, color, time, country, currency, file dropzone, and complex pickers.

Select

Custom dashed listbox dropdown with keyboard navigation.

Pin Input

Segmented single-character boxes for codes and OTP.

Combobox

Filterable searchable dropdown with instant keyboard filter.

File Dropzone

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

Color Picker

Palette swatch picker with framing and active mark.

Time Input

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

Masked Input

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

Date Picker

Date picker input with popover calendar and quick date selection.

Autocomplete

Typeahead search input with instant suggestions and keyboard select.

Tree Select

Hierarchical seating dropdown selector with expandable zone nodes.

Masked Currency

Formatted currency price input with prefix badge and numeric mask.

Signature Pad

Interactive canvas endorsement pad with clear action and receipt stamp.

Tag Input

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

Calendar

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

File Upload List

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.

Dropdown Menu

Popup actions menu with keyboard shortcuts and items.

Multi Select

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

Dropdown Menu V2

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

Size Picker

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

Variant Picker

Color swatch and size variant picker with animated selection.

EmojiPicker

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

PhoneInput

Phone number input with country code selector and formatted display

DateRangePicker

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

MonthPicker

12-month grid for selecting a month with year navigation

YearPicker

Year grid with page navigation for selecting a year

TimeRangePicker

Two time inputs with duration readout that animates on change

ClockPicker

Analog clock with draggable hands for time selection

HotkeyRecorder

Record keyboard hotkey combinations with visual chip display

FileInput

Styled file input with drop chips and selection count animation

Image Crop

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

Otp Verify

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

Two Factor

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

Avatar Upload

Avatar upload circle with hover camera overlay and preview.

Field Array

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

Currency Select

Currency select dropdown with symbols and codes.

Country Select

Country select with flag emojis and codes.

Duration Input

Duration input: hour/minute/second steppers.

Serial Input

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

Charts & Visualization

Bar, line, bubble, sunburst, sparkline, radar, and data visualizations.

Sparkline

Lightweight SVG trend sparkline with animated end-point.

Bar Chart

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

Donut Chart

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

Line Chart

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

Area Chart

Filled area chart with gradient fills and hover highlights

Stacked Bar Chart

Horizontal stacked bars with segmented rows and legend chips

Gauge

Half-donut SVG gauge with needle animation and value readout

Radar Chart

Spider web chart with polygon axes and data polygon animation

Heatmap

Grid of colored cells showing value intensities with diagonal stagger

Calendar Heatmap

GitHub-style Git calendar heatmap grid

Funnel Chart

Horizontal funnel stages showing conversion percentages between steps

Scatter Plot

SVG scatter plot with dashed axes and hover enlargements

Waterfall Chart

Floating bars showing incremental changes with connecting guides

Candlestick Chart

OHLC candlestick chart for financial data visualization

Treemap Chart

Squarified treemap with recursive rectangles and staggered labels

Sankey Chart

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

Org Chart

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

World Map

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

Bubble Chart

Bubble chart with size-coded circles and hover magnify.

Word Cloud

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

Network Graph

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

Sunburst Chart

Two-ring sunburst chart with segment hover dimming.

Bullet Chart

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

Histogram

Frequency distribution histogram with hover count readout and grow animation.

Milestone Chart

Horizontal milestone timeline progress line with reached checkpoints.

Data Display & Tables

Tables, data grids, metric cards, stat tiles, accordions, and bento layouts.

Transfer List

Two-column transfer list between available and claimed items.

Card

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

Avatar

Initials or photo badge with dashed ring.

Star

Current-color star glyph for ratings and counts.

Table

Data table with dashed row dividers and mono headers.

Timeline

Vertical chronological events with dashed connection stem.

Data Table

Sortable, searchable data table with row selection and pagination.

Stack

Stacked container with staggered angles and hover fan-out.

Container

Centered layout wrapper with notch cutouts.

Kanban Lite

Queue and stage progression board with notch cards.

Gantt Lite

Interactive festival and stage timetable schedule with animated now indicator.

Collapsible

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

Aspect Ratio

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

Pricing Table

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

Metric Card

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

Activity Feed

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

Credit Card

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.

Empty

Perforated placeholder box for zero-state views.

Accordion

Collapsible disclosure items with smooth height transitions.

Avatar Group

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

Item

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

Listbox

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

List

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

Quote

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

DescriptionList

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

LinkCard

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

LogoCloud

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

Faq

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

Testimonial

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

TeamGrid

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

FeatureGrid

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

Leaderboard

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

Spotlight

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

VirtualList

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

Product Card

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

User Card

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

Article Card

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

Event Card

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

Invoice

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

Receipt

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

Checkout Summary

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

Order Card

Order status card with step dots and item summary.

PostCard

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

FollowerList

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

CurrencyDisplay

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

ReceiptPrinter

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

NowServing

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

Tilt Card

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

Flip Card

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

Spotlight Card

Card with cursor-following radial spotlight glow.

Drag Sort

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

Session List

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

Stats Overview

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

User Table

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

Settings Section

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

Profile Settings

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

Billing Panel

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

Usage Meter

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

Team Members

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

Bento Grid

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

Split Screen

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

Centered Card

Centered single card layout for login/register pages.

Two Column List

Two-column notebook-style list with dashed separators.

Masonry Columns

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

Data Grid

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

Tree Table

Hierarchical table rows with expand/collapse chevrons.

Kanban V2

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

Board Checklist

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

Task List

Task rows with assignee chips and priority badges.

Timeline Vertical V2

Two-sided vertical timeline v2 with alternating cards.

Feed Masonry

Masonry feed of mixed-height content cards.

Inbox List

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

Activity V2

Filterable activity feed v2 with action badges and avatars.

Rank List

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

Table Summary

Table footer summary rows with bolded totals in dashed frame.

Empty Col Span

Empty table cell placeholder with floating icon animation.

Row Expand

Expandable row detail panels with height animation.

Column Toggle

Column show/hide dropdown menu for data grids.

Quiz Card

Mini quiz card with options and correct/incorrect feedback.

Bio Card

Bio card with social link icons and follow action.

Badge List

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

Price Compare

Price comparison table across sellers with best-offer highlight.

Cart Badge

Cart count badge that pulses on item add.

Order Tracking

Order tracking strip: status dots with dates and courier.

Refund Card

Refund status card with amount and reason.

Wallet Card

Wallet balance card with top-up and mini transactions.

Crypto Ticker

Crypto price ticker with animated up/down arrows.

Exchange Rate

Exchange rate converter with two-way live calculation.

Budget Progress

Budget spending bar with category breakdown and overrun warning.

Subscription Card

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

Gallery Grid

Image gallery grid with fullscreen lightbox and keyboard paging.

Poster Card

Event poster card with gradient overlay and date corner.

Quote Wall

Masonry quote wall built on Quote cards.

Glossary List

Glossary list with letter index tabs and term definitions.

Changelog List

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

Recipe Card

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

Score Keeper

Two-team score keeper with pulse on score change.

Match Ticker

Live match ticker with scrolling scores and LIVE badges.

Stat Tile

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

Feedback & Overlays

Dialogs, sheets, alerts, toasts, callouts, and status badges.

Badge

Micro status pill with subtle entrance transition.

Progress

Marching striped progress indicator bar.

Alert

Notice box with tone bar and status eyebrow.

Tooltip

Floating helper tooltip on hover and keyboard focus.

Dialog

Accessible modal dialog with focus trap and scale animation.

Toast

Transient stacked notices with auto-dismiss.

Sheet

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

Popover

Floating content panel anchored to an interactive trigger.

Spinner

Rotary loading indicator with dashed track and stamp accent.

Skeleton

Dashed placeholder box with gentle pulse animation.

Cookie Banner

Fixed privacy consent banner with accept and decline actions.

Confetti Burst

CSS celebration burst with stamp-colored pieces flying outward.

Tour

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

Hover Card

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

Drawer

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

Announcement Bar

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

Status Dot

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

Skeleton V2

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

Alert Dialog

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

Progress Circle

Circular progress ring with stroke-dashoffset animation and center percentage

ConfirmDialog

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

Result

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

LoadingDots

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

LoadingOverlay

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

NotificationCenter

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

CoachMark

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

Cart Drawer

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

LiveBadge

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

Fireworks

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

Security Score

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

Role Badge

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

Danger Zone

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

Invite Modal

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

Upgrade Prompt

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

Maintenance Banner

Maintenance notification bar with countdown chip and dismiss.

Offline Banner

Offline banner listening to navigator.onLine with reconnecting state.

Error Page

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

Permission Denied

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

Save Indicator

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

Connection Status

Connection badge with pinging dot and optional latency readout.

Version Badge

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

Sync Status

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

Upload Progress

Single file upload with circular progress ring and cancel.

Migration Banner

Data migration banner with progress bar and expandable detail.

Rate Limit Note

Rate limit notice with countdown timer.

Notification Feed

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

Drawer Nav

Mobile hamburger drawer sliding from the left with staggered links.

Stock Status

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

Callout

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

Meter

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

Trend Badge

Dynamic rate and velocity indicator badge with live pulse indicator.

Editors & DevTools

Code, markdown, diff, JSON editors, regex tester, cron builder, and console.

Code Block

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

JSON Viewer

Collapsible JSON tree with mono keys and color-typed values

Diff Viewer

Unified diff viewer showing added/removed/context lines

Terminal

Fake terminal card with sequential line reveal and blinking cursor

Log Viewer

Scrolling log stream with level badges and filter chips

TextDiff

Word-level diff showing added/removed words with animation

Rich Text Editor

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

Api Key Card

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

Permissions Matrix

Role � permission checkbox matrix with animated check pops.

Audit Log

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

Webhook List

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

Feature Flag Panel

Feature flag panel with toggle switches and rollout percentages.

Queued Jobs

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

Code Editor

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

Markdown Editor

Markdown write/preview tabs with built-in renderer.

Markdown Preview

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

Html Preview

Sandboxed HTML preview frame.

Diff Editor

Editable side-by-side diff view.

Json Editor

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

Regex Tester

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

Cron Builder

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

Color Token Table

Theme token table: swatch, value, copy action.

Snippet Card

Code snippet card with language badge and copy button.

Console Panel

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

Env Editor

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

Media & Interactive

Audio players, waveforms, video frames, lightboxes, and social cards.

Mention Input

Mention input with instant @ autocomplete popover.

Theme Toggle

Theme switcher with day and night flip animation.

Marquee

Smooth ticker reel that pauses on hover.

Video Frame

Cinema screening container with sprocket edges and play overlay.

Audio Mini

Compact audio player with animated equalizer bars and duration counter.

Lightbox

Fullscreen media viewer with film frame edges and image paging.

Stopwatch

Precision timer with lap tear-offs and digital readout.

Countup

Mechanical turnstile odometer counter with animated tally and slot frames.

Audio Waveform

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

Countdown

Live ticking event timer with segmented cards.

Carousel

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

Figure

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

MediaObject

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

ImageCompare

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

ZoomImage

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

Reveal

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

Gift Card

Gift card with ribbon stripe, amount and balance bar.

Rsvp Card

Invitation RSVP card with attending toggle and wax stamp.

ChatWindow

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

ChatBubble

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

TypingIndicator

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

CommentThread

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

ReactionBar

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

ShareMenu

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

StoryViewer

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

VoiceMessage

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

AudioPlayer

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

VideoPlayer

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

Playlist

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

VolumeSlider

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

PodcastPlayer

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

VideoThumbnail

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

MediaControls

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

TimeAgo

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

LiveClock

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

Typewriter

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

HighlightText

Highlights query matches inside text with accent background and animated reveal

Truncate

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

Mention List

@mention suggestion panel with avatars and keyboard highlight.

Dm Thread

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

Poll

Interactive poll with animated result bars and vote confirmation.

Mention Highlight

Highlight @mentions and #hashtags inside running text.

Gift Message

Gift message card with ribbon wiggle and open animation.

Voice Note List

Voice note list: play buttons, waveforms, durations.

Image Carousel

Image carousel with arrows, dots and swipe feel.

Thumbnail Strip

Horizontal thumbnail strip with animated selection frame.

Video List

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

Audio Recorder

Microphone recording simulator with waveform and send action.

Media Embed

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

Screenshot Frame

Browser-chrome screenshot frame with URL bar and controls.

Megaphone

Announcement megaphone with animated sound waves.