@catalogs

Animated circle with drawing and fill effects.

Animated footprint steps that walk along a path on the map.

Animated polygon with draw, fill, and draw-then-fill effects.

Pulsing dot animation for map markers.

Animated curved arc between two points for flights, deliveries, and connections.

Blur sensitive areas on the map with customizable styling.

Animate camera along a path for immersive fly-through experiences.

Thematic choropleth map with color-coded regions based on data values.

Draggable geographic circle with customizable fill and stroke.

Marker clustering with circle visualization.

Side-by-side map comparison component.

Interactive compass overlay with bearing display and click-to-reset.

Interactive map controls (zoom, fullscreen, etc).

Animated cyclone funnel with swirling particles and debris.

Animated explosion burst effect with radial particles and flash.

Realistic animated fire effect with particle simulation.

Coordinate grid overlay with latitude/longitude lines and labels.

Image overlay layers on the map.

Animated lightning bolt strikes with branching and flash effects.

Static routes and paths on the map.

Animated path and route animations on the map.

Radial lines from a center point to multiple destinations with optional markers.

Core map component with Mapbox GL and MapLibre GL support.

Customizable map markers with popup support.

Animated marker that moves along a path with trail visualization.

Animated meteor falling from sky with fiery trail and impact effect.

Minimap overview navigation component.

Rotating music disc with floating notes animation.

Geographic polygon with customizable fill and stroke styling.

Info popups and tooltips for map locations.

Animated radar sweep signal overlay on map coordinates.

Animated rain effect layer.

Video overlay layers on the map.

Atmospheric sandstorm effect with horizontal particle movement and reduced visibility.

Falling snowflakes effect with gentle drift and wind.

Rising steam effect with wispy particle animation.

Synchronized multi-map component with bidirectional movement sync.

Military-style targeting brackets with tracking and lock-on capabilities.

Animated tsunami wave effect with incoming wave, crashing foam, and debris.

Text watermark overlay for maps with configurable position and styling.

A compact visitor metric card layered over a world map with proportional location markers and a growth badge.

A full-page real-time analytics dashboard with a world map, overview metrics, traffic breakdown cards, and device statistics.

An interactive world choropleth that shades countries by a metric and includes a theme-aware legend and hover details.

A responsive delivery tracking screen with order details, a routed map, pickup and drop-off markers, and courier progress.

A globe-projected earthquake density heatmap with zoom-responsive intensity, color, radius, and point layers.

A domestic logistics dashboard with globe-projected routes, hub markers, operational stats, and sidebar filters.

A composable MapLibre map with theme-aware styles, markers, popups, controls, routes, arcs, GeoJSON layers, and point clustering.

A searchable store locator with a synchronized results sidebar, interactive markers, fly-to selection, tooltips, and details popups.

A status dashboard mapping edge network locations with live health, latency, uptime, and a node detail sidebar.

A composable area chart with gradient fills and animations

Pattern fill for the plot area when grid lines are hidden

A composable bar chart with horizontal/vertical orientations and animations

3D depth and glossy glass surfaces for BarChart bars

A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions

Shared context and hooks for Bklit chart components

Composable tooltip components for charts

A geographic map chart with zoom, pan, and data visualization

Time-series chart composing Line, Area, and SeriesBar on one shared scale (Recharts ComposedChart-style)

An animated funnel chart with multi-layer halo rings, hover interactions, and staggered entrance animations

Notch-based radial or linear gauge with optional center label, patterns, and optional gradients

Grid lines for charts

A contribution heatmap with animated cells and configurable level colors

Composable legend components for charts

A composable line chart with multiple series support

Real-time streaming line chart with smooth scrolling, crosshair, and animated axes

Marker components for highlighting data points on charts

A composable pie chart with animations and customizable slices

Sign-colored line segments for profit and loss on LineChart

Forecast segment extending a line series past the last data point

A composable radar/spider chart with multiple data series

Shaded data-coordinate band for target ranges and thresholds on time-series charts

A composable donut/ring chart with progress indicators

A flow diagram for visualizing data transfers between nodes

A composable time-series scatter chart with offset rings, hover dimming, and animated enter

Revenue stat card with gradient area sparkline, NumberFlow, and trend badge

Visitor map stat card with choropleth sparkline, NumberFlow, and trend badge

