vanilla JS

Curated collection of 24 open source UI libraries and design engineering components for vanilla JS. Explore component lists, live previews and code repos.

motion-panels — Resizable split panels animated with Motion, featuring smooth folding and snapping.

motion-panelsInput Controls

Resizable split panels animated with Motion, featuring smooth folding and snapping.

Trellis — Fractal, dockable workspace layouts with deep panel nesting and infinite zoom.

TrellisInput Controls

Fractal, dockable workspace layouts with deep panel nesting and infinite zoom.

Torph — Dependency-free animated text and numeric morphing component across web frameworks.

TorphText & Typography

Dependency-free animated text and numeric morphing component across web frameworks.

Typehug — Keeps words, numbers, and units together with nonbreaking spaces for web typography.

TypehugText & Typography

Keeps words, numbers, and units together with nonbreaking spaces for web typography.

Annnimate — Production-ready GSAP motion components and fluid scroll animations for web.

AnnnimateCollections

Production-ready GSAP motion components and fluid scroll animations for web.

Colorion Text Effects — Animated text effects, kinetic typography presets, and copy-paste CSS recipes.

Colorion Text EffectsText & Typography

Animated text effects, kinetic typography presets, and copy-paste CSS recipes.

daisyUI — Most popular component class library for Tailwind CSS with deep semantic theme support.

daisyUICollections

Most popular component class library for Tailwind CSS with deep semantic theme support.

Easing Wizard — Visual spring generator and easing curve designer for modern CSS animations.

Easing WizardCollections

Visual spring generator and easing curve designer for modern CSS animations.

Flowbite — Ecosystem of open-source UI components built with Tailwind CSS utility classes.

FlowbiteCollections

Ecosystem of open-source UI components built with Tailwind CSS utility classes.

FlyonUI — Semantic, accessible Tailwind CSS component library ready for Tailwind v4.

FlyonUICollections

Semantic, accessible Tailwind CSS component library ready for Tailwind v4.

GSAP — Industry-standard, ultra-high-performance JavaScript timeline animation engine.

GSAPCollections

Industry-standard, ultra-high-performance JavaScript timeline animation engine.

HyperUI — Free open-source Tailwind CSS components for marketing, ecommerce and app UI.

HyperUICollections

Free open-source Tailwind CSS components for marketing, ecommerce and app UI.

Lottie — Lightweight JSON-based vector animation format and cross-platform runtime.

LottieCollections

Lightweight JSON-based vector animation format and cross-platform runtime.

morphicons — Spring-physics icon morphing animation library for smooth state transitions.

morphiconsCollections

Spring-physics icon morphing animation library for smooth state transitions.

Oneko — Classic nostalgic pixel cat companion that delightfully chases your cursor.

OnekoCollections

Classic nostalgic pixel cat companion that delightfully chases your cursor.

Rive — Interactive vector animation tool and runtime powered by state machines.

RiveCollections

Interactive vector animation tool and runtime powered by state machines.

textmotion — Zero-dependency, high-performance kinetic text roll animation primitive.

textmotionText & Typography

Zero-dependency, high-performance kinetic text roll animation primitive.

Theatre.js — Visual motion design sequencer and animation studio for DOM, Three.js, and WebGL.

Theatre.jsCollections

Visual motion design sequencer and animation studio for DOM, Three.js, and WebGL.

Transitions — Curated collection of CSS transition recipes, custom easings, and animations.

TransitionsCollections

Curated collection of CSS transition recipes, custom easings, and animations.

Velora UI — Free Tailwind CSS components and sections designed for rapid web prototyping.

Velora UICollections

Free Tailwind CSS components and sections designed for rapid web prototyping.

Ambient CSS — A physics-based lighting system for CSS: define a light source, and every shadow, highlight and surface gradient follows from it — calibrated against Blender raytraces.

Ambient CSSCollections

A physics-based lighting system for CSS: define a light source, and every shadow, highlight and surface gradient follows from it — calibrated against Blender raytraces.

Drawably — Hand-drawn UI controls. Every mount generates a fresh pen sketch from seeded randomness, and the stroke boils like an animated doodle. Zero dependencies.

DrawablyCollections

Hand-drawn UI controls. Every mount generates a fresh pen sketch from seeded randomness, and the stroke boils like an animated doodle. Zero dependencies.

DialKit — Live controls for tuning interfaces in real time. Adjust values, compare versions, and edit animation timing in your running app.

DialKitInput Controls

Live controls for tuning interfaces in real time. Adjust values, compare versions, and edit animation timing in your running app.

crd-ui — A credit & debit card component for payment forms: live brand detection, 3D flip, themeable variants. Zero dependencies — React, Vue, Svelte and vanilla JS.

crd-uiInput Controls

A credit & debit card component for payment forms: live brand detection, 3D flip, themeable variants. Zero dependencies — React, Vue, Svelte and vanilla JS.