Components

Composes full-page header, sider, content, and footer regions with a collapsible sider.

Provides an admin shell with navigation, header actions, managed route tabs, and scrollable content.

Adds slim custom scrollbars for vertical, horizontal, or two-axis overflow.

Creates a container-query viewport with web, tablet, and phone width presets.

Builds keyboard-accessible horizontal or vertical split panes with size constraints.

Keeps media or content inside a fixed width-to-height ratio.

Scales a fixed design canvas to fit, cover, or stretch within its container.

Distributes items deterministically across responsive columns without hydration-order changes.

Constrains type-safe polymorphic content through 3xl widths with independent centering and horizontal padding controls.

Arranges type-safe polymorphic flex content with gap, alignment, wrapping, and responsive direction through 2xl.

Defines type-safe polymorphic grid columns through the 2xl breakpoint with gaps and child row or column spans.

Inserts token-scaled horizontal or vertical layout space without semantic content.

Separates content with optional text, alignment, dashed styling, or vertical orientation.

Renders an accessible horizontal or vertical separator with correct geometry.

Applies semantic size, tone, weight, truncation, and polymorphic element choices to text.

Renders semantic heading levels with independently configurable visual size and weight.

Styles rich-text descendants with consistent semantic typography tokens.

Renders read-only Markdown blocks, inline formatting, links, quotes, lists, and fenced code.

Parses a LaTeX subset into searchable inline fractions, roots, scripts, and answer blanks.

Animates a multicolor aurora gradient across inline text.

Sweeps a restrained highlight across inline text.

Moves a configurable gradient through text for animated emphasis.

Cycles through words with enter and exit transitions.

Reveals text character by character with configurable timing and cursor behavior.

Surrounds text with animated sparkles generated on the client.

Splits text into animatable characters or words for staggered reveal effects.

Reveals text through staged blur, opacity, and position transitions.

Scrambles and progressively resolves characters into the supplied text.

Adds layered chromatic offsets and jitter to create a controlled glitch effect.

Places characters evenly around a rotating circular path with hover speed modes, inherited color, and a static reduced-motion state.

Reveals words progressively as their text block enters and moves through the viewport.

Moves an animated focus frame and blur treatment between words.

Renders supplied text as an animated ASCII glyph field.

Repeats text along a draggable curved path in a continuous loop.

Turns words into gravity-driven interactive falling bodies.

Adds animated displacement noise to text while keeping its silhouette readable.

Temporarily scrambles characters before resolving the original text.

Floats split text into place in response to scroll progress.

Moves repeated text horizontally according to scroll speed and direction.

Scrambles characters and then locks the original text into place in sequence.

Drops a fading trail of text glyphs along pointer movement inside a container.

Varies glyph weight, width, slant, and opacity according to pointer proximity.

Adjusts variable-font axes as the pointer approaches each character.

Styles short inline code fragments with a token-aware monospace surface.

Displays multiline code with an optional language label and copy action.

Presents a compact command or code snippet with one-click copying.

Shows line-oriented additions and removals in unified or split views with line numbers and a summary.

Displays keyboard keys or shortcuts with inline keycap styling.

Triggers actions through solid, soft, outline, ghost, or danger variants.

Adds a moving shimmer treatment to a call-to-action button.

Animates a multicolor border around a prominent action button.

Emphasizes an action with a configurable pulse ring around the button.

Emits pointer-positioned ripples when the button is activated.

Joins related buttons into a segmented horizontal or vertical control.

Provides branded sign-in buttons with service icons and loading states.

Collects single-line text with prefixes, suffixes, and an invalid state.

Collects multiline text in an auto-sizing field.

Chooses one or multiple values from an anchored option popup.

Toggles an independent boolean value with an indeterminate state.

Coordinates an array of values across a group of checkboxes.

Selects one mutually exclusive value from an accessible radio group.

Toggles a binary setting with a compact track-and-thumb control.

Switches a single action or formatting option between pressed and unpressed states.

Selects one option from a compact segmented control with a moving indicator.

Selects a numeric value or range along a keyboard-accessible track.