Sessions stat card with line sparkline, overlaid NumberFlow, and trend badge

A composable hierarchical sunburst chart with drill-down zoom and animated segments

X-axis component for time-series charts

Y-axis component for value labels in line and area charts

An animated mesh gradient rendered with SVG filters and configurable color stops.

A numeric ticker that animates between changing values.

A 3D box carousel for image or video slides with controls and autoplay support.

Text whose variable-font axes animate in a repeating breathing rhythm.

Elements that orbit a shared center along configurable circular paths.

A transformable 3D CSS box with hover, drag, and scroll-driven presentation options.

Matter.js bodies attracted to the cursor with gravity, SVG, and image support.

A container for draggable elements with optional momentum and bounded movement.

An interactive line that bends toward the pointer and springs back on release.

A Motion component that moves an element along a supplied SVG path.

A wrapper that gives content a configurable continuous floating motion.

A reusable SVG filter that merges nearby shapes into a gooey visual surface.

A configurable Matter.js gravity scene with draggable image, SVG, and HTML bodies.

Images or arbitrary elements that follow pointer movement as a layered trail.

A 3D letter swap that rotates between the original and replacement text.

A forward letter-swap animation for hoverable labels and links.

A ping-pong letter-swap animation that alternates its travel direction.

A repeated marquee that follows an SVG path with configurable spacing and direction.

A text layout that reveals and positions media between words on hover or scroll.

A layered image composition that floats and shifts with pointer movement.

A pointer-driven grid that leaves a fading, optionally gooey trail of colored pixels.

A reusable SVG filter that pixelates text, images, and animated elements.

A forward letter swap with characters animated in randomized order.

A randomized letter swap that alternates forward and reverse motion.

Text that scrambles and resolves when the pointer enters or leaves.

Text that scrambles into its final readable value on entry.

A bouncing screensaver element constrained to its measured container.

Text whose words swap through a configured sequence as the page scrolls.

A flexible looping marquee with drag, easing, axis, and perspective options.

Cards that stack and scale as the page scrolls through their container.

Text laid out and animated along a configurable SVG path.

Text characters that react independently to cursor distance and falloff.

An animated marker-style highlight triggered by view, hover, scroll, or a ref.

A rotating text sequence with configurable animation, staggering, mapping, and scroll steps.

A typewriter effect with configurable typing, deletion, delay, and looping behavior.

An underline animation that expands outward from the center.

An underline that enters from one side and exits through the other.

An underline that retracts and returns from the opposite side.

An underline that grows into a full text background on interaction.

Variable-font axes driven by the cursor across the full text run.

Variable-font characters that respond independently to cursor proximity.

Variable-font axes animated per letter during hover.

Variable-font letters animated in randomized order during hover.

A vertically sliced text reveal with line, word, letter, stagger, and scroll modes.

Redraws your page as live ascii characters in a soft radius around the cursor, with real glyph, shade block, and binary ramps. The HTML stays interactive. No d…

Folds the top and bottom of your page over virtual edges as you scroll, like scrolling on the face of a cube. The HTML stays interactive. No dependencies.

Fire sparks, smoke, and heat distortion rising from the bottom of your page. The HTML stays interactive. No dependencies.

A glassy droplet that trails the cursor as blending metaballs and refracts the live page beneath it, with dispersion, frost, and an iridescent sheen. The HTML …

Hangs your live HTML on a piece of fabric rippling in the wind, with softly lit folds. Cursor strokes send waves across the cloth. The HTML stays interactive. …

Procedural fog that drifts over your page and blurs what it covers. Cursor movement parts the clouds. The HTML stays interactive. No dependencies.

Renders any GLB or glTF model in a floating studio scene through a 1-bit Bayer dither. Built on three.js.

Rain droplets that run down the screen and refract your page behind them. The HTML stays interactive. No dependencies.

Turns any GLB/glTF model, SVG, or image into a floating liquid-glass object with real refraction, chromatic dispersion, frost, and tinted absorption, lit by a …

A cursor-following glass lens that refracts your page like real glass, with a crystal ball zoom over target elements. The HTML stays interactive. No dependenci…

Broadcast glitch bursts that tear the page into shifted slices with RGB splits, corrupted blocks, and analog noise, then settle back to a clean read. The HTML …

