UI Toolkit

Component libraries and animation engines worth reaching for before hand-building a section from scratch — copy-paste into the repo, not npm lock-in.

2
component libraries
74
components
2
animation engines
21
capabilities

Component libraries — copy-paste into your repo

⌕
Kokonut UI↗

Copy-paste UI components — hero sections, cards, nav, buttons, text effects, AI-style inputs — built with Next.js, Tailwind CSS, shadcn/ui, and Motion.

Free & open source. KokonutUI Pro: one-time paid, more components + commercial license + updates.
Next.jsReactTailwind CSSshadcn/uiMotion

Backgrounds

Beams BackgroundBackground PathsShapes HeroFlow Field

Cards

Card FlipStackLiquid Glass CardApple Activity CardMouse Effect CardX CardBento GridSpotlight CardsCurrency TransferCarousel Cards

Navigation

Morphic NavbarToolbarSmooth TabProfile DropdownAction Search BarSmooth Drawer

Inputs

File UploadAvatar PickerTeam SelectorLoader

AI

AI Input SelectorAI Input SearchAI State LoadingAI Text LoadingAI Voice

Texts

Scroll TextTyping TextMatrix TextDynamic TextGlitch TextShimmer TextSliced TextSwoosh Text

Buttons

Particle ButtonV0 ButtonGradient ButtonMagnet ButtonHold ButtonSocial ButtonCommand ButtonSwitch ButtonSlide Text Button

Snapshot from 2026-07-17 — 46 components confirmed by name across 7 categories. Site advertises 100+ total; re-check kokonutui.com before treating this as the full current set.

Bklit UI↗

Composable charts & data-visualization components built on top of shadcn/ui, plus a live Studio playground to tweak and export the code.

Free & open source, MIT licensed.
Reactshadcn/ui

Charts

Area ChartBar ChartCandlestick ChartChoropleth ChartComposed ChartFunnel ChartGauge ChartHeatmap ChartLine ChartProfit/Loss LineLive Line ChartPie ChartRadar ChartRing ChartScatter ChartSankey ChartSunburst Chart

Utilities

LegendGridBackgroundReference AreaProjection LineTooltipBrushX AxisY AxisCustom IndicatoruseChart (hook)

Snapshot from 2026-07-17 — 28 components confirmed by name across 2 categories.

Animation engines — you build the UI, these drive the motion

Motion↗

Production-grade animation engine for React, JavaScript, and Vue (formerly Framer Motion). You still build the UI — this drives the motion.

Default pick for Next.js / React projects.

motion/react (React)motion (vanilla JS)motion-v (Vue)
  • motion.div / animate()— Core declarative React component + imperative JS function
  • Springs— Physics-based spring transitions
  • Gestures— Drag, hover, tap, in-view triggers
  • Layout transitions— Automatic animation between layout states
  • Scroll-linked effects— Tie animation progress to scroll position
  • Timelines— Sequence and orchestrate multiple animations
  • SVG support— Path drawing and shape animation

Also offers (paid/tooling): Cursor (Motion+), Ticker (Motion+), AI Kit, CSS Studio, MotionScore

Anime.js↗

Lightweight, framework-agnostic JavaScript animation engine. 100% free and open source.

Vanilla JS, canvas, or heavy SVG work outside a React tree — redundant with Motion on Next.js projects.

animejs (ES modules, V4)
  • Timer— Core timing control — play, pause, reverse, seek, restart
  • Animation— Tween CSS properties, SVG, DOM attributes, JS objects
  • Timeline— Sequential orchestration across animations, timers, function calls
  • Animatable— Per-property settings — units, duration, easing
  • Draggable— Drag with momentum physics, velocity, snap points, constraints
  • Layout— Auto-animate layout changes, DOM reordering, entry/exit
  • Scope— Reusable animation patterns with media-query support
  • ScrollObserver— Scroll-triggered animation with threshold detection
  • SVG— Morphing, drawable creation, motion-path animation
  • Text— splitText (lines/words/chars) and scrambleText effects
  • Utilities— Stagger, random generation, lerp/damp/clamp, angle conversion
  • Easings— Cubic bezier, linear, steps, irregular, spring-based
  • WAAPI— Web Animation API integration
  • Three.js adapter— 3D object, material, uniform, instanced-mesh animation