Edits numeric values with bounds, step buttons, and keyboard stepping.

Adds elastic track deformation and spring feedback to a numeric slider.

Masks sensitive values while supporting reveal and copy actions.

Generates configurable passwords with strength feedback and copy support.

Filters selectable options through either a trigger popup or an inline input.

Loads debounced remote options with request cancellation, pagination, initial-value resolution, and multiple selection.

Presents a keyboard-navigable single or multiple selection list.

Suggests and inserts mention tokens while the user types structured text.

Collects one-time codes across fixed-length slots with auto-advance, backspace, and full-code paste.

Captures a controlled rating with radio semantics, custom icons, and hover preview.

Selects files through click or drag-and-drop with validation and progress states.

Selects normalized original-image pixel boxes with aspect constraints, deterministic rounding, overlays, and explicit load failures.

Lets users pan, pinch, zoom, and crop an image to a fixed ratio before Blob export.

Edits allow and deny scope lists with suggestions, an effective-scope summary, and read-only or controlled modes.

Moves selected records between available and chosen lists with search support.

Selects a value through linked hierarchical option columns.

Selects one or more values from a searchable hierarchical tree.

Selects province, city, and district values through linked regional levels.

Searches and selects countries with codes, flags, and optional calling prefixes.

Edits Markdown through a WYSIWYG TipTap surface with Markdown input and output.

Selects colors through saturation and hue controls with HEX, RGB, or HSL output.

Edits a hexadecimal color through a swatch, system picker, text input, and shorthand expansion.

Chooses a color from a labeled, keyboard-accessible swatch collection.

Selects one rich option from cards containing titles, descriptions, and supporting content.

Searches and selects emoji by category, including a recent-use section.

Presents hold-to-talk or tap-to-toggle recording controls with waveform and processing states.

Searches and selects an icon from a categorized visual grid.

Displays a navigable day, month, or year calendar with limits and disabled-date rules.

Selects a date from an input-triggered calendar popup.

Combines calendar and time controls for a single date-time value.

Selects a start and end date from a dual-month range calendar.

Selects a time from hour and minute option controls.

Edits hour, minute, and optional second segments directly from the keyboard.

Coordinates named fields with structured submission and field errors.

Runs validated forms inside modal or drawer containers with submit lifecycle handling.

Coordinates form state with submit-reset footers, async loading, and custom footer content.

Splits a validated workflow across ordered steps with controlled navigation.

Provides a managed credential form with validation, controlled values, field appearance slots, remember copy, and an optional card surface.

Builds the branded half of a split authentication page with token-based gradients, highlights, content, and a footer.

Collects an ordered set of relative image coordinates with undo, refresh, and keyboard crosshair controls.

Composes labels, controls, help text, validation messages, and required state.

Builds collapsible query filters with reset and submit actions for data lists.

Displays textbook questions with type, stem, options, subquestions, media, source, and review status.

Renders sortable semantic tables with clickable rows, column headers, and empty states.

Displays a book cover with perspective depth and interactive 3D tilt.

Combines business-table columns, querying, sorting, selection, pagination, and toolbar actions.

Compares priced items in transposed feature rows with highlights, badges, and sticky headers.

Inspects collapsible JSON values with syntax coloring, copying, and depth controls.

Edits validated row and cell values directly within a data table.

Presents accessible named lists with structured items, metadata, actions, grid mode, empty states, and pagination or load-more controls.

Displays labeled record fields in horizontal or vertical, bordered or unbordered layouts.

Renders expandable hierarchical nodes with selection and keyboard navigation.

Groups related content into header, body, and footer regions.

Navigates scroll-snap slides with arrows, dots, autoplay, looping, dragging, and keyboard controls.

Plays file or HLS video with custom controls, chapters, resume, picture-in-picture, and fullscreen.

Arranges feature cards across configurable row and column spans with a hover action.

Loads images with fade-in, fallback, radius, and optional hover zoom.

Adds a pointer-following gradient highlight to a content card.

Reveals child items sequentially with fade-and-rise motion on viewport entry.

