Components
464 tactile, zero-dependency open-source React components.
npm install bigbullui464 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.