Splits your page into a grid of 3D tiles that ripple in waves around the cursor. The HTML stays interactive. No dependencies.

Renders the live page onto a floor of shiny beveled hex tiles that lean back in perspective, bob gently, and rise toward the cursor. The HTML stays interactive…

Hides everything below a glowing laser beam near the bottom of the viewport. Scrolling prints new content in from behind it. The HTML stays interactive. No dep…

A pointer-driven WebGL fluid simulation over your page. The HTML stays interactive. No dependencies.

A sci-fi scanner lens that follows the cursor and magnifies the live page inside a configurable HUD reticle, with chromatic aberration haze and click ripples t…

Rebuilds any GLB/glTF model, SVG, or image as a cloud of particles that the cursor pushes, swirls, and springs back into shape. Built on three.js.

Renders your page as fine grayscale dust that merges back into crisp UI around the cursor. The HTML stays interactive. No dependencies.

Dissolves everything below a chosen line into drifting sand that reassembles as you scroll. The HTML stays interactive. No dependencies.

Peels your page back from a chosen edge as the cursor approaches, revealing a second layer underneath. The HTML stays interactive. No dependencies.

A retro dither lens that pixelates and quantizes your page around the cursor. The HTML stays interactive. No dependencies.

Water ripples that spread from every click and refract the live page like a pond surface, with dispersion and light glints on the crests. The HTML stays intera…

Shatters your page into 3D glass shards that lift, tilt, and float around the cursor, refracting the content beneath them, with perspective and soft shadows. T…

Plays your page back like a worn VHS tape, with tape wave, head-switch noise, chroma bleed, and grain. The HTML stays interactive. No dependencies.

An agent avatar with status indicators, glowing rings, and optional pulse animation.

A dismissible announcement strip with an action link, scanlines, and HUD-style glow.

An animated anomaly warning banner with amber scan effects and a technical HUD readout.

A gridded HUD panel for displaying an arrival title, subtitle, time, and unit.

An overlapping avatar stack with colored status glows and an overflow count.

A map-style beam marker with coordinates, labels, glowing accents, and HUD corners.

A responsive bento layout with glowing borders, scanlines, and HUD-style corner framing.

An animated boot sequence that reveals system steps inside a scanlined HUD frame.

A monospace breadcrumb trail with uppercase labels and Tron-style active accents.

A chronological change feed with status glows, scanlines, and HUD-style framing.

A compact selectable or removable chip with monospace HUD styling.

A decorative circuit-board background with animated paths and primary-color accents.

A searchable command palette with scanlines, glowing accents, and HUD corner details.

A feature comparison table with scanlines, monospace labels, and HUD corner framing.

A segmented countdown readout with uppercase labels and Tron-style color variants.

CRT monitor effect with scanlines, vignette, flicker, and scan sweep animation. * Wrap any content to give it a retro CRT monitor appearance.

A call-to-action banner with glowing controls, scanlines, and HUD corner framing.

A HUD-style card for labeled data fields, subtitles, and status indicators.

A streaming event feed with staggered entries, status glows, scanlines, and HUD framing.

A sortable data table with staggered row reveals, scanlines, and HUD corner accents.

A glowing digital countdown for minutes, seconds, and milliseconds with a derez effect.

A diagnostics panel for status metrics with colored glows, scanlines, and HUD framing.

A horizontal or vertical divider with optional labels and Tron-style glow variants.

A trigger-based action menu with scanlines, monospace labels, and HUD corner details.

An empty-state panel with an icon, description, action, and HUD-style corner accents.

A segmented energy meter with status colors, glow, scanlines, and optional value labels.

An accordion-based FAQ with a subtle grid, scanlines, and HUD corner framing.

A feature card with glowing accents, scanlines, and HUD-style corner framing.

A drag-and-drop file picker with validation, glowing borders, and HUD corner accents.

A positioned data panel with compact monospace labels and HUD corner brackets.

A radial value gauge with configurable ranges, status variants, glow, and pulse effects.

A wrapper that adds configurable glow intensity, pulsing, and hover effects to content.

An animated grid overlay with a sweeping primary-color scan line.

A labeled heatmap with glowing intensity cells, scanlines, and HUD corner framing.