Scrolls repeated content continuously in a configurable direction with pause controls.

Reorders items through pointer and keyboard drag interactions.

Organizes draggable cards across status columns with controlled movement callbacks.

Edits controlled node-and-edge canvases with node dragging, edge connection, panning, zooming, and fit view.

Visualizes weighted flow between stages with proportional nodes and links.

Visualizes stage-by-stage quantities as a proportional conversion funnel.

Displays a live chronological stream of typed operational events.

Shows prioritized queue items in read-only lanes with depth, average-wait, and throughput metrics.

Frames business documents on an A4-style sheet with header, section, footer, and print controls.

Plots grouped tasks and progress on scrollable day, week, or month timelines with a today marker.

Manages events across month, week, day, and resource views with drag-based editing.

Overlays lane-allocated scrolling, top, or bottom audience comments on media.

Displays live message types, sender levels, pinned items, auto-scroll, and new-message recovery.

Presents a live video surface with status, viewer count, controls, and overlays.

Displays leveled log lines with timestamps, sources, wrapping, and auto-scroll.

Browses expandable files and folders with selection and version-control status badges.

Maps matrix values to color intensity with labels, legends, empty states, and drill-down.

Presents review comments, replies, severity, suggested diffs, and resolution or false-positive actions.

Renders only visible rows from large lists while preserving scroll position.

Loads additional content near the viewport boundary with pending and terminal states.

Plots dated activity counts in a calendar heatmap with intensity legend.

Scrolls a seamless loop of logos with configurable direction and hover pause.

Fans image cards into place with springy hover and entrance motion.

Cycles stacked cards through animated front-to-back swaps.

Displays a dimmed card grid that reveals full color inside a pointer-following spotlight.

Browses image cards around a draggable circular track.

Arranges images across a draggable CSS 3D dome with inertial rotation, click-to-zoom viewing, and reduced-motion behavior.

Moves poster images through a perspective field controlled by dragging.

Navigates an endless spherical menu of image-linked items.

Builds a bento card grid with a pointer spotlight, glowing borders, and optional tilt.

Stacks content cards progressively as the page scrolls.

Presents a holographic identity card with pointer tilt, glare, and an initials fallback.

Tilts an image card toward the pointer with optional caption and scale.

Reveals card content through animated pixel particles.

Distorts and dissolves an image card according to pointer velocity.

Displays slotted content on a metallic card with animated diagonal reflection.

Opens a layered 3D folder and fans out its paper contents.

Shows a compact trend line for a small numeric series without full chart chrome.

Opens images in a full-screen viewer with anchored zoom, panning, navigation, and thumbnails.

Shows live-commerce products with pricing, stock, sales, active state, and purchase action.

Summarizes added and removed lines with proportional bars and file-status badges.

Displays a numeric score and grade inside a color-coded radial gauge.

Overlays a count, capped count, custom value, or dot on wrapped content.

Renders a semantic or arbitrary-color status indicator with optional pulse and accessible labeling.

Pairs a status label with a colored dot and optional animated activity state.

Shows a compact token with semantic styling, an optional dot, and removal action.

Displays discount value, conditions, validity, and claim or used state.

Labels content with semantic color, optional icon, and close action.

Adds a handwritten-style highlight, arrow, or note around inline content in eight positions.

Displays a user image with fallback content.

Stacks overlapping avatars with an optional overflow count.

Combines an avatar, display name, and supporting description into a compact user row.

Generates theme-aware QR SVGs with version and correction boosting, excavated or watermark logos, plus SVG and high-DPI PNG export helpers.

Displays nested comments with reply indentation, optional connectors, and action slots.

Formats timestamps as continuously updated human-readable relative time.

Shows a branch, short hash, commit message, and author in inline or stacked form.

Communicates queued, building, live, failed, canceled, or skipped deployment states.

Renders repository-style metric badges with label and value segments.

Displays a laurel emblem beside a prefixed award title in outline, solid, or soft styles.

Displays a formatted or masked card number with detected brand and front or back card faces.

