Kinetik UI

Every item as a shadcn-compatible JSON file with its full source. The Kinetik CLI and the MCP server read these files, and shadcn can install any of them directly.

49 components4 screen templates7 shared
npx kinetik-ui add glint-card
npx shadcn@latest add https://kinetik-ui.dev/r/glint-card.json

Components 49

Install into components/kinetik/.

  • Aurora Veilaurora-veilBackground

    A slow, flowing aurora drawn by a fragment shader, for screen and hero backgrounds.

    Useskinetik-tokenskinetik-motionkinetik-clockkinetik-shaders
    2 files · v1.0.0JSON
  • Grain Driftgrain-driftBackground

    A drifting four-colour mesh gradient under moving film grain, drawn by a shader.

    Useskinetik-tokenskinetik-motionkinetik-clockkinetik-shaders
    2 files · v1.0.0JSON
  • Ripple Fieldripple-fieldBackground

    A dot-grid surface that ripples outward from every touch, drawn by a shader.

    Useskinetik-tokenskinetik-motionkinetik-hapticskinetik-clockkinetik-shaders
    2 files · v1.0.0JSON
  • Aperture Cardaperture-cardCard

    A card closed by a camera-like iris whose blades turn open to reveal the content.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • DeckfalldeckfallCard

    A stack of cards swiped away one at a time, with the cards behind rising into place.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Drift Marqueedrift-marqueeCard

    An endless row that drifts on its own; drag it to scrub, fling it, and the items lean into the speed.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Expand Cardexpand-cardCard

    A row that opens into a card: the thumbnail grows into a wide picture and the details rise in beneath it.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Fan Stackfan-stackCard

    A loose pile of pictures that fans out like a hand of cards; tap one to lift it out of the fan.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Flip Ledgerflip-ledgerCard

    A two-sided card that turns over in 3D, sized to the taller of its faces.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Fold Panelfold-panelCard

    A panel that unfolds in place: the body springs to its measured height and drifts in behind it.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Glint Cardglint-cardCard

    A card with a specular glint that slides with the finger or the tilt of the device.

    Useskinetik-tokenskinetik-motionkinetik-tilt
    1 file · v1.0.0JSON
  • Parallax Carouselparallax-carouselCard

    A paging carousel whose pictures drift inside their cards as they slide, with the centre card brought forward.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Scroll Stackscroll-stackCard

    A scroll view whose cards pin to the top and pile up, the ones beneath shrinking and dimming as more land.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Story Cardstory-cardCard

    Full-bleed stories with progress bars: tap to step, hold to pause, each picture drifting closer as it plays.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Tilt Decktilt-deckCard

    A card that tilts in 3D under the finger, with parallax layers and a drifting floor shadow.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Beam Buttonbeam-buttonInteraction

    A button with a beam of light running around its edge, leaving a soft glow that brightens on press.

    Useskinetik-tokenskinetik-motionkinetik-hapticskinetik-clock
    1 file · v1.0.0JSON
  • Bloom Menubloom-menuInteraction

    A floating action button that blooms: the plus turns, a halo opens and actions spring out one by one.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Elastic Sliderelastic-sliderInteraction

    A slider that stretches like rubber past its ends and springs back, with a value bubble.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Hold to Confirmhold-to-confirmInteraction

    Press and hold to confirm: a ring fills around the icon and turns into a check mark.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Like Burstlike-burstInteraction

    A like button whose heart pops with a ring of light and a spray of sparks while the count rolls over.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Liquid Tabsliquid-tabsInteraction

    A tab bar whose indicator flows like liquid, stretching, thinning and melting into place.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Magnet Buttonmagnet-buttonInteraction

    A button that leans toward the finger from a field around it and presses on release.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Morph Iconmorph-iconInteraction

    An icon button whose glyph reshapes between two states: menu to close, play to pause, plus to check.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Press Jellypress-jellyInteraction

    A primary button that squashes like jelly under the finger and wobbles back on release.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Pulse Togglepulse-toggleInteraction

    A switch whose thumb stretches mid-flight, lands as a rounded square and pulses when it turns on.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Slide to Confirmslide-confirmInteraction

    Drag the knob across to confirm. A trail follows it, light sweeps the track, and it lands as a check.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Status Buttonstatus-buttonInteraction

    A button that folds into a spinner while it works, then opens in green with a traced check, or shakes in red.

    Useskinetik-tokenskinetik-motionkinetik-hapticskinetik-clock
    1 file · v1.0.0JSON
  • Two-Step Buttontwo-step-buttonInteraction

    A button that asks before it acts: it splits into Cancel and Confirm, and the question closes by itself.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Marker Highlightmarker-highlightText

    A paragraph where key phrases get marked as if with a highlighter, the ink sweeping in phrase by phrase.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • OdometerodometerText

    A number whose digits roll like a mechanical counter, forward or back, the long way round.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Scramble Textscramble-textText

    Characters cycle through random glyphs and lock into place from left to right.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Shine Textshine-textText

    A line of text with a band of light sweeping across the glyphs.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • TypewritertypewriterText

    Text typed out with a human rhythm; several phrases are typed, held, erased and replaced in turn.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Word Cascadeword-cascadeText

    A paragraph that arrives word by word, each word rising into place after the last.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Word Rotatorword-rotatorText

    A line with one word that keeps changing, rolling out and in letter by letter while its gap springs to fit.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Dock Bardock-barNavigation

    A floating bottom navigation bar whose items swell under the finger like a dock.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Morph Sheetmorph-sheetNavigation

    A bottom sheet with snap points that morphs from a floating card into a full sheet and blurs the screen behind.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Parallax Headerparallax-headerNavigation

    A scroll view whose header artwork scrolls at half speed, stretches on pull and hands off to a compact bar.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Confetti Burstconfetti-burstFeedback

    A burst of confetti drawn as one Skia Atlas, with physics on the UI thread.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Skeleton Sweepskeleton-sweepFeedback

    Loading placeholders with one band of light sweeping across the whole layout.

    Useskinetik-tokenskinetik-motion
    1 file · v1.0.0JSON
  • Toast Stacktoast-stackFeedback

    Notifications that stack like cards, fan out on tap and swipe away sideways.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Activity Ringsactivity-ringsData

    Concentric progress rings that wind up one after another; a ring past its goal laps itself.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Bar Chartbar-chartData

    Bars that spring up in a wave; drag across them and the one under the finger stays bright with its value.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Donut Chartdonut-chartData

    A ring of rounded slices that sweeps in; tap a slice to bring it forward and read its share in the middle.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Gauge Metergauge-meterData

    A dial that swings to its value on a spring while the figure counts up beneath it.

    Useskinetik-tokenskinetik-motionkinetik-count
    1 file · v1.0.0JSON
  • Heat Gridheat-gridData

    A calendar grid of days shaded by activity; the cells pop in as a wave and a drag reads any day.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Line Chartline-chartData

    A smooth line chart that draws itself in; drag across it and a guide, a dot and a label follow the finger.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Radar Chartradar-chartData

    A radar chart whose shapes grow from the centre and morph to new values; tap the legend to compare.

    Useskinetik-tokenskinetik-motionkinetik-haptics
    1 file · v1.0.0JSON
  • Stat Cardstat-cardData

    A key figure that counts up, with a change pill and a sparkline that draws itself in.

    Useskinetik-tokenskinetik-motionkinetik-count
    1 file · v1.0.0JSON