A decorative HUD corner bracket that can be positioned around framed content.

A reusable HUD frame with corner brackets, an optional label, and a subtle grid.

A glowing identity profile display with avatar, designation, access level, and status.

A draggable kanban board with scanlined columns, status accents, and HUD framing.

A compact location HUD for sector, grid, coordinates, and connection status.

An animated logo marquee with scanlines, uppercase labels, and HUD corner framing.

An infinitely scrolling row with direction, speed, style, and pause-on-hover controls.

A controlled modal with title, description, footer, scanlines, and HUD corner framing.

A dismissible notification card with status variants, glow, scanlines, and HUD framing.

A numeric input with increment and decrement controls and compact monospace labels.

A pricing plan card with feature lists, glowing emphasis, scanlines, and HUD framing.

A labeled progress bar with status glows, animated stripes, and scanline styling.

A circular progress indicator with configurable size, status color, glow, and pulse.

An animated radar display with targets, range rings, glow, and a sweeping beam.

A configurable rating display with selectable values, status colors, and optional glow.

A pulsing regeneration status readout with cyan bars and monospace labeling.

An animated targeting reticle with configurable size and status-color variants.

A composable responsive sidebar with providers, triggers, navigation groups, and menus.

A signal-strength display with status colors, glowing bars, and optional value labels.

A compact line or area chart with status colors, glow, and optional draw animation.

A compact speed readout with a segmented bar, numeric value, and monospace HUD labels.

A compact HUD statistic with a label, value, unit, and directional indicator.

A metric card with value, unit, trend, sparkline, scanlines, and HUD corner framing.

A responsive metric grid with scanlines, monospace labels, and HUD corner framing.

A collection of system status, uplink, information, and progress HUD displays.

A horizontal or vertical step indicator with glowing progress and scanlined HUD framing.

A dismissible status tag with size, color, and optional glow variants.

A terminal window with typed lines, status variants, scanlines, and HUD corner framing.

A testimonial card with quote, author details, rating, scanlines, and HUD corner framing.

A labeled text input with hint, error, icon, and compact Tron-style accents.

A Tron-styled alert and banner pair with monospace text, status colors, and optional pulse.

A compact HUD-style badge with dot, pulse, size, and status variants.

Pagination controls with glowing active states and compact monospace HUD labels.

A select control with monospace labels, glowing focus states, and a scanlined menu.

A loading placeholder with shape variants and animated primary-color HUD accents.

A numeric slider with a glowing track, value label, and compact monospace styling.

A tabbed interface with size and layout variants, glowing active states, and HUD labels.

A chronological timeline with glowing markers, status colors, and monospace HUD labels.

A binary toggle with glowing checked state, size variants, and monospace labeling.

A compact tooltip with monospace text, primary-color accents, and HUD corner details.

A timeline progress bar with labeled endpoints, markers, and compact monospace styling.

A digital hours, minutes, and seconds display with size and status-color variants.

A toast provider and notification stack with status colors, scanlines, and HUD corners.

Animated instanced rings form a neon 3D tunnel while keeping draw calls low.

A compact uplink status header with left and right labels and signal-color variants.

A video control panel with playback actions, time status, scanlines, and HUD framing.

A video timeline with current and end times, progress fill, and labeled markers.

An animated audio waveform with playback, status-color, glow, and scanline options.

A vertically stacked set of interactive headings that each reveal a section of content.

Displays a callout for user attention.

A modal dialog that interrupts the user with important content and expects a response.

Displays a file attachment with media, title, description and actions.

An image element with a fallback for representing the user.

Displays a badge or a component that looks like a badge.

Displays the current page location within a hierarchical structure.

A chat bubble for displaying a message in a conversation.

Displays a button or a component that looks like a button.

A container that groups related buttons together with consistent styling.

A date field component that allows users to enter and edit date.

Displays a card with header, content, and footer.

A carousel with motion and swipe built using Embla.

Beautiful charts. Built using Recharts. Copy and paste into your apps.

A control that allows the user to toggle between checked and not checked.

An interactive component that expands/collapses a panel.

Fast, composable, unstyled command menu for React.

Opens a neobrutalist action menu from a right-click or long press.

A window overlaid on either the primary window or another dialog window.

Provides the reading direction (LTR or RTL) to Base UI components.