# OPUS UI > Copy-paste component platform for React 19 + Tailwind CSS v4: everyday UI with Ant-Design breadth, plus pointer-reactive WebGL backgrounds, GPU simulations, motion effects, typographic effects, 3D galleries and full page blocks. Every item is source you copy into `components/opus/` (relative imports, no package). ## How to use (for AI coding agents) - Theme: import `components/opus/opus.css` once after `@import "tailwindcss"` (https://opusui.131199999.xyz/r/theme.json). Tokens are shadcn-compatible. - Install one item: `npx shadcn@latest add https://opusui.131199999.xyz/r/.json` — or offline: `node /scripts/add.mjs `. - Full markdown (usage, props, complete source) for any item: https://opusui.131199999.xyz/md/ - Everything at once: https://opusui.131199999.xyz/llms-full.txt - Backgrounds fill a `relative` parent with `className="absolute inset-0"`; put content in a sibling with `relative z-10`. - Only npm deps: clsx + tailwind-merge (for cn). Visual components need nothing else. ## Backgrounds Living, pointer-reactive surfaces — WebGL shaders, GPU simulations, canvas systems and pure CSS. - [Aurora](https://opusui.131199999.xyz/md/aurora) (Shader): Northern-lights curtains with drifting vertical rays and a twinkling sky. The nearest curtain leans toward the pointer and glows brighter where you hover. — import from `@/components/opus/backgrounds/aurora` - [Mesh Gradient](https://opusui.131199999.xyz/md/mesh-gradient) (Shader): A Stripe-style liquid gradient: four colour centres orbit on Lissajous paths, blended in linear light through a two-stage domain warp. The pointer is a soft gravity well that drags the colours toward it. — import from `@/components/opus/backgrounds/mesh-gradient` - [Silk](https://opusui.131199999.xyz/md/silk) (Shader): Satin folds rendered as a lit height-field: normals from finite differences, diffuse + Blinn specular + anisotropic sheen. Your pointer is the light source. — import from `@/components/opus/backgrounds/silk` - [Liquid Marble](https://opusui.131199999.xyz/md/liquid-marble) (Shader): Inigo-Quilez-style triple domain warp f(p + f(p + f(p))) coloured from four inks. The pointer stirs a vortex into the flow, faster when you move faster. — import from `@/components/opus/backgrounds/liquid-marble` - [Metaballs](https://opusui.131199999.xyz/md/metaballs) (Shader): A lava lamp of implicit-surface blobs with fake-3D shading from the field gradient. One blob is glued to your pointer and merges with the others on contact. — import from `@/components/opus/backgrounds/metaballs` - [Topography](https://opusui.131199999.xyz/md/topography) (Shader): Animated contour map with anti-aliased isolines (via fwidth) and bolder index contours. The pointer raises a hill; clicking drops a ring of terrain that spreads outward. — import from `@/components/opus/backgrounds/topography` - [Halftone Waves](https://opusui.131199999.xyz/md/halftone-waves) (Shader): A rotated halftone screen whose dot sizes ride interfering waves. Hovering swells a lens of bigger dots; clicking sends a ring across the grid. — import from `@/components/opus/backgrounds/halftone-waves` - [Voronoi Glass](https://opusui.131199999.xyz/md/voronoi-glass) (Shader): Stained-glass cells from an animated Voronoi diagram with bevelled shading and glowing leads. The cell under the pointer lights up and its neighbours’ edges glow. — import from `@/components/opus/backgrounds/voronoi-glass` - [Hyperspace](https://opusui.131199999.xyz/md/hyperspace) (Shader): Jump-to-lightspeed star streaks in three rotated layers. The vanishing point steers toward your pointer, and every click punches the throttle for a burst. — import from `@/components/opus/backgrounds/hyperspace` - [Synthwave Grid](https://opusui.131199999.xyz/md/synthwave-grid) (Shader): An outrun horizon: infinite perspective grid, striped sun, noise-carved mountains and twinkling sky. Move the pointer to pan and tilt the camera. — import from `@/components/opus/backgrounds/synthwave-grid` - [Event Horizon](https://opusui.131199999.xyz/md/event-horizon) (Shader): A black hole with gravitational lensing, a Doppler-beamed accretion disk, a photon ring and the far side of the disk bent over the shadow. It drifts toward your pointer and warps the starfield behind it. — import from `@/components/opus/backgrounds/event-horizon` - [Liquid Chrome](https://opusui.131199999.xyz/md/liquid-chrome) (Shader): Polished molten metal: a noise height-field reflecting a procedural studio environment with strip lights and Fresnel tint. The pointer drags a ripple; clicks drop a splash. — import from `@/components/opus/backgrounds/liquid-chrome` - [Dither Field](https://opusui.131199999.xyz/md/dither-field) (Shader): 1-bit (or 3-tone) ordered dithering of drifting noise through a 2×2, 4×4 or 8×8 Bayer matrix at a chunky pixel size. The pointer is a soft spotlight. — import from `@/components/opus/backgrounds/dither-field` - [Caustics](https://opusui.131199999.xyz/md/caustics) (Shader): Light dancing on a pool floor — two layers of animated Voronoi edges refracted by a noisy water surface, with drifting motes. The pointer is a sunbeam that focuses the network. — import from `@/components/opus/backgrounds/caustics` - [Light Rays](https://opusui.131199999.xyz/md/light-rays) (Shader): Volumetric god rays pouring from above, flickering through noise with dust caught in the beams. The source swings to aim at your pointer. — import from `@/components/opus/backgrounds/light-rays` - [Fluid](https://opusui.131199999.xyz/md/fluid) (Simulation): Real-time Navier–Stokes ink on the GPU: semi-Lagrangian advection, vorticity confinement, a 20-iteration Jacobi pressure solve and dye with fake lighting. Drag to stir, click to burst, or leave it to paint itself. — import from `@/components/opus/backgrounds/fluid` - [Water Ripple](https://opusui.131199999.xyz/md/water-ripple) (Simulation): A height-field wave equation solved on the GPU, refracting a procedural tiled pool — or any image you pass. Move to leave a wake, click to drop a stone, and let the rain fall when idle. — import from `@/components/opus/backgrounds/water-ripple` - [Reaction–Diffusion](https://opusui.131199999.xyz/md/reaction-diffusion) (Simulation): The Gray–Scott model growing coral, mitosis, worms, mazes or spots in real time. Paint new life with your pointer; double-click to reseed. Every frame runs up to 24 simulation steps. — import from `@/components/opus/backgrounds/reaction-diffusion` - [Constellation](https://opusui.131199999.xyz/md/constellation) (Canvas): Drifting nodes linked by distance-faded lines, accelerated with a spatial hash. The pointer wires itself into the network and attracts (or repels) nearby stars; clicks blast them apart. — import from `@/components/opus/backgrounds/constellation` - [Flow Field](https://opusui.131199999.xyz/md/flow-field) (Canvas): Thousands of particles riding the curl of a Perlin field — divergence-free, so streams never clump — leaving silky colour trails. The pointer is a vortex every stream bends around. — import from `@/components/opus/backgrounds/flow-field` - [Dot Grid](https://opusui.131199999.xyz/md/dot-grid) (Canvas): A matrix of spring-loaded dots that bulge away from (or toward) the pointer and wobble back into place. Clicking sends a shockwave rolling through the grid. — import from `@/components/opus/backgrounds/dot-grid` - [Glyph Rain](https://opusui.131199999.xyz/md/glyph-rain) (Canvas): Digital rain in katakana, binary, hex, latin or block glyphs with mutating trails. Optional torch mode dims the rain except where your pointer shines. — import from `@/components/opus/backgrounds/glyph-rain` - [ASCII Field](https://opusui.131199999.xyz/md/ascii-field) (Canvas): Two octaves of noise rendered through a character ramp — terminal art that breathes. The pointer sends ripples through the field and brightens what it touches. — import from `@/components/opus/backgrounds/ascii-field` - [Boids](https://opusui.131199999.xyz/md/boids) (Canvas): Craig Reynolds’ flocking — separation, alignment, cohesion — on a spatial hash. The flock scatters from your pointer (blushing as it flees) or follows it like a shadow. — import from `@/components/opus/backgrounds/boids` - [Magnetic Field](https://opusui.131199999.xyz/md/magnetic-field) (Canvas): A lattice of compass needles that swing to face the pointer (or orbit around it), growing and glowing as you get close. Idle, they track a wandering attractor. — import from `@/components/opus/backgrounds/magnetic-field` - [Elastic Grid](https://opusui.131199999.xyz/md/elastic-grid) (Canvas): A rubber-sheet grid: the pointer is a lens that bulges (or pinches) the mesh, stretched edges glow, and every vertex springs back with a wobble. Clicks punch it. — import from `@/components/opus/backgrounds/elastic-grid` - [Pixel Trail](https://opusui.131199999.xyz/md/pixel-trail) (Canvas): A grid that lights up cell by cell behind the pointer — strokes are rasterised so fast swipes leave no gaps — fading back with a shrink. Idle sparkles keep it alive. — import from `@/components/opus/backgrounds/pixel-trail` - [Spotlight Grid](https://opusui.131199999.xyz/md/spotlight-grid) (CSS): The Linear/Vercel hero grid: a faint pattern with a pointer-following spotlight that reveals brighter lines and a colour wash. Driven by two CSS variables from a single rAF — zero re-renders. — import from `@/components/opus/backgrounds/spotlight-grid` - [Aurora Blobs](https://opusui.131199999.xyz/md/aurora-blobs) (CSS): Blurred gradient orbs drifting on transform-only keyframes with a film-grain overlay. The cheapest beautiful background there is — and it renders on the server. — import from `@/components/opus/backgrounds/aurora-blobs` - [Meteors](https://opusui.131199999.xyz/md/meteors) (CSS): A deterministic meteor shower over a faint star field — identical on server and client, animated purely with the `animate-meteor` keyframes from opus.css. — import from `@/components/opus/backgrounds/meteors` - [Pattern](https://opusui.131199999.xyz/md/pattern) (CSS): Eight SVG tile patterns — grid, dots, cross, diagonal, checker, plus, waves, isometric — with edge fades and optional pulsing highlight tiles. The workhorse behind most hero sections. — import from `@/components/opus/backgrounds/pattern` - [Retro Grid](https://opusui.131199999.xyz/md/retro-grid) (CSS): A CSS-3D perspective floor scrolling toward the viewer, with a horizon glow. The lightweight sibling of Synthwave Grid. — import from `@/components/opus/backgrounds/retro-grid` - [Beams](https://opusui.131199999.xyz/md/beams) (CSS): Glowing light pulses racing along the lines of a faded grid — the “background beams” look with deterministic placement and no JavaScript. — import from `@/components/opus/backgrounds/beams` - [Ripple Rings](https://opusui.131199999.xyz/md/ripple-rings) (CSS): Concentric rings breathing in a staggered wave, fading downward — a calm focal backdrop for a logo, avatar or call-to-action. — import from `@/components/opus/backgrounds/ripple-rings` ## Effects Interaction primitives that make an interface feel physical: light, depth, magnetism and motion. - [Spotlight Card](https://opusui.131199999.xyz/md/spotlight-card) (Pointer): A card lit by your pointer — a soft pool of light inside and a brighter rim where the light catches the border. — import from `@/components/opus/effects/spotlight-card` - [Tilt Card](https://opusui.131199999.xyz/md/tilt-card) (Pointer): 3D tilt with a specular glare and real depth — wrap children in to float them toward you. — import from `@/components/opus/effects/tilt-card` - [Magnetic](https://opusui.131199999.xyz/md/magnetic) (Pointer): Pulls any element toward the pointer when it comes near, then springs back. Mark an inner node with data-magnetic-inner for parallax. — import from `@/components/opus/effects/magnetic` - [Glow Cards](https://opusui.131199999.xyz/md/glow-cards) (Pointer): Linear-style grid: one pointer lights the borders of every nearby card, so the light appears to slide across the gaps. — import from `@/components/opus/effects/glow-cards` - [Lens](https://opusui.131199999.xyz/md/lens) (Pointer): A magnifying glass over any React content — images, text, charts. The copy is scaled around the pointer and clipped to a circle. — import from `@/components/opus/effects/lens` - [Hover Reveal List](https://opusui.131199999.xyz/md/hover-reveal-list) (Pointer): An editorial index — hover a row and its image floats beside the cursor, leaning into your movement. — import from `@/components/opus/effects/hover-reveal-list` - [Image Trail](https://opusui.131199999.xyz/md/image-trail) (Pointer): Move across the area and a trail of images unfurls behind the pointer. Pooled DOM nodes and the Web Animations API — no re-renders. — import from `@/components/opus/effects/image-trail` - [Parallax Depth](https://opusui.131199999.xyz/md/parallax-depth) (Pointer): A pointer-driven parallax scene. Stack children — positive moves with you, negative against. — import from `@/components/opus/effects/parallax-depth` - [Liquid Glass](https://opusui.131199999.xyz/md/liquid-glass) (Pointer): Glass that refracts what’s behind it: backdrop blur + an SVG displacement map, rim lighting and a pointer-tracked specular. Frosted fallback outside Chromium. — import from `@/components/opus/effects/liquid-glass` - [Border Beam](https://opusui.131199999.xyz/md/border-beam) (Borders & light): A light that races around its parent’s border, inheriting the radius. Stack several with delays for orbiting comets. — import from `@/components/opus/effects/border-beam` - [Gradient Border](https://opusui.131199999.xyz/md/gradient-border) (Borders & light): A container with a rotating multi-colour border and an optional blurred halo. — import from `@/components/opus/effects/gradient-border` - [Shimmer Button](https://opusui.131199999.xyz/md/shimmer-button) (Borders & light): A premium CTA: a spark orbits the border while a highlight sweeps across the face. — import from `@/components/opus/effects/shimmer-button` - [Marquee](https://opusui.131199999.xyz/md/marquee) (Motion): Seamless infinite scroller — horizontal or vertical, reversible, pause on hover, faded edges. Pure CSS. — import from `@/components/opus/effects/marquee` - [Reveal](https://opusui.131199999.xyz/md/reveal) (Motion): Scroll-into-view entrances — fade, blur, scale, flip, slide — with optional per-child stagger. — import from `@/components/opus/effects/reveal` - [Dock](https://opusui.131199999.xyz/md/dock) (Motion): macOS dock magnification with transforms only — icons scale and neighbours shift to make room, the glass shelf widens with them. — import from `@/components/opus/effects/dock` - [Animated List](https://opusui.131199999.xyz/md/animated-list) (Motion): Notification-feed choreography: items drop in from the top with a springy settle while older ones recede. — import from `@/components/opus/effects/animated-list` - [Confetti](https://opusui.131199999.xyz/md/confetti) (Motion): A `confetti()` function with physics, flutter and three shapes, plus a . One shared canvas, removed when the last piece lands. — import from `@/components/opus/effects/confetti` - [Scroll Progress](https://opusui.131199999.xyz/md/scroll-progress) (Motion): A reading-progress bar for the page or any scroll container, animated with scaleX only. — import from `@/components/opus/effects/scroll-progress` - [Ripple](https://opusui.131199999.xyz/md/ripple) (Motion): Material-style ink from the exact press point; grows while held, fades on release. — import from `@/components/opus/effects/ripple` - [Custom Cursor](https://opusui.131199999.xyz/md/custom-cursor) (Cursor): Dot + lagging ring that swells over links, morphs into a label with data-cursor-text, and squishes on press. Scoped or page-wide; off on touch. — import from `@/components/opus/effects/custom-cursor` - [Click Spark](https://opusui.131199999.xyz/md/click-spark) (Cursor): Every click throws a ring of sparks in currentColor — a tiny, satisfying acknowledgement. — import from `@/components/opus/effects/click-spark` ## Text Typography that moves with intent — scramble, reveal, tick, morph and react to the pointer. - [Scramble Text](https://opusui.131199999.xyz/md/scramble-text) (Animated): A decoder effect — characters cycle through random glyphs and lock in left to right. Plays on mount, on view or on hover. — import from `@/components/opus/text/scramble-text` - [Gradient Text](https://opusui.131199999.xyz/md/gradient-text) (Animated): Text filled with a slowly panning gradient via background-clip. Zero JS. — import from `@/components/opus/text/gradient-text` - [Shiny Text](https://opusui.131199999.xyz/md/shiny-text) (Animated): A sheen sweeping across muted text — perfect for announcement pills and “thinking…” states. Inherits your text colour. — import from `@/components/opus/text/shiny-text` - [Typewriter](https://opusui.131199999.xyz/md/typewriter) (Animated): Types, holds and deletes phrases with a human-ish rhythm and a blinking caret. Screen readers get the full list once. — import from `@/components/opus/text/typewriter` - [Number Ticker](https://opusui.131199999.xyz/md/number-ticker) (Animated): Counts to a value with an expo-out ease when it scrolls into view, and animates from the current number on every change. Intl-formatted. — import from `@/components/opus/text/number-ticker` - [Text Reveal](https://opusui.131199999.xyz/md/text-reveal) (Animated): Splits a heading into words or characters and reveals them in a stagger — blur, rise, fade or masked slide. — import from `@/components/opus/text/text-reveal` - [Rotating Words](https://opusui.131199999.xyz/md/rotating-words) (Animated): Swaps words in place while the slot glides to the new width, so the sentence never jumps. Slide, flip or blur. — import from `@/components/opus/text/rotating-words` - [Morphing Text](https://opusui.131199999.xyz/md/morphing-text) (Animated): Words melt into one another — a cross-blur pushed through an SVG alpha threshold for a liquid, gooey morph. — import from `@/components/opus/text/morphing-text` - [Slot Counter](https://opusui.131199999.xyz/md/slot-counter) (Animated): An odometer — every digit is a 0–9 column that rolls with a springy overshoot when the value changes. — import from `@/components/opus/text/slot-counter` - [Glitch Text](https://opusui.131199999.xyz/md/glitch-text) (Animated): RGB-split slice glitch from two pseudo-element copies — always on, or only while hovered. Zero JS. — import from `@/components/opus/text/glitch-text` - [Highlighter](https://opusui.131199999.xyz/md/highlighter) (Interactive): Hand-drawn emphasis that draws itself into view — marker, underline, circle, strike-through or box. — import from `@/components/opus/text/highlighter` - [Text Pressure](https://opusui.131199999.xyz/md/text-pressure) (Interactive): Each letter’s variable-font weight responds to pointer proximity — a typographic lens. Static fonts still get the stretch. — import from `@/components/opus/text/text-pressure` - [Particle Text](https://opusui.131199999.xyz/md/particle-text) (Interactive): Text rasterised into thousands of particles that scatter from your pointer and spring home. Clicks blow the letters apart. — import from `@/components/opus/text/particle-text` - [Circular Text](https://opusui.131199999.xyz/md/circular-text) (Interactive): Text set on a rotating circle — the “scroll down ·” badge — speeding up on hover. Pure SVG + CSS. — import from `@/components/opus/text/circular-text` ## 3D Depth without a 3D engine — CSS 3D carousels, WebGL globes and draggable galleries. - [Ring Carousel](https://opusui.131199999.xyz/md/ring-carousel) (Gallery): A 3D cylinder of cards — drag with inertia and snapping, arrow keys, or let it auto-spin. The front card gets data-front. — import from `@/components/opus/three/ring-carousel` - [Sphere Gallery](https://opusui.131199999.xyz/md/sphere-gallery) (Gallery): Stand inside a dome of images. Drag to look around with inertia; click a tile to bring it forward. CSS 3D only. — import from `@/components/opus/three/sphere-gallery` - [Coverflow](https://opusui.131199999.xyz/md/coverflow) (Gallery): Classic coverflow with reflections — click, drag, swipe, wheel or arrow keys. Exposes listbox semantics. — import from `@/components/opus/three/coverflow` - [Expand Gallery](https://opusui.131199999.xyz/md/expand-gallery) (Gallery): Hover-accordion panels that widen to reveal the image and caption. Keyboard focus expands too. — import from `@/components/opus/three/expand-gallery` - [3D Marquee](https://opusui.131199999.xyz/md/marquee-3d) (Gallery): A tilted wall of endlessly scrolling columns with alternating directions — a striking hero backdrop, zero JS. — import from `@/components/opus/three/marquee-3d` - [Dot Globe](https://opusui.131199999.xyz/md/dot-globe) (Objects): A dotted planet on canvas — Fibonacci sphere, procedural continents, pulsing markers and great-circle arcs with comets. Drag to spin. — import from `@/components/opus/three/dot-globe` - [Card Stack](https://opusui.131199999.xyz/md/card-stack) (Objects): A swipeable deck: drag the top card and fling it — it flies off with spin and returns to the back. Keys and buttons too. — import from `@/components/opus/three/card-stack` - [Flip Card](https://opusui.131199999.xyz/md/flip-card) (Objects): A two-sided card that turns over in 3D on hover/focus, or on click/Enter. X or Y axis, springy easing. — import from `@/components/opus/three/flip-card` ## Components The everyday kit, Ant-Design breadth with Tailwind ergonomics — accessible, keyboard-first, themeable. - [Button](https://opusui.131199999.xyz/md/button) (General): Eight variants, seven sizes, a width-stable loading state and `buttonVariants()` for links that should look like buttons. — import from `@/components/opus/ui/button` - [Badge](https://opusui.131199999.xyz/md/badge) (General): Status pills with semantic colours, an optional status dot and a pulsing live indicator. — import from `@/components/opus/ui/badge` - [Kbd](https://opusui.131199999.xyz/md/kbd) (General): Key caps for shortcuts and keyboard hints. — import from `@/components/opus/ui/kbd` - [Separator](https://opusui.131199999.xyz/md/separator) (General): Horizontal and vertical rules, with an optional centred label for “or continue with”. — import from `@/components/opus/ui/separator` - [Spinner](https://opusui.131199999.xyz/md/spinner) (General): Ring, dots and petal loaders that inherit `currentColor` and announce themselves to screen readers. — import from `@/components/opus/ui/spinner` - [Avatar](https://opusui.131199999.xyz/md/avatar) (General): Image avatar with graceful initials fallback (stable colour per name), status dot, two shapes and an overlapping group with +N. — import from `@/components/opus/ui/avatar` - [Tag](https://opusui.131199999.xyz/md/tag) (General): Labels in eight colours, closable chips and checkable filter tags (Ant Design’s CheckableTag). — import from `@/components/opus/ui/tag` - [Card](https://opusui.131199999.xyz/md/card) (General): Composable card — header with action slot, content, footer — in default, elevated, ghost and interactive variants. — import from `@/components/opus/ui/card` - [Skeleton](https://opusui.131199999.xyz/md/skeleton) (General): Loading placeholders with a shimmer sweep or pulse, plus a ready-made paragraph. — import from `@/components/opus/ui/skeleton` - [Input](https://opusui.131199999.xyz/md/input) (Data entry): Text input with prefix/suffix adornments, a clear button, password reveal and automatic Field wiring. — import from `@/components/opus/ui/input` - [Textarea](https://opusui.131199999.xyz/md/textarea) (Data entry): Auto-growing textarea (CSS `field-sizing`) with min/max rows and a live character counter. — import from `@/components/opus/ui/textarea` - [Field](https://opusui.131199999.xyz/md/field) (Data entry): Label, description and error around any control — ids, aria-describedby and aria-invalid are wired for you. — import from `@/components/opus/ui/field` - [Select](https://opusui.131199999.xyz/md/select) (Data entry): Custom listbox with groups, descriptions, icons, typeahead and full keyboard support — positioned with collision flipping. — import from `@/components/opus/ui/select` - [Switch](https://opusui.131199999.xyz/md/switch) (Data entry): Toggle with a springy thumb, three sizes and optional on/off glyphs inside the thumb. — import from `@/components/opus/ui/switch` - [Slider](https://opusui.131199999.xyz/md/slider) (Data entry): Pointer-captured slider with step snapping, marks, a value bubble and complete keyboard support. — import from `@/components/opus/ui/slider` - [Checkbox](https://opusui.131199999.xyz/md/checkbox) (Data entry): Checkbox with a drawn tick animation, indeterminate state, built-in label + description and Field wiring. — import from `@/components/opus/ui/checkbox` - [Radio Group](https://opusui.131199999.xyz/md/radio-group) (Data entry): Radio group with roving focus and arrow keys, plus a card variant for plan/option pickers with icons and prices. — import from `@/components/opus/ui/radio-group` - [Segmented](https://opusui.131199999.xyz/md/segmented) (Data entry): Ant Design’s Segmented control — a sliding thumb, icons, disabled options, block width and arrow-key navigation. — import from `@/components/opus/ui/segmented` - [Input OTP](https://opusui.131199999.xyz/md/input-otp) (Data entry): One-time-code input — auto-advance, backspace-back, arrows, full-code paste, SMS autofill, grouping and masking. — import from `@/components/opus/ui/input-otp` - [Number Input](https://opusui.131199999.xyz/md/number-input) (Data entry): Stepper with press-and-hold repeat, ↑/↓ (Shift ×10), Home/End, clamping, precision and Intl display formatting. — import from `@/components/opus/ui/number-input` - [Tag Input](https://opusui.131199999.xyz/md/tag-input) (Data entry): Chips input — Enter, comma or paste to add, Backspace to edit the last chip, validation, max count and suggestions. — import from `@/components/opus/ui/tag-input` - [Rating](https://opusui.131199999.xyz/md/rating) (Data entry): Star rating with hover preview, half steps, read-only mode, custom glyphs and slider-style keyboard support. — import from `@/components/opus/ui/rating` - [Combobox](https://opusui.131199999.xyz/md/combobox) (Data entry): Searchable select with ranked matching (prefix > word > substring, keywords too), clear button and an optional “Create …” row. — import from `@/components/opus/ui/combobox` - [Calendar](https://opusui.131199999.xyz/md/calendar) (Data entry): Accessible month grid — single or range, two-month view, disabled days, min/max, week start, Intl labels and full keyboard nav. — import from `@/components/opus/ui/calendar` - [Date Picker](https://opusui.131199999.xyz/md/date-picker) (Data entry): Field-styled trigger with a floating Calendar; range mode adds a two-month view and quick presets (Last 7 days…). — import from `@/components/opus/ui/date-picker` - [Color Picker](https://opusui.131199999.xyz/md/color-picker) (Data entry): Saturation/value pad, hue strip, hex input, swatches and the native EyeDropper — inline or in a popover. — import from `@/components/opus/ui/color-picker` - [File Upload](https://opusui.131199999.xyz/md/file-upload) (Data entry): Drag-and-drop dropzone with type/size validation, image thumbnails, per-file progress bars and remove buttons. — import from `@/components/opus/ui/file-upload` - [Accordion](https://opusui.131199999.xyz/md/accordion) (Data display): Single or multiple expansion with grid-rows height animation, three looks and arrow-key header navigation. — import from `@/components/opus/ui/accordion` - [Data Table](https://opusui.131199999.xyz/md/table) (Data display): Typed data table — click-to-sort headers (aria-sort), row selection with page-level select-all, paging, sticky header, empty state. — import from `@/components/opus/ui/table` - [Statistic](https://opusui.131199999.xyz/md/statistic) (Data display): KPI card — label, big value, coloured delta (with polarity for costs/latency), icon and a trend sparkline. — import from `@/components/opus/ui/statistic` - [Sparkline](https://opusui.131199999.xyz/md/sparkline) (Data display): Dependency-free SVG mini chart — smooth line, gradient area or bars — for cards and table cells. Server-component safe. — import from `@/components/opus/ui/sparkline` - [Timeline](https://opusui.131199999.xyz/md/timeline) (Data display): Vertical activity timeline with tone dots or icons, timestamps and a pulsing pending tail. — import from `@/components/opus/ui/timeline` - [Empty](https://opusui.131199999.xyz/md/empty) (Data display): Empty state with drawn illustrations (inbox, search, error, folder), title, description and actions. — import from `@/components/opus/ui/empty` - [Descriptions](https://opusui.131199999.xyz/md/descriptions) (Data display): Key–value details as a semantic
— bordered grid or airy list, 1–4 columns, spanning cells. — import from `@/components/opus/ui/descriptions` - [Tree](https://opusui.131199999.xyz/md/tree) (Data display): File-explorer tree with indent guides, icons, meta, disabled nodes and full WAI-ARIA tree keyboard support. — import from `@/components/opus/ui/tree` - [Carousel](https://opusui.131199999.xyz/md/carousel) (Data display): Scroll-snap carousel — native swipe momentum, arrows, dots, keyboard, multi-slide widths and pausable autoplay. — import from `@/components/opus/ui/carousel` - [Progress](https://opusui.131199999.xyz/md/progress) (Feedback): Linear progress (scaleX, striped, gradient, indeterminate) and a circular ring with centred label. — import from `@/components/opus/ui/progress` - [Alert](https://opusui.131199999.xyz/md/alert) (Feedback): Callouts in info, success, warning, destructive and neutral tones — with actions, inline actions and dismiss. — import from `@/components/opus/ui/alert` - [Toast](https://opusui.131199999.xyz/md/toast) (Feedback): Sonner-style notifications: an imperative toast() API, promise toasts, actions, stacking that expands on hover, swipe to dismiss. — import from `@/components/opus/ui/toast` - [Tabs](https://opusui.131199999.xyz/md/tabs) (Navigation): Tabs with a gliding indicator in three styles, roving focus and proper tab/tabpanel semantics. — import from `@/components/opus/ui/tabs` - [Command](https://opusui.131199999.xyz/md/command) (Navigation): ⌘K command palette with fuzzy ranking, match highlighting, groups, shortcuts and a `useHotkey` helper. — import from `@/components/opus/ui/command` - [Pagination](https://opusui.131199999.xyz/md/pagination) (Navigation): Page list with smart ellipses and sibling count, or a compact simple variant. `pageRange()` is exported for custom UIs. — import from `@/components/opus/ui/pagination` - [Breadcrumb](https://opusui.131199999.xyz/md/breadcrumb) (Navigation): Trail with icons, custom separators and a collapsible middle (click … to reveal the full path). — import from `@/components/opus/ui/breadcrumb` - [Steps](https://opusui.131199999.xyz/md/steps) (Navigation): Flow progress (Ant Design’s Steps) — numbered or dots, horizontal or vertical, error state, clickable finished steps. — import from `@/components/opus/ui/steps` - [Dropdown Menu](https://opusui.131199999.xyz/md/dropdown-menu) (Navigation): Data-driven menu — items with icons/shortcuts, checkbox & radio items, labels, separators, nested submenus, typeahead. — import from `@/components/opus/ui/dropdown-menu` - [Context Menu](https://opusui.131199999.xyz/md/context-menu) (Navigation): Right-click menu for any area (also Shift+F10 / the Menu key), sharing the DropdownMenu panel and item model. — import from `@/components/opus/ui/context-menu` - [Dialog](https://opusui.131199999.xyz/md/dialog) (Overlay): Modal on the native element — real inertness, focus trap and Esc for free, animated with @starting-style. — import from `@/components/opus/ui/dialog` - [Sheet](https://opusui.131199999.xyz/md/sheet) (Overlay): Edge drawer (right, left, top, bottom) sharing the Dialog engine — bottom sheets get a grab handle. — import from `@/components/opus/ui/sheet` - [Tooltip](https://opusui.131199999.xyz/md/tooltip) (Overlay): Hover/focus tooltip with collision flipping and a shared warm-up — neighbours open instantly once one has shown. — import from `@/components/opus/ui/tooltip` - [Popover](https://opusui.131199999.xyz/md/popover) (Overlay): Click-to-open floating panel with an optional arrow, collision flipping, focus handoff and Esc/outside dismiss. — import from `@/components/opus/ui/popover` - [Hover Card](https://opusui.131199999.xyz/md/hover-card) (Overlay): Rich preview on hover or focus — profile cards, link previews — that stays open while you move onto it. — import from `@/components/opus/ui/hover-card` - [Popconfirm](https://opusui.131199999.xyz/md/popconfirm) (Overlay): Inline confirmation bubble (Ant Design’s Popconfirm) — async-aware confirm button with a spinner until it resolves. — import from `@/components/opus/ui/popconfirm` ## Blocks Full sections assembled from OPUS parts — copy a whole hero, pricing table or auth screen. - [Hero · Aurora](https://opusui.131199999.xyz/md/hero-aurora) (Marketing): Centred launch hero over a live aurora — announcement pill with shimmer, rotating headline word, CTAs and a logo marquee. — import from `@/components/opus/blocks/hero-aurora` - [Hero · Globe](https://opusui.131199999.xyz/md/hero-globe) (Marketing): Split hero for infrastructure products: copy and ticking stats on the left, a draggable dotted planet with live arcs on the right. — import from `@/components/opus/blocks/hero-globe` - [Floating Navbar](https://opusui.131199999.xyz/md/floating-navbar) (Marketing): Pill navbar that turns to frosted glass on scroll, hides on scroll-down, returns on scroll-up, with a sheet menu on mobile. — import from `@/components/opus/blocks/floating-navbar` - [Features · Bento](https://opusui.131199999.xyz/md/features-bento) (Marketing): Bento feature grid with a shared border glow and a live mini-visual in every cell: command list, sparkline, switches, integrations marquee. — import from `@/components/opus/blocks/features-bento` - [Pricing](https://opusui.131199999.xyz/md/pricing) (Marketing): Three tiers with a monthly/yearly segmented switch, odometer-rolling prices and a border beam around the featured plan. — import from `@/components/opus/blocks/pricing` - [Testimonials](https://opusui.131199999.xyz/md/testimonials) (Marketing): Two counter-scrolling rows of testimonial cards with ratings and avatars; pauses on hover. — import from `@/components/opus/blocks/testimonials` - [Stats Band](https://opusui.131199999.xyz/md/stats-band) (Marketing): Proof in numbers — four counters that tick up when scrolled into view, over a plus-pattern band. — import from `@/components/opus/blocks/stats-band` - [FAQ](https://opusui.131199999.xyz/md/faq-section) (Marketing): Two-column FAQ: heading and support CTA on the left, an animated accordion on the right. — import from `@/components/opus/blocks/faq-section` - [CTA · Beams](https://opusui.131199999.xyz/md/cta-beams) (Marketing): Closing call-to-action card over racing grid beams. — import from `@/components/opus/blocks/cta-beams` - [Footer](https://opusui.131199999.xyz/md/site-footer) (Marketing): Multi-column footer with newsletter signup, link groups, social icons and a legal row. — import from `@/components/opus/blocks/site-footer` - [Waitlist](https://opusui.131199999.xyz/md/waitlist) (Marketing): Pre-launch page: warp-speed starfield, liquid-glass card, email capture, rolling counter and a confetti thank-you. — import from `@/components/opus/blocks/waitlist` - [Sign in](https://opusui.131199999.xyz/md/auth-login) (Application): Split sign-in screen: a living mesh gradient with a revealed quote, and an accessible form with social buttons and validation. — import from `@/components/opus/blocks/auth-login` - [Dashboard](https://opusui.131199999.xyz/md/dashboard) (Application): Complete SaaS app shell — sidebar, header with search, KPI statistics, range-switchable revenue chart, activity timeline and invoices table. — import from `@/components/opus/blocks/dashboard` - [404](https://opusui.131199999.xyz/md/not-found) (Application): A 404 people screenshot: glitching numerals over a 1-bit dithered field that follows the cursor. — import from `@/components/opus/blocks/not-found`