Explains chart series or status colors with compact labeled markers.

Presents a key metric with label, change, trend, and supporting context.

Formats numeric values with precision, separators, prefixes, suffixes, optional animation, or a countdown.

Wraps responsive Recharts area, bar, line, pie, radar, and radial charts with theme tokens, axis sizing, and series legends.

Displays a value within a known range using a semantic gauge bar.

Orders events along a timeline with colored or custom markers, alternate placement, and a pending state.

Animates a numeric value toward its target when it enters the viewport.

Plots geographic points and animated routes on an interactive world map.

Explains an empty result with an icon, title, description, and optional action.

Reserves content geometry with an animated loading placeholder.

Tiles a high-DPI canvas watermark and restores it after DOM tampering.

Builds a responsive top navigation bar with brand, links, actions, and mobile menu.

Renders Chinese filing and public-security registration links in a compliant footer.

Combines a square brand mark, name, and optional description with collapsed and router-link modes.

Opens a searchable grid of application shortcuts from global navigation.

Renders controlled multilevel navigation in tree or semantic list-and-link mode with inline and collapsed presentation.

Provides triggers, links, and rich navigation panels through a shared animated viewport.

Presents action items, groups, separators, and a danger treatment in a dropdown.

Organizes persistent application menus into a keyboard-accessible horizontal bar.

Displays magnifying icon shortcuts along an animated application dock.

Opens a full-screen arrangement of staggered pill-shaped navigation links from a bubble header.

Expands a pill-shaped header to reveal staggered navigation cards from a hamburger control.

Pairs navigation rows with looping text or image marquees on pointer entry.

Moves a liquid-like selection indicator between navigation items.

Renders pill-shaped navigation with hover fill, inverted labels, and an active dot.

Opens a token-themed layered side panel with staggered links, numbering, social actions, and reduced-motion behavior.

Renders controlled workspace tabs with pinning, reordering, overflow, refresh, and contextual close actions.

Switches between labeled content panels with underline or solid indicators.

Shows a static page hierarchy with a semantic current-page marker.

Navigates controlled paged data with page ranges and ellipses.

Tracks and navigates headings within long-form page content.

Pins content after a scroll threshold while preserving its layout position.

Reveals a control that smoothly returns a configured scroll container to the top.

Displays connected process steps with completed checks and an accessible current-step marker.

Communicates progress and status across an ordered multi-step process.

Combines back navigation, breadcrumbs, title, tags, actions, and footer tabs.

Searches and executes grouped commands through a keyboard-first palette.

Opens contextual action items at the pointer with a danger treatment.

Groups related action controls with roving keyboard focus.

Expands one or multiple stacked content sections with height transitions.

Toggles visibility of a single content region with a height transition.

Renders styled navigation with tone, underline, and external-link behavior.

Switches color themes through an animated icon transition.

Presents modal content in a portal with focus trapping.

Opens imperative confirm, information, success, warning, or error dialogs through a shared API.

Requests confirmation for consequential actions in a blocking accessible dialog.

Slides contextual or task content from any screen edge with modal focus management and a localized optional close button.

Anchors interactive contextual content to a trigger without leaving the page.

Shows brief guidance in an arrowed positioned layer on hover.

Shows rich content after pointer hover and closes it after a leave delay.

Displays a compact delayed preview of referenced content near its trigger.

Opens a video from a thumbnail and play button in a modal player.

Communicates persistent informational, success, warning, or danger messages.

Interrupts a flow with a contextual decision card and explicit actions.

Highlights supporting guidance or warnings within document content.

Displays a full-width announcement with tone, action, and dismissal support.

Queues brief transient feedback that can close automatically or manually.

Stacks positioned notification cards with icons, content, actions, and an imperative API.

Displays a service-notification card with source header, structured fields or custom content, and footer actions.

Presents success, error, information, warning, permission, or server outcomes with detail and action slots.

Streams live gift events with sender, item, quantity, and combo emphasis.

Animates lightweight audience reactions upward over live content.

Confirms a nearby action in a compact anchored popup.

