Kinetik UI
Search and install animated React Native and Expo components from the Kinetik UI registry.
التثبيت
أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: .cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).
NPM package
kinetik-uiClaude Code
claude mcp add kinetik-ui -- npx -y kinetik-ui@1.4.2 mcpإعداد JSON (Claude Desktop وCursor وVS Code)
{
"mcpServers": {
"kinetik-ui": {
"command": "npx",
"args": [
"-y",
"kinetik-ui@1.4.2",
"mcp"
]
}
}
}التوثيق
مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.
Kinetik UI
Motion parts for Expo.
136 animated components and 5 screen templates for React Native, copied into your app as source.
kinetik-ui.dev · Components · Documentation · Registry · npm
Requires the React Native New Architecture (Reanimated 4). The legacy architecture is not supported.
Motion and effect components for Expo and React Native, built on Reanimated, Gesture Handler and Skia. Components are copied into your project as TypeScript source (the shadcn model), so you own the code and can change anything.
npx kinetik-ui init
npx kinetik-ui add glint-cardadd copies the component and the shared tokens it needs, then installs native dependencies with npx expo install, so their versions always match your Expo SDK.
What you get
- 136 components and 5 screen templates, each with a live demo, a props table and notes on when not to use it.
- Runs on the UI thread. Gestures, springs and shaders are worklets; a busy JavaScript thread does not drop frames.
- Accessible by default. Every component has a reduced-motion version, screen-reader labels and roles, and 44 pt touch targets. See the checklist.
- One design language. Colours, spacing, type, shadows and three springs come from shared tokens; nothing hard-codes a colour. Brand it with
<KinetikProvider colors={{ ember: '#7C5CFF' }}>. - Agent-ready. An MCP server (
npx kinetik-ui mcp),/llms.txt, a markdown version of every docs page and anAGENTS.mdsection for your project (npx kinetik-ui agents).
Components
| Category | Component | What it does |
|---|---|---|
| Background | Aurora Veil | A slow, flowing aurora drawn by a fragment shader, for screen and hero backgrounds. |
| Grain Drift | A drifting four-colour mesh gradient under moving film grain. | |
| Ripple Field | A dot grid that ripples outward from every touch. | |
| Card | Aperture Card | A card closed by a camera-like iris whose blades turn open to reveal the content. |
| Compare Slider | Two versions of a picture with a divider you drag across. | |
| Deckfall | A stack of cards swiped away one at a time, the cards behind rising into place. | |
| Drift Marquee | An endless row that drifts on its own, can be flung, and leans into the speed. | |
| Expand Card | A row that opens into a card, its thumbnail growing into a wide picture. | |
| Fan Stack | A loose pile of pictures that fans out like a hand of cards. | |
| Flip Ledger | A two-sided card that turns over in 3D, sized to the taller face. | |
| Fold Panel | A panel that unfolds in place, its body springing to its height. | |
| Glint Card | A card with a specular glint that follows the finger or the tilt of the phone. | |
| Parallax Carousel | A paging carousel whose pictures drift inside their cards. | |
| Scroll Stack | Cards that pin to the top and pile up as you scroll. | |
| Story Card | Full-bleed stories with progress bars: tap to step, hold to pause. | |
| Tilt Deck | A card that tilts in 3D under the finger, with parallax layers. | |
| Question Deck | A questionnaire card on a shuffling stack with sliding questions. | |
| Wallet Stack | Glint Cards in a stitched pocket that fan out with a counting balance. | |
| Streak Card | A day count that pops in amid confetti over a row of week marks. | |
| Boarding Pass | A notched paper ticket; scan the barcode and the stub tears off. | |
| Book Pocket | Book covers in a frosted acrylic pocket that rise and fan when pressed. | |
| Now Playing | A dark music widget: the cover springs forward on play and the icon morphs. | |
| Vinyl Player | A record half out of its sleeve that spins while the track plays. | |
| Interaction | Beam Button | A button with a beam of light running around its edge. |
| Bloom Menu | A floating button whose actions spring out one after another. | |
| Copy Chip | A copy button whose two pages fold into a check. | |
| Elastic Slider | A slider that stretches like rubber past its ends and springs back. | |
| Expand Toolbar | Icon buttons where the picked one grows to show its name. | |
| Hold to Confirm | Press and hold: a ring fills and turns into a check mark. | |
| Like Burst | A heart that pops with a ring and sparks while the count rolls. | |
| Liquid Tabs | A tab bar whose indicator flows like liquid between tabs. | |
| Magnet Button | A button that leans toward the finger before it is touched. | |
| Morph Icon | An icon whose glyph reshapes: menu to close, play to pause. | |
| Press Jelly | A primary button that squashes like jelly and wobbles back. | |
| Pulse Toggle | A switch whose thumb stretches mid-flight and pulses when it turns on. | |
| Slide to Confirm | Drag the knob across to confirm; it lands as a check. | |
| Split Button | A primary action with alternatives behind a chevron. | |
| Status Button | Folds into a spinner while it works, then opens with a check or shakes. | |
| Swipe Row | A list row with actions behind it; a long swipe runs the edge one. | |
| Theme Switch | A sun whose rays turn and draw in as a shadow leaves a moon. | |
| Two-Step Button | Splits into Cancel and Confirm before a destructive action. | |
| Peek Folder | Tiles glowing through a glass folder pocket, springing up on tap. | |
| Inputs | Choice Cards | Option cards with one selection ring that glides between them. |
| Code Field | A one-time-code field: digits pop in, wrong codes shake. | |
| Filter Chips | Chips that grow a check and turn to a tint when picked. | |
| Float Field | A text field whose label rises to the edge, with a ring and a shake for errors. | |
| Glide Radio | A radio group whose one dot travels between the rings like ink. | |
| Grow Area | A multi-line field that grows a line at a time, with a limit ring. | |
| Ink Check | A checkbox whose tick is inked in one stroke. | |
| Inline Edit | Text you rename in place, confirmed with a check. | |
| Money Field | A currency field typed like a till, every place rolling. | |
| Month Calendar | A month to pick a date or a range; a disc glides between days. | |
| Morph Select | A select whose field stretches open into its list. | |
| Password Meter | A new-password field with a meter and rules that tick off. | |
| Plan Toggle | A billing-period toggle with a popping badge and rolling price. | |
| Range Slider | A two-ended slider over an optional histogram. | |
| Reveal Field | A password field with an eye that blinks. | |
| Roll Stepper | A number stepper whose figure rolls and speeds up while held. | |
| Search Morph | A search button that stretches into a search field. | |
| Signature Pad | Finger signing with ink that thins with speed. | |
| Star Rating | Stars you tap or drag across, swelling as they fill. | |
| Swatch Picker | Colour swatches with a ring that glides to the pick. | |
| Tag Field | Typed words that pop into removable tags. | |
| Time Wheel | Drum-like wheels for a time of day that snap row by row. | |
| Gradient Slider | Hue or white-balance gradient with a ring knob, live swatch and action. | |
| Rotation Ruler | A straighten dial of degree ticks that glides and snaps to level. | |
| Step Slider | A few dotted stops with a snapping knob and a spinning action. | |
| Palette Strip | Joined colour swatches that wipe to new colours in turn. | |
| Segment Bar | A segmented control whose pill glides to the pick, with an action. | |
| Aspect Picker | Aspect-ratio frames drawn to scale with a sliding highlight. | |
| Seat Picker | Armchairs that fill as you add seats, a rolling stepper and seats left. | |
| Plan Picker | Plan cards in a tray whose pick lifts, over a button with streaming chevrons. | |
| Intensity Slider | A soft gradient slider with a Low-to-High ruler that lights to the value. | |
| Topic Picker | Topic chips drifting in opposite rows; picks pop in a soft colour. | |
| Disclosure | Fade Scroll | A scroll view whose edges fade only where there is more. |
| Lift Menu | Hold to lift the content above a dimmed screen with its actions. | |
| Pop Menu | A menu that unfolds from its trigger, rows sliding in. | |
| Read More | Long text folded to a few lines that fade, let out on a spring. | |
| Split Pane | Two panes with a handle that springs to resting points. | |
| Tip Bubble | A short tip that grows out of its anchor and closes by itself. | |
| Tree View | Nested folders whose branches grow open. | |
| Overlays | Action Sheet | Actions from the bottom edge that follow a drag down. |
| Pop Dialog | A dialog that rises and settles over a dimmed screen. | |
| Side Drawer | A drawer from the side whose rows slide in one by one. | |
| Text | Letter Morph | A label that morphs letter by letter: Save to Saved. |
| Marker Highlight | Key phrases marked as if with a highlighter, one after another. | |
| Odometer | Digits that roll like a mechanical counter. | |
| Scramble Text | Characters cycle through glyphs and lock in from left to right. | |
| Shine Text | A band of light sweeping across a line of text. | |
| Slot Text | Characters that spin like slot reels onto the new text. | |
| Typewriter | Text typed out with a human rhythm, phrase after phrase. | |
| Word Cascade | A paragraph that arrives word by word. | |
| Word Rotator | One word in a line that rolls to the next, letter by letter. | |
| Navigation | Dock Bar | A floating bottom bar whose items swell under the finger. |
| Morph Sheet | A bottom sheet with snap points that blurs the screen behind it. | |
| Page Dots | Page dots that follow the scroll as a worm or a pill. | |
| Pager | Pagination with a gliding pill and rolling page numbers. | |
| Parallax Header | A header that scrolls at half speed and hands off to a compact bar. | |
| Scroll Tabs | Tabs over swipeable pages, the underline tied to the swipe. | |
| Feedback | Confetti Burst | Confetti drawn in a single Skia draw call, physics on the UI thread. |
| Count Badge | A corner count that springs in, jumps as it rises and rolls. | |
| Countdown | Digits that drop in as they change, then a Live pill. | |
| Dot Loader | Dots that hop, breathe or sit in a typing bubble. | |
| Empty State | Three cards fan out above the next step on an empty screen. | |
| Notice Bar | An announcement bar whose messages take turns rolling in. | |
| Progress Bar | A bar that springs to each amount, with a sheen and a green finish. | |
| Ring Spinner | An arc that stretches as it turns and closes into a check. | |
| Skeleton Sweep | Loading placeholders with one light band across the whole layout. | |
| Step Tracker | Progress through steps: the line fills and steps take a check. | |
| Toast Stack | Notifications that stack like cards, fan out and swipe away. | |
| Scan Progress | A scan band lights pixel squares over an image while a ring fills. | |
| Data | Activity Rings | Concentric progress rings that wind up; past the goal they lap. |
| Avatar Stack | Overlapping faces that fan out with their names. | |
| Bar Chart | Bars that spring up in a wave and light up under the finger. | |
| Brush Chart | A long series with a window you drag and resize to zoom. | |
| Chat Thread | Grouped chat bubbles that rise in, with typing dots. | |
| Donut Chart | A ring of rounded slices that sweeps in; tap one to bring it forward. | |
| Gauge Meter | A dial that swings to its value while the figure counts up. | |
| Heat Grid | Days shaded by activity, popping in as a wave; drag to read. | |
| Line Chart | A smooth line that draws itself in, with a scrubbing guide and label. | |
| Radar Chart | Shapes that grow from the centre and morph to new values. | |
| Ridgeline | Overlapping distributions; tap one to lift it and mark its quartiles. | |
| Slope Chart | Before and after on two axes, rises in blue. | |
| Sort Table | A table whose rows spring to their new places when sorted. | |
| Stat Card | A figure that counts up, with a change pill and a sparkline. | |
| Stream Graph | Layered streams that morph between datasets. | |
| Timeline | Events along a rail that pop in and draw down in turn. | |
| Treemap | Nested, near-square tiles; tap a group to zoom into it. | |
| Usage Meter | What fills an allowance, segment by segment. | |
| Waffle Chart | A ten-by-ten grid where each cell is one percent. | |
| Flight Track | A flight card whose route fills behind a plane with blinking lights. | |
| Expense Card | Category bars on a dashed grid that grow in, with a period menu. | |
| Credit Score | A score that counts up over a bar meter warming from red to green. | |
| Vital Arcs | Arcs that sweep from the corner around a score disc, values at their tips. | |
| Score Matrix | A score that counts up as a dot grid lights, beside metric rows. | |
| Agenda Card | The date lit by a blue glow beside the next events sliding in. | |
| Screens | Onboarding | A paged welcome with animated illustration panels and word-by-word titles. |
| Paywall | A feature carousel that advances on its own and swipeable plan cards. | |
| Login | Email and password sign-in with inline errors and provider buttons. | |
| Auth | Passwordless sign-in: an email, a one-time code and a check once you are in. | |
| Profile | An avatar in a turning ring, stats that count up and grouped settings rows. |
Screen templates install into components/kinetik/screens/ and bring the components they use.
Requirements
- Expo SDK 54 or newer with the New Architecture on (the default since SDK 53). Developed and tested on SDK 57.
- A development build. Skia and sensors need native code.
- Wrap your app in
<GestureHandlerRootView style={{ flex: 1 }}>for gesture-driven components.
CLI
| Command | What it does |
|---|---|
init | Writes kinetik.json, copies tokens and motion presets, installs Reanimated |
add <name...> | Copies components (and their dependencies) and runs expo install |
list, search <query> | Browse the registry (--json for scripts) |
diff [name...] | Show how your copies differ from the registry |
doctor | Check the SDK, New Architecture, Babel config, dependencies and files |
agents [--skill] | Add Kinetik guidance for AI agents to AGENTS.md (and an Agent Skill) |
mcp | Serve the registry to AI agents over the Model Context Protocol |
The registry is also shadcn-compatible: npx shadcn@latest add <registry>/r/glint-card.json copies the files, but installs dependencies with npm rather than expo install, so prefer the Kinetik CLI.
Repository
| Path | What |
|---|---|
packages/registry | Source of truth: components, screen templates, tests, demos, docs, tokens, motion presets, hooks |
packages/cli | The kinetik-ui CLI |
packages/mcp | MCP server used by kinetik-ui mcp |
apps/playground | Expo app running every component and screen on a device |
apps/docs | Docs site (Next.js + react-native-web): live previews, /llms.txt, markdown endpoints, /r registry |
scripts/ | Registry and docs builds, perf and accessibility audits |
tests/ | Registry integrity tests |
pnpm install
pnpm build:registry # regenerate the published registry files
pnpm verify # registry freshness, format, lint, typecheck, tests, integrityContributing: CONTRIBUTING.md.
Sponsors
Kinetik UI is free and open source. If it saves you time, you can sponsor it on GitHub. Every public sponsor is listed on kinetik-ui.dev/sponsors.
License
MIT. Dependencies keep their own licenses: THIRD_PARTY_NOTICES.md.
الأسئلة الشائعة
ما هو Kinetik UI؟
Search and install animated React Native and Expo components from the Kinetik UI registry.
كيف أثبّت Kinetik UI؟
يعمل على جهازك. في Claude Code: claude mcp add kinetik-ui -- npx -y kinetik-ui@1.4.2 mcp. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.
هل يحتاج Kinetik UI إلى مفتاح API؟
لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.
هل Kinetik UI مفتوح المصدر؟
نعم. شيفرته متاحة على GitHub بترخيص MIT.
من يصون Kinetik UI؟
ينشره NURULLAHTURGUT. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.
من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.