The Spink UI
Component Library.
50+ production-grade components. Dark-first, TypeScript-typed, accessible, and Tailwind-powered. Built by Spink Systems for teams who ship.
Badge
Status indicators with 6 semantic variants and optional dot accent.
Avatar
Initials-based avatars with online/offline/busy/away status indicators.
Stat Card
KPI display cards with optional trend, description, and accent override.
Progress
Linear progress bars with label, percentage display, and accent color.
Timeline
Vertical timeline for process steps, history, and event sequences.
Input & Textarea
Text inputs with label, hint, error, prefix/suffix addons and icon support.
NumberInput
Stepper input with +/− buttons, min/max clamping, and prefix/suffix display.
Slider
Range slider with live value display, custom formatters, and size variants.
Combobox
Searchable dropdown with groups, keyboard navigation, and clearable selection.
TagInput
Multi-value tag entry with delimiter detection, max limits, and XSS-safe rendering.
Checkbox & Switch
Boolean controls with label, description, and size variants.
RadioGroup
Single-select radio group with card-style layout and descriptions.
OTP Input
One-time password field with auto-focus, paste, and keyboard navigation.
File Upload
Drag-and-drop file upload with accept filters, size limit, and multi-select.
Alert
Inline notification banners with 4 severity levels and optional title.
Callout
Rich callout blocks for docs and content — 6 variants with icon and title.
Spinner
4 loading spinner variants in 5 sizes. Fully accessible with sr-only labels.
Skeleton
Loading placeholder shimmer for async content areas.
Empty State
Contextual empty states with icon, title, description, and CTA.
Tabs
3 tab variants: underline (default), pills, and bordered. Keyboard navigable.
Stepper
Multi-step wizard navigation with completed/active/upcoming states.
Pagination
Page controls with prev/next, ellipsis, and mobile-responsive layout.
Accordion
Single or multi-open expandable sections with animated height.
Modal & Drawer
Accessible dialogs and side panels with focus trap, Escape key, and backdrop.
Tooltip
4-direction tooltips with configurable delay and content.
Collapsible
Inline expand/collapse sections — lighter than Accordion for single panels.
CodeBlock & InlineCode
Syntax display with copy-to-clipboard, line numbers, and dark-always background.
Kbd & KeyCombo
Keyboard shortcut display with size variants, symbol mapping, and 3D keycap shadow. Press ⌘K to open the global command palette.
Card
4 card variants: default, glass, elevated, and bordered. Composable sub-components.
Divider
Horizontal and vertical dividers with solid, dashed, and dotted variants. Optional label.
ChatInput
Message composer with mention support (@) and XSS-safe plain-text submission.
Charts & Data Visualization
Pure SVG + Motion. Animated on viewport entry. Zero third-party dependencies.
Virtual Map
Interactive SVG map with pan/zoom, pinch-to-zoom on mobile, grid overlay, background image support, VFR/military styles, and edit mode.
Char Reveal
Character-by-character cinematic text reveal. Triggered on scroll entry or immediately.
Number Ticker
Animated count-up on scroll entry with spring physics. Supports prefix, suffix, decimals, and custom formatters.
Tilt Card
Mouse-tracked 3D perspective tilt with spring physics and glare overlay.
Glow Card
Mouse-tracked radial neon border glow. Wraps any card content — configurable color, radius.
Parallax Text
Scroll-velocity-driven infinite marquee. Accelerates with scroll momentum. Supports forward and reverse.
Tactical Map
Interactive SVG canvas with pan, zoom, 12 drawing tools, layers, entity tracking, military & VFR symbols, and 4 map modes: Tactical, VFR Sectional, Game, Grid.
Audio Waveform
Animated bar visualizer driven by idle animation or a static heights array. Use for real-time audio feedback or decorative effects.
Waveform Scrubber
Click/drag progress bar with waveform background. Keyboard accessible. Swap played/unplayed colors per brand.
Volume Knob
SVG rotary dial. Drag up/down to adjust. Auto arc fill from min to current value. Supports any label.
Frequency Meter
VU / level meter with animated bars and peak-hold indicators. Supports vertical and horizontal orientations.
Equalizer Bands
10-band EQ with preset chips (flat, bass-boost, treble, vocal, rock, electronic, acoustic) and fully interactive vertical sliders.
Sound Mixer
Multi-channel mixer with vertical faders, pan knobs, mute, and solo per channel. Fully controlled or uncontrolled.
Radio Tuner
Drag the needle or click Scan to sweep through FM/AM frequencies. Station presets snap to exact dial positions.
Now Playing
Album card with spinning vinyl disc (motion-driven), waveform scrubber, and playback controls.
Playlist Track
Row component for playlists: hover reveals play button, active track shows live waveform, keyboard friendly.
Radio Station
Station card with frequency badge, genre, description, signal-strength bars, and live waveform when active.
Beat Pulse
BPM-synced concentric ring pulse using motion/react springs. Drop into any music or rhythm app.
Audio Player
Full HTML5 audio player: play/pause, waveform scrubber, volume slider and mute toggle. Provide a src prop for real playback.
Glitch Text
RGB-split channel-offset glitch effect on text. Hover, loop, or trigger manually.
Neon Glow
Neon sign glow on text or borders with flicker animation and multiple intensity levels.
Morphing Blob
CSS/SVG animated liquid blob that smoothly morphs between organic shapes.
Spotlight Card
Radial spotlight gradient that follows the cursor inside the card boundary.
Count Up Effect
Animated number counter with spring physics, prefix/suffix, decimal, and separator support.
Typewriter Text
Cycles through an array of strings with type + delete animations and a blinking cursor.
Noise & Scan Lines
Animated grain noise overlay and retro CRT scanline sweep. Great for cinematic hero backgrounds.
Scan Lines
CRT-style scrolling scanline overlay for retro / cyberpunk aesthetics.
Laser Beam
Animated laser sweep line with glow. Supports horizontal and vertical, custom speed and color.
AI Chat
Full chat thread with user/assistant bubbles, thinking animation, and a prompt input bar.
AI Message Bubbles
User and assistant message bubbles with copy, timestamps, streaming cursor and avatar support.
AI Components
Model badge, thinking dots, feedback buttons, status bar, tool call blocks, and streaming text.
AI Prompt Input
Auto-growing textarea with submit button, loading state, and keyboard shortcut hints.
AI Model Badge
Displays model name, provider, live status indicator, token count and latency.
AI Stream Text
Reveals text character-by-character at a configurable speed with a blinking cursor.
AI Status Bar
Token usage progress bar with color-coded thresholds and latency indicator.
AI Tool Call
Collapsible tool-call block showing function name, args JSON, and result.
AI Feedback Buttons
Thumbs up/down vote row for rating AI responses. Toggled state persists locally.
Hash Display
Formatted cryptographic hash viewer with algorithm label, copy button, and truncation toggle.
Password Strength
Visual strength meter with per-rule scoring, colour-coded segments and actionable tips.
Secure Field
Password input with show/hide toggle, copy button, and optional inline strength meter.
Key Pair Display
PEM public/private key viewer with masked reveal and copy-to-clipboard for each block.
Encryption Toggle
Animated lock/unlock button with visual state transition and callback.
Entropy Bar
Visual entropy / randomness level meter with noise bars and quality label.
Checksum Verifier
Compare two hashes visually — paste the actual hash and see a match/mismatch result instantly.
Cipher Text Preview
Animated Caesar-style character scramble with a drag slider to control encryption level.
Image Viewer
Full-screen lightbox with zoom and pan for images.
Image Compare
Before/after slider to compare two images side by side.
Media Gallery
Masonry photo gallery with lightbox and keyboard navigation.
Video Player
Custom video player with progress scrubber and controls.
Video Thumbnail
Thumbnail card with play overlay and hover animation.
Image Cropper
Interactive crop tool with draggable handles and aspect ratio lock.
Image Filter
Live CSS filter editor with brightness, contrast, and saturation sliders.
Aspect Ratio Box
Maintain consistent aspect ratios for responsive media containers.
QR Code
Pure canvas QR code generator with custom foreground and background colors.
QR Code Card
QR code with label and description in a branded card container.
QR Download
QR code with a download button to save as PNG.
QR Code Batch
Generate multiple QR codes at once in a grid layout.
Route Card
Turn-by-turn driving route with steps, distance, and traffic delay.
Flight Card
Flight info card with origin, destination, status, and in-flight progress arc.
Boat Dashboard
Marine HUD with animated heading compass, speed, depth, and wind.
Transit Board
Live public transport departure board with countdown timers.
Weather Card
Weather conditions widget with hourly forecast strip.
Compass Rose
Interactive animated compass with heading display and step controls.
Airsoft Loadout
Gear checklist with weight tracking, roles, and pack progress.
Mechanic Checklist
Vehicle service checklist with status cycling (OK / Warning / Fail / Pending).
QR Scanner
Camera-based QR code scanner using the device camera.
Ticket Card
Physical-style event ticket with QR code, seat info, and Add to Wallet buttons.
Boarding Pass
Airline boarding pass with route arc, seat class, and gate details.
Membership Card
Flip membership card with tier gradient, QR code, and loyalty points.
Ticket Builder
Interactive live preview builder for event tickets, boarding passes, and membership cards.
Spink UI Component Library
Crafted by Samuel Spink · samuel@spink.dev · Swiss precision, production-grade quality.