# Modus UI > A premium, editorial-grade React and React Native component library built with restraint and typographic precision. Install any component with `npx @modus-ui/cli add `. It writes the source to `components/ui/.tsx` and lists the npm packages it needs. Components import `cn()` from `@/lib/utils` (clsx + tailwind-merge). Every link below is a markdown doc with usage and full source; https://modusui.kasimkazmi.com/llms-full.txt has all of them in one file. ## Navigation - [Liquid Tabs](https://modusui.kasimkazmi.com/components/liquid-tabs.md): A tab switcher with a physics-driven, stretching selection pill. - [Flowing Menu](https://modusui.kasimkazmi.com/components/flowing-menu.md): A full-screen menu where hovering an item triggers an infinite scrolling marquee. - [Morphing Navbar](https://modusui.kasimkazmi.com/components/morphing-navbar.md): A premium, scroll-aware header that dynamically adjusts its layout density and logo scale based on scroll position. - [Floating Dock](https://modusui.kasimkazmi.com/components/floating-dock.md): A premium navigation dock with smooth Apple-style magnifying zoom animation on hover. - [Notch Footer](https://modusui.kasimkazmi.com/components/notch-footer.md): A premium, animated footer component with a smooth curved pocket. - [Process Stepper](https://modusui.kasimkazmi.com/components/process-stepper.md): A wizard-style stepper component for breaking down complex forms and processes into manageable chunks. - [Crown Bar](https://modusui.kasimkazmi.com/components/crown-bar.md): A proximity-spring navigation bar in four fits — a masthead command bar, a centred pill, a dithered pixel strip and a refracting glass rail. ## Actions - [Magnet](https://modusui.kasimkazmi.com/components/magnet.md): A micro-interaction component that pulls an element towards the mouse cursor. - [Magic Button](https://modusui.kasimkazmi.com/components/magic-button.md): A smooth animated button using Framer Motion. - [Animated Button](https://modusui.kasimkazmi.com/components/animated-button.md): A smooth button with hover and tap scale animations using Framer Motion. - [Pulse Button](https://modusui.kasimkazmi.com/components/pulse-button.md): A button with an organic, rhythmic pulsing animation to draw user attention. - [Ink Pill](https://modusui.kasimkazmi.com/components/ink-pill.md): A mono-set pill call-to-action washed in the theme's ink, with a diamond glyph and a paper-card sibling. - [Night Gate](https://modusui.kasimkazmi.com/components/night-gate.md): A serif link pill floating over a drifting field of ink specks and pulsing motes. - [Starstream Button](https://modusui.kasimkazmi.com/components/starstream-button.md): A WebGL pill whose face carries a sideways stream of stars that stretches into streaks on hover. - [Arc Halo Button](https://modusui.kasimkazmi.com/components/arc-halo-button.md): A WebGL card button traced by crawling ink arcs that multiply on hover and discharge on click. - [Current Button](https://modusui.kasimkazmi.com/components/current-button.md): A WebGL pill filled with a slow ink current that quickens on hover and flares on press. - [Inkwell](https://modusui.kasimkazmi.com/components/inkwell.md): A round WebGL button holding a well of theme ink that tilts as you sweep the cursor and draws down on click. - [Muse Button](https://modusui.kasimkazmi.com/components/muse-button.md): A canvas busy-state button in the theme's ink, with a comet tracing its border, a dot spinner and a shimmering serif label. - [Conjure Button](https://modusui.kasimkazmi.com/components/conjure-button.md): A seated paper button whose serif letters shimmer in a wave and swap to an active label on focus. - [Halo Trace](https://modusui.kasimkazmi.com/components/halo-trace.md): A mono pill whose hairline is traced by a slow beam of the theme's primary colour. - [Glaze Button](https://modusui.kasimkazmi.com/components/glaze-button.md): A glazed button in the theme's primary colour with a serif label and a sheen that sweeps across on hover. - [Sheen CTA](https://modusui.kasimkazmi.com/components/sheen-cta.md): A paper pill with a serif italic label and a sweep of primary light on hover. - [Kiln Button](https://modusui.kasimkazmi.com/components/kiln-button.md): A glowing pill button fired from the theme's primary and destructive colours, with a coal-chip chevron. - [Hairline CTA](https://modusui.kasimkazmi.com/components/hairline-cta.md): A mono, uppercase hairline button whose primary ink floods up from the baseline on hover. - [Halo Invite](https://modusui.kasimkazmi.com/components/halo-invite.md): A card-coloured invite pill with a monogram badge and a halo of light circling its edge. - [Orbit Chip Button](https://modusui.kasimkazmi.com/components/orbit-chip-button.md): A solid primary pill led by a paper chip whose arrow turns forward on hover. - [Stamp Key](https://modusui.kasimkazmi.com/components/stamp-key.md): A theme-inked key that presses into its base and lights its index tick on hover. - [Ink Endcap Button](https://modusui.kasimkazmi.com/components/ink-endcap-button.md): An italic serif pill with a round ink endcap, as a hairline outline or a solid fill. - [Prism Key](https://modusui.kasimkazmi.com/components/prism-key.md): A frosted key-shaped button with a palette-tinted prism edge and an ink arrow chip. - [Round Glyph](https://modusui.kasimkazmi.com/components/round-glyph.md): Three round icon buttons in the theme's colours: a raised plus key, a frosted play disc and a stitched mail ring. - [Prism Flow Button](https://modusui.kasimkazmi.com/components/prism-flow-button.md): A WebGL2 button whose face pours into prismatic ribbons on hover, set on a soft theme-coloured pool. - [Ink Capsule](https://modusui.kasimkazmi.com/components/ink-capsule.md): An ink-filled capsule with a comet of light orbiting inside it and a serif label. - [Keystroke Button](https://modusui.kasimkazmi.com/components/keystroke-button.md): A keycap button with a key legend, a serif label and a hard bottom edge that sinks when pressed. - [Stitch Frame Button](https://modusui.kasimkazmi.com/components/stitch-frame-button.md): A paper button that pins four corners and stitches a dashed frame around itself on hover. - [Rising Motes](https://modusui.kasimkazmi.com/components/rising-motes.md): A primary-ink button with motes of light drifting up through it. - [Roll Label](https://modusui.kasimkazmi.com/components/roll-label.md): A paper pill whose mono label rolls up and away while an inked copy with an arrow rises in on hover. - [Comet Ring Button](https://modusui.kasimkazmi.com/components/comet-ring-button.md): A card-toned button whose hairline rim is chased by a comet of theme colour. - [Satin Capsule](https://modusui.kasimkazmi.com/components/satin-capsule.md): A satin card-toned capsule with a graded hairline, a mono annotation and a primary arrow chip. - [Button Atlas](https://modusui.kasimkazmi.com/components/button-atlas.md): Twenty-two rectangle buttons and animated CTAs, each drawn from your theme tokens and set in the Modus type. ## Data Display - [Bounce Cards](https://modusui.kasimkazmi.com/components/bounce-cards.md): A stack of playing cards that fan out and straighten out interactively when hovered. - [Masonry Grid](https://modusui.kasimkazmi.com/components/masonry-grid.md): A fully responsive, animated masonry layout powered by Framer Motion. - [Animated List](https://modusui.kasimkazmi.com/components/animated-list.md): A scrollable, animated list component with keyboard navigation, hover states, and smooth entrance physics. - [Kinetic Carousel](https://modusui.kasimkazmi.com/components/kinetic-carousel.md): A modern, physics-based carousel that supports dragging, infinite looping, and 3D perspective transitions. - [Expandable Showcase](https://modusui.kasimkazmi.com/components/expandable-showcase.md): A horizontal or vertical list of items where hovering or clicking expands one item while shrinking others. - [Focus Card](https://modusui.kasimkazmi.com/components/focus-card.md): A card with a subtle radial gradient spotlight that follows the user's cursor. - [Rotating Card](https://modusui.kasimkazmi.com/components/rotating-card.md): A 3D-style rotating card that responds to user hover with smooth perspective shifts. - [Tilt Card](https://modusui.kasimkazmi.com/components/tilt-card.md): A 3D parallax tilt card featuring smooth physics-based rotations on hover, collapsible tags and descriptions, and custom CTA buttons. - [Pace Dial](https://modusui.kasimkazmi.com/components/pace-dial.md): A printed instrument dial with a self-test needle sweep, in speedometer, tachometer, boost and power variants. - [Cast Reel](https://modusui.kasimkazmi.com/components/cast-reel.md): A 3D reel of team cards, as a tonal card wave or a contact-sheet filmstrip, coloured by your theme. ## Backgrounds - [Cursor Grid](https://modusui.kasimkazmi.com/components/cursor-grid.md): An interactive canvas grid that reacts to cursor proximity and clicks. - [Waves](https://modusui.kasimkazmi.com/components/waves.md): A reactive background of flowing lines driven by Perlin noise and cursor physics. - [Letter Glitch](https://modusui.kasimkazmi.com/components/letter-glitch.md): A canvas-rendered procedural matrix of glitching letters and symbols. - [Aurora Background](https://modusui.kasimkazmi.com/components/aurora-background.md): A stunning, smooth animated aurora borealis background effect using Framer Motion. - [Circuit Background](https://modusui.kasimkazmi.com/components/circuit-background.md): A highly ambient, canvas-based circuit board animation with interactive mouse ripple effects. - [Orbiting Elements](https://modusui.kasimkazmi.com/components/orbiting-elements.md): Elements that mathematically orbit around a central node in circular paths. - [Gloop Trail](https://modusui.kasimkazmi.com/components/gloop-trail.md): A pooled ink trail that follows the pointer, shading from the theme ink toward muted grey. - [Iron Filings](https://modusui.kasimkazmi.com/components/iron-filings.md): A field of fine ink filings that turn to face the pointer, like iron around a lodestone. - [Grid Motion](https://modusui.kasimkazmi.com/components/grid-motion.md): An interactive, infinite grid that tracks mouse movement with beautiful inertia physics. - [Moon Lattice](https://modusui.kasimkazmi.com/components/moon-lattice.md): A centred WebGL globe of noise-carved points, tilted and threaded with thin rings, inked in the theme colours. - [Resonance Plate](https://modusui.kasimkazmi.com/components/resonance-plate.md): Chladni-style nodal lines shimmering across an off-centre plate, with drifting motes, in theme ink. - [Confluence Lines](https://modusui.kasimkazmi.com/components/confluence-lines.md): A WebGL shader of three light streams meeting on the page background, inked in the theme primary, foreground and muted tones. - [Silk Bands](https://modusui.kasimkazmi.com/components/silk-bands.md): A WebGL background of slow, wide bands printed through a coarse halftone screen in a ramp of the theme colours. - [Mercury Bloom](https://modusui.kasimkazmi.com/components/mercury-bloom.md): A raymarched WebGL blob of liquid metal that reflects your theme and turns toward the pointer. - [Lumen Core](https://modusui.kasimkazmi.com/components/lumen-core.md): A slowly turning sphere of smoke-veined light in a field of drifting motes, shaded from your theme. - [Light Cut](https://modusui.kasimkazmi.com/components/light-cut.md): A WebGL shader of a beam of light cutting through fog, tinted from your theme, with five scenes. - [Stipple Tide](https://modusui.kasimkazmi.com/components/stipple-tide.md): A WebGL stipple of theme-coloured dots that swell in slow rings from the centre and drift with the pointer. - [Tide Line](https://modusui.kasimkazmi.com/components/tide-line.md): A slow band of ink-toned light rolling along the top edge, tinted from your theme. - [Lattice Drift](https://modusui.kasimkazmi.com/components/lattice-drift.md): A WebGL dome of ink points turning slowly under a fading mask, with scattered accent points in the theme primary. - [Star Tunnel](https://modusui.kasimkazmi.com/components/star-tunnel.md): A WebGL flight down a corridor of letters, streaks, keycaps or rings, coloured from a ramp of the theme primary and foreground. - [Plate Wheel](https://modusui.kasimkazmi.com/components/plate-wheel.md): A tilted WebGL wheel of curved, muted image plates turning over a ruled sheet in the theme colours. - [Node Weave](https://modusui.kasimkazmi.com/components/node-weave.md): A canvas weave of hollow knots and solid ink hubs, threaded by hairlines that tighten around the pointer. - [Aperture Bloom](https://modusui.kasimkazmi.com/components/aperture-bloom.md): A centred, noise-warped pair of WebGL rings inked in the theme colours that leans toward the pointer. - [Mosaic Crest](https://modusui.kasimkazmi.com/components/mosaic-crest.md): A swooping band of square tesserae that ripples with travelling waves, laid in the active theme colours. - [Forecast Curve](https://modusui.kasimkazmi.com/components/forecast-curve.md): A rising dotted curve whose dots swell and shimmer in crossing waves, inked in the theme accent. - [Dew Pane](https://modusui.kasimkazmi.com/components/dew-pane.md): Fine beads of dew that grow, merge and run down a pane, drawn in theme ink. - [Glyph Eddy](https://modusui.kasimkazmi.com/components/glyph-eddy.md): Turning rings of set type that crumble into glyph dust under the cursor and gather into the centre on click, drawn in the Modus type and theme ink. - [Phosphor Tube](https://modusui.kasimkazmi.com/components/phosphor-tube.md): A WebGL cathode-ray tube tinted with the theme tokens, showing a film countdown, a typing boot log, a fault report or a pixel-art title screen. - [Bough Study](https://modusui.kasimkazmi.com/components/bough-study.md): A painterly canvas tree that grows, sways and regrows in ink drawn from your theme. - [Sigil Weather](https://modusui.kasimkazmi.com/components/sigil-weather.md): A WebGL2 background where lightning, water or flame plays around a sigil, toned in the active theme colours. - [Mote Beacon](https://modusui.kasimkazmi.com/components/mote-beacon.md): Italic serif letters and marks sinking through the page while accent beams rise, threading themselves to your pointer. - [Ink Rush](https://modusui.kasimkazmi.com/components/ink-rush.md): Rounded ink strokes rushing out of a high vanishing point, in the theme ink and accent. - [Arch Current](https://modusui.kasimkazmi.com/components/arch-current.md): Dotted Bézier paths sweeping in from both edges to a low vanishing point, drawn in your theme's ink. - [Ink Fountain](https://modusui.kasimkazmi.com/components/ink-fountain.md): Primary ink strokes fanning rightward from a source on the left edge. - [Wire Ledger](https://modusui.kasimkazmi.com/components/wire-ledger.md): Drifting points joined by hairlines when they come within reach, inked in your theme. - [Rising Strokes](https://modusui.kasimkazmi.com/components/rising-strokes.md): Fine pen strokes rise through the frame, slowing, lengthening and taking the primary colour as they cross a low horizon. - [Contour Sheet](https://modusui.kasimkazmi.com/components/contour-sheet.md): A WebGL contour map drawn like a survey sheet: ink contours on paper, with every fifth index line in the theme primary. - [Pulse Dust](https://modusui.kasimkazmi.com/components/pulse-dust.md): A grain field on the page's own paper where slow travelling waves swell the dots, with rare accent grains in the theme primary. - [Signal Tiles](https://modusui.kasimkazmi.com/components/signal-tiles.md): Rounded tiles that swell in waves rolling across the frame from one corner, crested in the theme accent. - [Hollow Bloom](https://modusui.kasimkazmi.com/components/hollow-bloom.md): A curved dot matrix that blooms outward from a hollow centre and drifts with the pointer, tinted from the theme primary. - [Grain Swell](https://modusui.kasimkazmi.com/components/grain-swell.md): A flowing field resolved through a dot screen, inked in your theme on the page ground. - [Ridge Strata](https://modusui.kasimkazmi.com/components/ridge-strata.md): Layered ink-wash ridges drifting in parallax, rimmed in the theme's primary. - [Drift Lines](https://modusui.kasimkazmi.com/components/drift-lines.md): Thousands of fine strokes drifting along a simplex-noise current, drawn in your theme's inks. - [Loom Field](https://modusui.kasimkazmi.com/components/loom-field.md): A Three.js Verlet cloth printed with Modus type in the theme ink, plus three dramatic cloths — iridescent silk, a flown folio flag and a washi noren. - [Terrace Dusk](https://modusui.kasimkazmi.com/components/terrace-dusk.md): Fifteen breathing terraces stepping down from left to right, cut from your theme's tones. - [Circuit Heart](https://modusui.kasimkazmi.com/components/circuit-heart.md): An isometric Three.js platform with a pulsing core and orbiting nodes, lit from your theme. - [Lens Drift](https://modusui.kasimkazmi.com/components/lens-drift.md): Soft noise-driven bands of theme colour drifting behind a trail of glass lenses that follow the pointer. - [Thread Swell](https://modusui.kasimkazmi.com/components/thread-swell.md): A curtain of Three.js threads that swell in rolling waves, inked in the active theme colours. - [Relief Mesh](https://modusui.kasimkazmi.com/components/relief-mesh.md): A slowly turning mesh globe of pulsing nodes joined by fine links, inked in theme tokens and fading into the page background. - [Dust Veil](https://modusui.kasimkazmi.com/components/dust-veil.md): A drifting fbm veil of dust in your theme's tones that leans toward the pointer. - [Ribbon Light](https://modusui.kasimkazmi.com/components/ribbon-light.md): Diagonal ribbons of ink-toned light drifting over the page, tinted from your theme. - [Ash Spiral](https://modusui.kasimkazmi.com/components/ash-spiral.md): A drifting spiral of 12,000 sparks drawn in your theme's ink, set off-centre. - [Dot Whirl](https://modusui.kasimkazmi.com/components/dot-whirl.md): A leaning funnel of 9,500 dots wound by two spiral guides, drawn in your theme's ink. - [Pond Glide](https://modusui.kasimkazmi.com/components/pond-glide.md): A draggable stack of three cards over a slow theme-tinted swirl, with pixel-tile reveals. - [Dot Screen](https://modusui.kasimkazmi.com/components/dot-screen.md): A printed dot screen whose rings roll in from the lower-left corner, inked in theme colours. - [Aurora Veil](https://modusui.kasimkazmi.com/components/aurora-veil.md): Layered aurora curtains drifting over a night sky with soft noise, film grain and a vignette. - [Silk Mesh](https://modusui.kasimkazmi.com/components/silk-mesh.md): A soft flowing mesh gradient in your theme colours with grain and noise texture. - [Liquid Chrome Orb](https://modusui.kasimkazmi.com/components/liquid-chrome-orb.md): A molten liquid-metal torus, sphere or blob floating in a lit studio. - [Plasma Glow](https://modusui.kasimkazmi.com/components/plasma-glow.md): Glowing plasma with bloom, chromatic aberration and a vignette. - [Nebula Orb](https://modusui.kasimkazmi.com/components/nebula-orb.md): A volumetric gas nebula sealed in a glass sphere over a twinkling star field. - [Godray Haze](https://modusui.kasimkazmi.com/components/godray-haze.md): Volumetric light rays through a hazy gradient sky. - [Ink Canvas](https://modusui.kasimkazmi.com/components/ink-canvas.md): Drag to paint swirling ribbons of ink through a live fluid simulation. - [Holo Foil](https://modusui.kasimkazmi.com/components/holo-foil.md): An iridescent holographic foil card with glitter and rainbow sheen. - [Crystal Cells](https://modusui.kasimkazmi.com/components/crystal-cells.md): A faceted crystal lens refracting a shifting Voronoi cell field. - [Fluted Gradient](https://modusui.kasimkazmi.com/components/fluted-gradient.md): A flowing silk gradient seen through ribbed fluted glass. - [Ripple Pool](https://modusui.kasimkazmi.com/components/ripple-pool.md): A swirling gradient that ripples like water under the cursor. - [ASCII Flow](https://modusui.kasimkazmi.com/components/ascii-flow.md): Flowing fractal noise rendered as ASCII characters in your theme colours. ## Three.js - [Herbarium Study](https://modusui.kasimkazmi.com/components/herbarium-study.md): An ink-and-paper botanical plate in Three.js where line-drawn ferns and seed heads grow while seed fluff drifts past. - [Winter Pagoda](https://modusui.kasimkazmi.com/components/winter-pagoda.md): A five-tier pagoda on a snowy hillside among pines, in paper-white daylight or under a pale winter moon, coloured from your theme. - [Survey Relief](https://modusui.kasimkazmi.com/components/survey-relief.md): A procedural topographic relief model turning on a survey table, with contour bands in your theme colours. - [Form Foundry](https://modusui.kasimkazmi.com/components/form-foundry.md): An abstract architectural form assembles itself block by block on a studio plinth, in daylight or at dusk. - [Specimen Desk](https://modusui.kasimkazmi.com/components/specimen-desk.md): A Three.js desk study with a pinned fan of Modus type specimen cards, paper-white by day and lamplit by night. ## Typography - [Folio Title](https://modusui.kasimkazmi.com/components/folio-title.md): A journal index whose italic serif titles decode from scrambled glyphs, set in your theme. - [Gravity Text Swap](https://modusui.kasimkazmi.com/components/gravity-text-swap.md): Text that detaches and falls away with simulated gravity when swapped. - [Flip Words](https://modusui.kasimkazmi.com/components/flip-words.md): A sleek text rotator that flips individual words sequentially using 3D perspective. - [Static Type](https://modusui.kasimkazmi.com/components/static-type.md): Serif display type that tears into horizontal static, harder when you hover it. - [Scroll Velocity](https://modusui.kasimkazmi.com/components/scroll-velocity.md): A marque text effect whose speed scales dynamically based on scroll velocity. - [Text Pressure](https://modusui.kasimkazmi.com/components/text-pressure.md): A responsive variable-font typography effect that reacts fluidly to the cursor's proximity. - [True Focus](https://modusui.kasimkazmi.com/components/true-focus.md): A typographic animation that moves a camera-like focus frame between words while blurring the rest. - [Gradient Text](https://modusui.kasimkazmi.com/components/gradient-text.md): Seamlessly looping animated gradient text that can optionally wrap its borders. - [Blur Text](https://modusui.kasimkazmi.com/components/blur-text.md): Smoothly unblurs text characters or words as they enter the viewport. - [Split Text](https://modusui.kasimkazmi.com/components/split-text.md): Staggered text animations splitting by characters, words, or lines. - [Decrypted Text](https://modusui.kasimkazmi.com/components/decrypted-text.md): A hacker-style text decryption matrix effect that scrambles text before revealing it. - [Shimmer Text](https://modusui.kasimkazmi.com/components/shimmer-text.md): Animated text that shimmers with a flowing gradient effect. - [Floating Text](https://modusui.kasimkazmi.com/components/floating-text.md): A text component that floats and drifts subtly, creating an editorial, high-end feel. - [Word Swarm](https://modusui.kasimkazmi.com/components/word-swarm.md): A gooey swarm of cells drifts over serif type and turns each word it touches to ink and italic. - [Orb Lettering](https://modusui.kasimkazmi.com/components/orb-lettering.md): A canvas sphere whose land is set in italic serif type along the latitudes, inked in your theme. - [Contour Stream](https://modusui.kasimkazmi.com/components/contour-stream.md): A sentence in italic serif running around the contour of an SVG mark, drawn on canvas. - [Shifting Swarm](https://modusui.kasimkazmi.com/components/shifting-swarm.md): A swarm of serif glyphs filling one SVG mark that turns into another on click. - [Drape Type](https://modusui.kasimkazmi.com/components/drape-type.md): A verlet drape woven from italic serif letters in your theme's ink. Grab it and pull. - [Glyph Surge](https://modusui.kasimkazmi.com/components/glyph-surge.md): A quiet field of mono glyphs where every click sends a surge of weight and colour through the type. - [Sphere Sketch](https://modusui.kasimkazmi.com/components/sphere-sketch.md): Italic serif letters wrapped around a turning globe; click to shake some loose. - [Opening Mark](https://modusui.kasimkazmi.com/components/opening-mark.md): An opening title in the theme's italic serif that assembles letter by letter, then holds and loops. - [Dust Signature](https://modusui.kasimkazmi.com/components/dust-signature.md): A word set in the theme's italic serif, drawn from a grid of dots and squares lit by drifting bands. - [Echo Letters](https://modusui.kasimkazmi.com/components/echo-letters.md): A serif wordmark between two offset equaliser discs, one pulsing in your primary colour and one cut from a plate. - [Tubelight](https://modusui.kasimkazmi.com/components/tubelight.md): Serif neon lettering on canvas, lit in the theme colour, that breathes and flickers one letter. - [Salon Banner](https://modusui.kasimkazmi.com/components/salon-banner.md): An oversized serif headline ringed by twelve plates mixed from your theme, orbiting while hovered. ## Sections - [Folio Opening](https://modusui.kasimkazmi.com/components/folio-opening.md): A two-column opening spread with a serif headline, a ruled lede and an inked device illustration in your theme colours. - [Dispatch Colophon](https://modusui.kasimkazmi.com/components/dispatch-colophon.md): An editorial footer with an outlined serif sign-off, a ruled sign-up line and mono legal links, drawn from your theme. - [Curved Carousel Hero](https://modusui.kasimkazmi.com/components/curved-carousel-hero.md): A landing hero with a curved, draggable carousel of video cards that drifts like the inside of a cylinder. ## Components - [Animated Beam](https://modusui.kasimkazmi.com/components/animated-beam.md): A dynamic SVG beam animation that traces paths between elements. - [Border Beam](https://modusui.kasimkazmi.com/components/border-beam.md): A glowing, animated gradient beam that endlessly traces the perimeter. - [Bento Grid](https://modusui.kasimkazmi.com/components/bento-grid.md): A highly structured, responsive layout primitive for creating asymmetric grid layouts. - [Erosion Plate](https://modusui.kasimkazmi.com/components/erosion-plate.md): A matted image plate that erodes under turbulence as the cursor moves. - [Scratch to Reveal](https://modusui.kasimkazmi.com/components/scratch-to-reveal.md): An interactive canvas component that lets users scratch off an overlay to reveal the content underneath. - [Stack](https://modusui.kasimkazmi.com/components/stack.md): A 3D interactive stack of cards that can be dragged and rearranged. - [Star Border](https://modusui.kasimkazmi.com/components/star-border.md): A glowing button border animation that circles the perimeter. - [Tilted Card](https://modusui.kasimkazmi.com/components/tilted-card.md): A 3D interactive card that physically tilts and pans relative to the cursor position. - [Pixel Card](https://modusui.kasimkazmi.com/components/pixel-card.md): A card that reveals a pixelated, shimmering canvas pattern on hover. - [Click Spark](https://modusui.kasimkazmi.com/components/click-spark.md): A physics-based canvas effect that bursts colorful sparks wherever the user clicks. - [Spotlight Card](https://modusui.kasimkazmi.com/components/spotlight-card.md): A card with a subtle spotlight gradient that follows the user's mouse cursor on hover. - [Border Glow](https://modusui.kasimkazmi.com/components/border-glow.md): An interactive card wrapper with an ambient glowing mesh gradient that mathematically tracks the mouse. - [Comparison Slider](https://modusui.kasimkazmi.com/components/comparison-slider.md): Two layers stacked, with a divider the user drags to compare them. - [Dock](https://modusui.kasimkazmi.com/components/dock.md): A highly interactive macOS-style dock that magnifies items on hover. - [Progress Ring](https://modusui.kasimkazmi.com/components/progress-ring.md): A circular ring that smoothly sweeps to a value, with a live numeric readout. - [Marquee](https://modusui.kasimkazmi.com/components/marquee.md): A seamless, infinitely scrolling row of elements. - [Mirror Plate](https://modusui.kasimkazmi.com/components/mirror-plate.md): A member pass whose surface mirrors the webcam through a metallic glass filter. - [Fluid Glass](https://modusui.kasimkazmi.com/components/fluid-glass.md): TODO one sentence on what Fluid Glass does. - [Dome Gallery](https://modusui.kasimkazmi.com/components/dome-gallery.md): An immersive 3D gallery dome. - [Portrait Wall](https://modusui.kasimkazmi.com/components/portrait-wall.md): A wall of paper-toned portrait cards where colour returns only under the pointer. - [Chime Switch](https://modusui.kasimkazmi.com/components/chime-switch.md): A square-shouldered subscribe switch whose bell chimes as it flips to the theme ink. - [Root Nav](https://modusui.kasimkazmi.com/components/root-nav.md): A docs-style navigation tree whose hairline roots draw out to each open chapter. - [Run Tag](https://modusui.kasimkazmi.com/components/run-tag.md): A monospace run tag that fills with theme ink while a command runs, then settles to done or retry. - [Cipher Reel](https://modusui.kasimkazmi.com/components/cipher-reel.md): A one-time code field of paper slots with serif numerals that drop in and seal on success. - [Orbit Knob](https://modusui.kasimkazmi.com/components/orbit-knob.md): A flickable rotary knob with a tracer tail in theme ink and a serif readout. - [Coy Key](https://modusui.kasimkazmi.com/components/coy-key.md): A dashed mono key that edges away from the cursor until it relents. - [Turn Leaf](https://modusui.kasimkazmi.com/components/turn-leaf.md): A paper leaf you drag, click or key-press to turn over, with a soft tilt and sheen. - [Paper Stack](https://modusui.kasimkazmi.com/components/paper-stack.md): A paper sleeve that fans out draggable note slips when opened. - [Cinder Trigger](https://modusui.kasimkazmi.com/components/cinder-trigger.md): A commit button that burns down an undo window along its edge before it settles. - [Tray Picker](https://modusui.kasimkazmi.com/components/tray-picker.md): A compact select whose tray slides open from its chip with serif options. - [Steady Press](https://modusui.kasimkazmi.com/components/steady-press.md): A press-and-hold confirm button that fills from below with a wavy crest. - [Bloom Choice](https://modusui.kasimkazmi.com/components/bloom-choice.md): A row of mono chips where the chosen one swells with a springy pop. - [Tile Wait](https://modusui.kasimkazmi.com/components/tile-wait.md): A dot-grid progress indicator with a ticking timer and a mono caption. - [Folio Crush](https://modusui.kasimkazmi.com/components/folio-crush.md): A WebGL print you can hold to crush into a ball and drag around. - [Glance Score](https://modusui.kasimkazmi.com/components/glance-score.md): A rating row whose icons lift as you hover, with a mono label tip. - [Query Well](https://modusui.kasimkazmi.com/components/query-well.md): A composer for AI requests with sources, commands, model and effort menus. - [Beat Mark](https://modusui.kasimkazmi.com/components/beat-mark.md): A like button whose icon bursts and whose counter rolls on press. - [Polish Pane](https://modusui.kasimkazmi.com/components/polish-pane.md): A frame that resolves an image from pixel mosaic to sharp as generation progresses. - [Stretch Toggle](https://modusui.kasimkazmi.com/components/stretch-toggle.md): A segmented control whose thumb stretches and squashes as it travels. - [Drag Number](https://modusui.kasimkazmi.com/components/drag-number.md): A compact number chip you scrub sideways to change, with a rubber-band edge and a delta tag. - [Paper Mill](https://modusui.kasimkazmi.com/components/paper-mill.md): A list of cards you drag into a slot that cuts them into falling strips. - [Swipe Confirm](https://modusui.kasimkazmi.com/components/swipe-confirm.md): A drag-to-confirm track for actions that should not happen by accident. - [Pull Launch](https://modusui.kasimkazmi.com/components/pull-launch.md): A send button you can pull back like a slingshot and release. - [Tide Meter](https://modusui.kasimkazmi.com/components/tide-meter.md): A vertical level meter whose fill sloshes as it moves. - [Tally Box](https://modusui.kasimkazmi.com/components/tally-box.md): A checkbox whose box springs full and strikes through its label. - [Press Toggle](https://modusui.kasimkazmi.com/components/press-toggle.md): A switch whose thumb squashes and stretches as you drag or tap it. - [State Glyph](https://modusui.kasimkazmi.com/components/state-glyph.md): A small ring that shows pending, running, done, failed or cancelled with drawn transitions. - [Ledger Row](https://modusui.kasimkazmi.com/components/glide-ledger-row.md): A list row that glides aside on a swipe to reveal a drawer of actions, set like an entry in a printed ledger. - [Flick Notice](https://modusui.kasimkazmi.com/components/flick-notice.md): A card-stock notice that slides in, burns down a thin primary fuse and flicks away under a swipe. - [Stub Pass](https://modusui.kasimkazmi.com/components/stub-pass.md): A perforated card with a primary-ink stub you can drag and tear clean off. - [Ink Murmur](https://modusui.kasimkazmi.com/components/ink-murmur.md): A mono status line that breathes while work is in progress and settles into a timed summary. - [Hum Capsule](https://modusui.kasimkazmi.com/components/hum-capsule.md): A dictation button that opens into a capsule with a live level meter and a running clock. - [Rouse Track](https://modusui.kasimkazmi.com/components/rouse-track.md): A range input drawn as a field of bars that rise into a crest around the thumb. - [Ember Hint](https://modusui.kasimkazmi.com/components/ember-hint.md): An inverted ink tooltip that stays warm, so moving between triggers glides from one label to the next. - [Emblem Globe](https://modusui.kasimkazmi.com/components/emblem-globe.md): A tiny dot-matrix globe that draws 23 marks in the theme ink, for a status pill or an avatar slot. - [Vitals Board](https://modusui.kasimkazmi.com/components/vitals-board.md): An isometric ink-line readout in your theme colours, with floating node cubes, layered planes or a flowing mesh. - [Tactile Switch](https://modusui.kasimkazmi.com/components/tactile-switch.md): One switch in four treatments drawn from the Modus tokens: a flat sprung switch, a pressed-paper tactile slider, Three.js glass and a shader-lit capsule. - [Draft Form](https://modusui.kasimkazmi.com/components/draft-form.md): A turning wireframe solid inked on a drafting guide, in your theme's colours. - [Ember Tag](https://modusui.kasimkazmi.com/components/ember-tag.md): A lanyard tag sketched in thousands of theme-ink embers, standing in light slanted rain above a waterline. - [Draft Folio](https://modusui.kasimkazmi.com/components/draft-folio.md): An open folio in theme ink whose leaves curl as you drag them, with a primary-tinted loupe you can slide across the page. - [Signal Relay](https://modusui.kasimkazmi.com/components/signal-relay.md): A ticked progress readout in your theme colours, with a glowing percentage and press-room phase labels. - [Intaglio Deed](https://modusui.kasimkazmi.com/components/intaglio-deed.md): A guilloche intaglio deed in theme ink whose rosette cycles through four lathe cams. ## React Native · Inputs - [Pin Pad](https://modusui.kasimkazmi.com/components/pin-pad.md): A React Native numeric keypad for PINs and passcodes, with popping dots, a shake on a wrong PIN and spoken progress. - [Slide Switch](https://modusui.kasimkazmi.com/components/slide-switch.md): A React Native switch whose thumb can be dragged as well as tapped, stretching while held and settling on the nearer side. - [Star Rating](https://modusui.kasimkazmi.com/components/star-rating.md): A React Native star rating you can tap or scrub, with half stars, popping fills and adjustable screen reader support. - [Value Slider](https://modusui.kasimkazmi.com/components/value-slider.md): A React Native slider with a value bubble, step snapping, tap-to-jump and adjustable screen reader support. - [Expand Search](https://modusui.kasimkazmi.com/components/expand-search.md): A React Native search field that starts as a round button and springs open to full width, with a clear button and a Cancel that folds it away. - [Calendar Strip](https://modusui.kasimkazmi.com/components/calendar-strip.md): A React Native horizontal strip of days with a pill that glides to the selected day, event dots, and full dates read out to screen readers. - [Chip Input](https://modusui.kasimkazmi.com/components/chip-input.md): A React Native tag input where Enter or a comma turns text into chips that pop in, wrap, and can each be removed. - [Choice Chips](https://modusui.kasimkazmi.com/components/choice-chips.md): React Native chips for one choice or several, blending to the selected color while a check mark opens in front of the label. - [Hold Stepper](https://modusui.kasimkazmi.com/components/hold-stepper.md): A React Native plus and minus stepper that repeats while held, speeding up the longer you hold, with the value sliding in from the direction it moved. - [Code Boxes](https://modusui.kasimkazmi.com/components/code-boxes.md): A React Native one-time-code input drawn as separate boxes, with paste, SMS autofill, a blinking caret, a pop for each digit and a shake on error. - [Hue Picker](https://modusui.kasimkazmi.com/components/hue-picker.md): A React Native colour picker built from plain Views, with a hue strip, a lightness strip for the chosen hue, one-tap swatches and a live preview. - [Wheel Picker](https://modusui.kasimkazmi.com/components/wheel-picker.md): A React Native scrolling wheel that snaps rows to the middle, fades them with distance, and settles reliably even when a mouse wheel stops. - [Range Slider](https://modusui.kasimkazmi.com/components/range-slider.md): A React Native slider with two thumbs for choosing a range, where the thumbs never cross, values snap to a step, and each thumb is adjustable for screen readers. - [Tick Box](https://modusui.kasimkazmi.com/components/tick-box.md): A React Native checkbox that pops its fill in on a spring, grows its tick, and has a mixed state for select-all boxes. - [Suggest Input](https://modusui.kasimkazmi.com/components/suggest-input.md): A React Native text field with a suggestion list that narrows as you type, bolds what matched, and works with arrow keys, Enter and Escape on the web. - [Float Field](https://modusui.kasimkazmi.com/components/float-field.md): A React Native text field whose label floats up from inside the box, with an animated focus border, an error shake, a clear button and a Show toggle for passwords. - [Month Grid](https://modusui.kasimkazmi.com/components/month-grid.md): A React Native month calendar with a pill that glides to the selected day, swipe to change month, event dots, and local dates that never shift across time zones. - [Composer Bar](https://modusui.kasimkazmi.com/components/composer-bar.md): A React Native message composer whose field grows line by line, whose microphone turns into a send arrow as you type, and which sends on Enter on the web. - [Radio Group](https://modusui.kasimkazmi.com/components/radio-group.md): A React Native radio group drawn as cards with a springing dot, a single tab stop and arrow-key navigation on the web. - [Mode Toggle](https://modusui.kasimkazmi.com/components/mode-toggle.md): A React Native light and dark switch where the sun slides across, turns into a moon and the sky fills with stars. - [Select Grid](https://modusui.kasimkazmi.com/components/select-grid.md): A React Native multi-select grid of cards where a tick springs in, with an optional limit that dims the rest. - [Card Field](https://modusui.kasimkazmi.com/components/card-field.md): A React Native payment card input that groups the number, names the brand, adds the expiry slash and shakes on a failed check. - [Step Slider](https://modusui.kasimkazmi.com/components/step-slider.md): A React Native slider with fixed stops whose thumb follows the finger and springs onto the nearest label. - [Cart Quantity](https://modusui.kasimkazmi.com/components/cart-quantity.md): A React Native quantity picker whose minus turns into a bin at one so the same tap removes the item. - [Password Field](https://modusui.kasimkazmi.com/components/password-field.md): A React Native password input with a Show and Hide button and a border that eases to the accent colour on focus. - [Mood Picker](https://modusui.kasimkazmi.com/components/mood-picker.md): A React Native row of faces for rating how something felt, where the chosen face swells with a bounce and shows its name. - [Swatch Picker](https://modusui.kasimkazmi.com/components/swatch-picker.md): A React Native colour picker of circles where the chosen one gets a ring that springs out and a tick inside. - [Select Menu](https://modusui.kasimkazmi.com/components/select-menu.md): A React Native dropdown that opens in place, pushing content down instead of floating, with a turning chevron. ## React Native · Buttons - [Fan Menu](https://modusui.kasimkazmi.com/components/fan-menu.md): A React Native floating button that fans its actions out along an arc, springing them out one after another. - [Slide Confirm](https://modusui.kasimkazmi.com/components/slide-confirm.md): A React Native slide-to-confirm control. Drag the thumb to the end to confirm, release early to spring back, and confirm with a screen reader or keyboard action. - [Reaction Bar](https://modusui.kasimkazmi.com/components/reaction-bar.md): A React Native row of emoji reactions whose emoji pops and wobbles when chosen, with counts that roll to their new number. - [Action Button](https://modusui.kasimkazmi.com/components/action-button.md): A React Native button that carries its own progress, turning its label into a spinner, then a tick or a cross with a shake, without ever changing size. - [Resend Button](https://modusui.kasimkazmi.com/components/resend-button.md): A React Native resend code link that waits out a countdown, pulses when ready and starts over after each press. - [Extended FAB](https://modusui.kasimkazmi.com/components/extended-fab.md): A React Native floating action button with a label that slides away to leave a circle when collapsed. - [Like Button](https://modusui.kasimkazmi.com/components/like-button.md): A React Native heart button that pops on like with a ring of sparks flying outward, and shrinks quietly when unliked. - [Hold Confirm](https://modusui.kasimkazmi.com/components/hold-confirm.md): A React Native press and hold button for risky actions that fills while held and drains back if released early. ## React Native · Navigation - [Glide Segments](https://modusui.kasimkazmi.com/components/glide-segments.md): A React Native segmented control whose thumb glides between options on a spring and stretches as it travels. - [Bubble Tab Bar](https://modusui.kasimkazmi.com/components/bubble-tab-bar.md): A React Native bottom tab bar where a rounded pill slides behind the selected tab and the selected tab opens to show its label. - [Intro Pager](https://modusui.kasimkazmi.com/components/intro-pager.md): A swipeable React Native onboarding pager where the art drifts against the text, the dots stretch, and Next turns into the final action. - [Step Tracker](https://modusui.kasimkazmi.com/components/step-tracker.md): A React Native progress tracker built from plain Views, with popping checks, a pulsing current step and connectors that fill as you advance. - [Tab Pager](https://modusui.kasimkazmi.com/components/tab-pager.md): A React Native tab header over swipeable pages, with an underline that follows your finger and labels that blend as their page arrives. - [Side Drawer](https://modusui.kasimkazmi.com/components/side-drawer.md): A React Native panel that slides in from the left or right edge, follows your finger as you drag it shut, and can be pulled open by a swipe from the screen edge. - [Page Dots](https://modusui.kasimkazmi.com/components/page-dots.md): React Native pager dots where the current page stretches into a pill and every dot can be tapped to jump. ## React Native · Overlays - [Snap Sheet](https://modusui.kasimkazmi.com/components/snap-sheet.md): A React Native bottom sheet with snap points, flick momentum, dismiss-by-drag and an adjustable handle for screen readers. - [Long Press Menu](https://modusui.kasimkazmi.com/components/long-press-menu.md): A React Native menu that springs out from a trigger you press and hold, with every item also exposed as an accessibility action. - [Action Tray](https://modusui.kasimkazmi.com/components/action-tray.md): A React Native bottom action list that slides up over a dimmed backdrop, with grouped actions, a separate cancel button and drag to dismiss. - [Confirm Dialog](https://modusui.kasimkazmi.com/components/confirm-dialog.md): A React Native alert dialog that pops in on a spring, starts focus on Cancel so Enter never confirms by accident, and locks while work is under way. - [Tip Popover](https://modusui.kasimkazmi.com/components/tip-popover.md): A React Native tip that points at its trigger, springs out from the arrow and closes on an outside tap or Escape. ## React Native · Feedback - [Flick Toast](https://modusui.kasimkazmi.com/components/flick-toast.md): A React Native stack of toasts you flick away, with a countdown line that waits while you hold, older toasts scaled back, and screen reader dismiss. - [Notice Banner](https://modusui.kasimkazmi.com/components/notice-banner.md): A React Native inline alert in four tones that slides in, collapses its height on the way out, and can be swiped away or closed with a button. - [Count Badge](https://modusui.kasimkazmi.com/components/count-badge.md): A React Native notification count that sits on an icon's corner, pops in when it appears, pulses as the number changes, and reads out with its label. - [Live Dot](https://modusui.kasimkazmi.com/components/live-dot.md): A React Native presence and broadcast indicator whose live or online dot sends a soft ring outward on a loop, and whose status is always spoken as well as coloured. - [Pull Refresh](https://modusui.kasimkazmi.com/components/pull-refresh.md): A React Native scrolling list you refresh by pulling down from the top, with resistance, a turning arrow, a holding spinner, and a Refresh action for screen readers. - [Empty State](https://modusui.kasimkazmi.com/components/empty-state.md): A React Native empty list placeholder with a floating badge, a message and an optional action button. - [Undo Snackbar](https://modusui.kasimkazmi.com/components/undo-snackbar.md): A React Native snackbar with an Undo button that slides up, shows a draining timer line and closes itself. ## React Native · Progress - [Shimmer Block](https://modusui.kasimkazmi.com/components/shimmer-block.md): A React Native loading placeholder with a soft highlight that sweeps across it, stacked lines that shimmer together, and one spoken "Loading" for the whole block. - [Typing Dots](https://modusui.kasimkazmi.com/components/typing-dots.md): A React Native chat typing indicator whose dots bounce in a staggered wave, with a bubble behind them and a single spoken label. - [Stripe Progress](https://modusui.kasimkazmi.com/components/stripe-progress.md): A React Native progress bar whose fill grows on a spring and whose diagonal stripes drift, with an indeterminate mode and no gradient packages. - [Ring Meter](https://modusui.kasimkazmi.com/components/ring-meter.md): A React Native circular progress ring drawn with plain views and no SVG package, that sweeps smoothly all the way round and holds any content in its middle. - [Story Bars](https://modusui.kasimkazmi.com/components/story-bars.md): The React Native row of segmented progress bars from a story viewer, which fills each story in turn, holds in place when paused, and announces its position. - [Spin Loader](https://modusui.kasimkazmi.com/components/spin-loader.md): Four React Native loading spinners in one component, a ring, bouncing dots, rising bars and a spreading pulse, that stand still when motion is reduced. - [Wave Bars](https://modusui.kasimkazmi.com/components/wave-bars.md): A React Native audio waveform made of bars that swell out of step while playing and tint as they are played. - [Password Meter](https://modusui.kasimkazmi.com/components/password-meter.md): A React Native strength meter whose four bars fill and change colour as a password gets stronger. - [Countdown Timer](https://modusui.kasimkazmi.com/components/countdown-timer.md): A React Native minutes and seconds countdown with a draining bar that pauses, resumes and fires once when time is up. - [Gauge Meter](https://modusui.kasimkazmi.com/components/gauge-meter.md): A React Native half-circle gauge whose arc springs round to the value, built from clipped Views with no SVG package. - [Battery Meter](https://modusui.kasimkazmi.com/components/battery-meter.md): A React Native battery gauge whose fill slides to the level, turns red when low and pulses a bolt while charging. ## React Native · Data - [Swipe Actions](https://modusui.kasimkazmi.com/components/swipe-actions.md): A React Native list row that slides left to reveal action buttons, with rubber-banding, flick detection and screen reader actions. - [Swipe Deck](https://modusui.kasimkazmi.com/components/swipe-deck.md): A React Native card stack swiped away one at a time, with tilt, a rising next card, like and pass stamps, and screen reader actions. - [Fold Panel](https://modusui.kasimkazmi.com/components/fold-panel.md): A React Native accordion whose panels grow to the measured height of their content, with a turning chevron and screen reader state. - [Snap Carousel](https://modusui.kasimkazmi.com/components/snap-carousel.md): A React Native carousel that settles on one card at a time, with neighbors that shrink and fade and dots that stretch to follow. - [Parallax Header](https://modusui.kasimkazmi.com/components/parallax-header.md): A React Native scroll view whose hero stretches on overscroll, drifts at half speed, and collapses into a compact title bar. - [Roll Number](https://modusui.kasimkazmi.com/components/roll-number.md): A React Native odometer whose digits roll to their new value, last digit first, with separators, decimals and negative numbers. - [Drag List](https://modusui.kasimkazmi.com/components/drag-list.md): A React Native reorderable list where you drag a grip and the other rows spring out of the way, with move actions for screen readers. - [Marquee Ticker](https://modusui.kasimkazmi.com/components/marquee-ticker.md): A React Native endless scrolling strip with a seamless loop, either direction, press and hold to pause, and a still fallback for reduced motion. - [Avatar Stack](https://modusui.kasimkazmi.com/components/avatar-stack.md): A React Native stack of overlapping avatars that spreads apart on a press, collapses extras into a plus count, and reads out who is in it. - [Expand Card](https://modusui.kasimkazmi.com/components/expand-card.md): A React Native card that grows from a compact row into a full detail view, with its picture swelling from a thumbnail to a banner and its details fading in. - [Chat Bubble](https://modusui.kasimkazmi.com/components/chat-bubble.md): A React Native chat message that springs in from its own corner, shows delivery ticks that turn blue when read, and becomes a retry button when it fails. - [Setting List](https://modusui.kasimkazmi.com/components/setting-list.md): A React Native grouped settings list with icon tiles, chevrons, values and animated switches, in the style of a phone's own settings screen. - [Data Table](https://modusui.kasimkazmi.com/components/data-table.md): A React Native table with sortable columns, a header that stays put while rows scroll and sideways scrolling for wide columns. - [Timeline List](https://modusui.kasimkazmi.com/components/timeline-list.md): A React Native vertical timeline with completed, current and upcoming steps and a pulsing dot on the step in progress. - [Rating Histogram](https://modusui.kasimkazmi.com/components/rating-histogram.md): A React Native review breakdown with one animated bar per star level and the average beside them. - [Contact Index](https://modusui.kasimkazmi.com/components/contact-index.md): A React Native alphabetical list with a draggable letter rail that jumps between sections like a phone's contacts. - [Poll Bars](https://modusui.kasimkazmi.com/components/poll-bars.md): A React Native poll whose options turn into animated result bars with percentages once a vote is cast. - [Expandable Text](https://modusui.kasimkazmi.com/components/expandable-text.md): A React Native paragraph that clamps to a few lines with a Read more link that grows the box to the full text. - [Task Checklist](https://modusui.kasimkazmi.com/components/task-checklist.md): A React Native to-do list with a progress bar, where ticking a task draws a strike-through line across its text. - [Spark Bars](https://modusui.kasimkazmi.com/components/spark-bars.md): A tiny React Native bar chart for trends inside a card, whose bars grow up one after another and resize on change. - [Compare Slider](https://modusui.kasimkazmi.com/components/compare-slider.md): A React Native before and after slider where dragging a handle reveals more of one side, steppable by screen readers. ## Hooks - [useColorScheme](https://modusui.kasimkazmi.com/components/use-color-scheme.md): A React Native hook that returns the system colour scheme as light or dark, never null. - [useKeyboardHeight](https://modusui.kasimkazmi.com/components/use-keyboard-height.md): A React Native hook that returns the on-screen keyboard height, or 0 while it is hidden. - [useHaptics](https://modusui.kasimkazmi.com/components/use-haptics.md): A React Native hook for touch feedback with tap, success, warning and error patterns that you can switch off. - [useReduceMotion](https://modusui.kasimkazmi.com/components/use-reduce-motion.md): A React Native hook that reports whether the system asks to reduce motion and follows later changes. - [useDebouncedValue](https://modusui.kasimkazmi.com/components/use-debounced-value.md): A React Native hook that returns a copy of a value which only updates after it stops changing. ## Providers - [ModeProvider](https://modusui.kasimkazmi.com/components/mode-provider.md): A React Native provider that holds the light, dark or system choice and exposes it through a useMode hook. - [ThemeProvider](https://modusui.kasimkazmi.com/components/theme-provider.md): A React Native provider that supplies one colour palette to the tree through a useTheme hook, with per-colour overrides. ## Theme - [Colors](https://modusui.kasimkazmi.com/components/theme-colors.md): Light and dark colour palettes for React Native, named by role, with a helper that adds transparency to any colour. - [Globals](https://modusui.kasimkazmi.com/components/theme-globals.md): Shared React Native design tokens for spacing, corner radius, type sizes, font weights and shadows.