Overlays a loading indicator on existing content while preserving its layout.

Renders a standalone CSS loading ring with status semantics.

Displays determinate or indeterminate progress in linear or circular form.

Guides users through anchored steps with a cutout highlight, positioned card, navigation, and progress.

Stacks chat messages in a scrollable timeline that follows new messages and streamed growth.

Displays one chat turn with role, content, status, and supporting actions.

Composes auto-growing prompts with submit, stop, keyboard, IME, and custom action controls.

Signals that a conversational participant is composing a response.

Reveals or collapses an agent reasoning trace with active and completed states.

Shows an agent tool invocation, arguments, progress, result, and failure state.

Displays an ordered agent plan with pending, active, completed, and failed steps.

Tracks agent collection domains with empty, active, archived, optional, and summary states.

Presents generated content with a title, version chip, action slot, and controlled or uncontrolled expansion.

Requests explicit user approval for an agent-proposed operation.

Lists conversation threads with active state, metadata, deletion, a header action, and an empty state.

Summarizes agent task status, plan steps, completion progress, tags, and elapsed time.

Renders parent-accumulated text with a blinking trailing cursor while streaming.

Offers clickable starter prompts or follow-up suggestions.

Groups copy, retry, rate, and related controls for a chat message.

Renders an inline numbered source link with a title and source label.

Draws a token-colored repeating dot background with an SVG pattern.

Draws a scalable line grid for decorative section backgrounds.

Creates diagonal stripes as a lightweight CSS decorative surface.

Adds a theme-aware radial glow behind foreground content.

Animates a perspective grid toward the viewer for a retro backdrop.

Emits concentric decorative rings from a configurable origin.

Animates diagonal meteor streaks behind content.

Renders softly moving layered aurora gradients as a background.

Animates a canvas particle field with pointer repulsion and theme-aware foreground color.

Animates random grid-cell opacity to create a flickering technical backdrop.

Renders layered multicolor waves with a canvas value-noise field.

Produces a flowing fabric-like WebGL surface with theme-aware color.

Produces a shifting pearlescent WebGL color field with pointer response.

Renders flowing luminous WebGL threads with configurable amplitude and interaction.

Displays an animated shader orb with hover intensity and theme-aware color.

Creates a reflective liquid-metal shader background with pointer distortion.

Renders a pixelated swirling multicolor oil-paint shader background.

Simulates gravity, collisions, wall bounce, and pointer repulsion for colorful balls.

Renders flowing volumetric light columns with noise, shading, and film grain.

Generates pointer-reactive organic color bands from a folded noise field.

Creates a dark flowing neural-field backdrop with scanlines, grain, and distortion.

Applies ordered dithering and palette quantization to animated noise waves.

Pushes and illuminates a canvas dot field around pointer movement.

Renders a fiery procedural eye whose pupil follows the pointer.

Creates a distorted CRT character-rain background with tearing, scanlines, and ripple interaction.

Simulates pointer-responsive metallic ferrofluid ridges with flowing rim highlights.

Animates layered sinusoidal line bundles with color interpolation and pointer bending.

Builds a multilayer parallax star field with twinkle, rotation, and pointer repulsion.

Combines multicolor gradients, vertical blind shading, grain, and a pointer spotlight.

Blends three warped color fields with animated film grain and contrast controls.

Distorts an image grid through a pointer-driven displacement field with elastic relaxation.

Moves alternating rows of a tilted grid in opposite pointer-responsive directions.

Projects an infinite perspective grid with a traveling luminous scan pulse.

Creates a warp-speed tunnel of luminous streaks rushing from a vanishing point.

Animates a terminal-style character matrix with randomized glyph and color glitches.

Cycles colored light shafts through a falling tunnel with glow and pointer pull.

Generates flickering noise-driven electric arcs with inverse-distance glow.

Raymarches a vertical volumetric light column with noise and two-color shading.

Projects pulsing volumetric rays from a configurable origin with pointer steering.

Renders interactive multicolor wave lines from layered sine and noise fields.

Produces a pointer-stirred liquid color field with metaball-like motion.