Screen templates 4

Install into components/kinetik/screens/.

  • Onboarding Flowonboarding-flowScreens

    A paged welcome flow: spotlit illustrations that drift with the swipe, story-style progress, a button that grows.

    Useskinetik-tokenskinetik-motionaurora-veilglint-cardscramble-texttilt-deckword-cascade
    1 file · v1.0.0JSON
  • PaywallpaywallScreens

    A subscription screen with a drifting gradient hero, rolling plan prices and confetti on purchase.

    Useskinetik-tokensconfetti-burstgrain-driftodometerpress-jellyshine-text
    1 file · v1.0.0JSON
  • Player Sheetplayer-sheetScreens

    A music library whose mini player opens into a full player: tilting cover, elastic scrubber.

    Useskinetik-tokenselastic-slidermorph-sheetpress-jellypulse-togglescramble-texttilt-deck
    1 file · v1.0.0JSON
  • Profile Heroprofile-heroScreens

    A profile screen: parallax cover, follow button with a rolling count, liquid tabs and loading skeletons.

    Useskinetik-tokensgrain-driftliquid-tabsodometerparallax-headerpress-jellyskeleton-sweeptoast-stack
    1 file · v1.0.0JSON

Shared 7

Tokens, motion and hooks; pulled in automatically.

  • Kinetik Clockkinetik-clock

    useShaderClock: a pausable shader clock advanced on the UI thread, at 60 or 30 fps.

    1 file · v1.0.0JSON
  • Kinetik Countkinetik-count

    useCountUp: a number that counts towards its target with an ease-out curve, for figures shown as text.

    1 file · v1.0.0JSON
  • Kinetik Hapticskinetik-haptics

    useHaptic: a small, meaningful haptic vocabulary that respects the provider switch.

    Useskinetik-tokens
    1 file · v1.0.0JSON
  • Kinetik Motionkinetik-motion

    The shared motion vocabulary: three springs, three durations, easings and the useReduceMotion hook.

    Useskinetik-tokens
    2 files · v1.0.0JSON
  • Kinetik Shaderskinetik-shaders

    Shared SkSL noise functions, lazily compiled runtime effects and colour uniforms.

    1 file · v1.0.0JSON
  • Kinetik Tiltkinetik-tilt

    useTilt and TiltSensor: device tilt as shared values, read on the UI thread.

    1 file · v1.0.0JSON
  • Kinetik Tokenskinetik-tokens

    Colour, spacing, radius, type and shadow tokens with dark and light palettes, plus the optional KinetikProvider.

    3 files · v1.0.0JSON