Quantizes animated noise into configurable pixel shapes with ordered dithering.

Raymarches a depth-faded pixel snow field with square, dot, or snowflake particles.

Raymarches a flowing plasma field with pointer disturbance and direction controls.

Animates two intertwined raymarched plasma ribbons with blended theme colors.

Raymarches a refractive octahedral prism that casts volumetric rainbow light.

Emits configurable curved spectral rays from an interactive central burst.

Combines rings, spokes, a rotating sweep, and pointer parallax into a radar display.

Displaces a glowing grid with concentric waves and local pointer ripples.

Scrolls configurable geometric shapes endlessly with hover fills and fading trails.

Fans two animated light beams from a screen corner with adjustable blending.

Layers two noise-driven gradients into a soft pointer-responsive aurora backdrop.

Moves a luminous beam along the border of a positioned element.

Animates a gradient sheen around an element border.

Sweeps a diagonal glare across content when the pointer hovers.

Magnifies arbitrary content beneath a movable circular lens.

Draws animated directional beams between referenced elements.

Moves child items around one or more circular paths.

Applies a directional multi-step blur gradient at a content edge.

Tracks the pointer with a radial spotlight inside a card surface.

Reveals arbitrary content with configurable direction, delay, and viewport trigger.

Pulls drifting particles into pointer-centered orbits before easing them back into place.

Trails a soft animated blob behind pointer movement.

Emits short radial spark lines from pointer clicks.

Tracks the pointer with configurable horizontal and vertical guide lines.

Animates noisy electric light around an element boundary.

Shows delayed translucent cursor echoes that follow pointer movement.

Builds a layered directional blur that increases gradually across content.

Spawns a fading sequence of images along fast pointer movement.

Pours volumetric laser beams through procedural fog with flow detail and pointer steering.

Draws layered reactive rings that follow and frame the pointer.

Pulls child content toward the pointer within a configurable attraction radius.

Rotates a field of line segments toward the pointer.

Blends moving metaballs into a fluid interactive shader surface.

Renders liquid metallic paint with noise distortion, color dispersion, and striped reflections.

Moves child items along preset or custom CSS offset paths with spacing and tilt controls.

Leaves a fading pixel-grid trail behind pointer movement.

Transitions between two content states through a randomized pixel curtain.

Renders flowing pointer-responsive ribbon trails in WebGL.

Moves a softly blurred geometric highlight with damped pointer interaction.

Emits colorful splashes and fading trails from pointer movement and clicks.

Animates star-like highlights around a content border.

Lets users drag or hover a sticker corner to reveal a peel, shadow, and pointer-following highlight.

Snaps an animated targeting reticle to marked interactive elements.

Renders an interactive field of perspective cubes with animated depth.

Wraps arbitrary content in pointer, gyroscope, or manually driven 3D tilt with optional geometric glare.

Lights a card border and outer glow according to pointer proximity.

Presents icon actions on layered glass tiles with 3D hover movement.

Creates a refractive glass surface with chromatic edge dispersion and fallback blur.

Simulates a draggable hanging badge with a bending cord and spring return.

Displays a CSS 3D model stage with drag rotation, inertia, parallax, and auto-rotate.

Moves a refractive circular glass lens across a procedural fluid background.

Frames screenshots in a Safari-style browser window with an address bar.

Frames content in a Chrome-style browser window with tabs and address bar.

Displays terminal commands and output in a styled window shell.

Frames content inside an iPhone-style shell with a Dynamic Island.

Frames content inside an Android phone device mockup.

Frames content inside a tablet device mockup.

Frames compact content inside a smartwatch device mockup.

Provides safe-area-aware bottom navigation for mobile application sections.

Places a prominent floating mobile action button above page content.

Presents touch-friendly actions in a modal sheet from the bottom edge.

Selects values through one or more scroll-snap wheel columns.

Reveals contextual row actions through horizontal touch gestures.

Tracks a resisted downward pull, arms at a threshold, and holds until refresh completes.

Applies device inset padding to keep mobile content outside obstructed regions.