Web
Display
Gradient Background
Static gradient backgrounds in multiple presets — for hero sections and banners.
#background#gradient#decorative
Free
220+ open-source components for web + native — plus 5 full-stack kits & 15 landing templates
Patterns Library
68+ production-ready patterns.
Motion, backgrounds, and engagement effects — vibe over UI. 14 for web + 54 for mobile — dark mode built in, with live previews.
Free & open sourceWeb + mobileDark modeLive previews
14 live demos
Web
Display
Animated Gradient
Slow-drifting animated gradient mesh for ambient hero backgrounds.
#background#gradient#motion
Web
Display
Dotted Background
Dotted-grid background pattern — subtle texture without competing for attention.
#background#dots#pattern
Web
Display
Noise Background
Subtle noise texture overlay for added depth on flat surfaces.
#background#noise#texture
Web
Display
Hero Shader
WebGL shader hero background with motion control and reduced-motion support.
#background#shader#hero
Web
Display
Fade In
Fade-in entrance primitive with configurable delay and duration.
#animation#motion#entrance
Web
Display
Slide In
Slide-in entrance primitive from any edge — top / right / bottom / left.
#animation#motion#entrance
Web
Display
Scale In
Scale-up entrance primitive for cards, badges, and modal content.
#animation#motion#entrance
Web
Display
Stagger
Staggered children animation primitive for animating lists and grids.
#animation#motion#list
Web
Display
Ripple
Material-style ripple effect on press — for buttons and tappable surfaces.
#animation#motion#interaction
Web
Display
Reveal
Scroll-triggered reveal animation primitive for content-rich pages.
#animation#motion#scroll
Web
Display
Transition
Smooth transition primitive for animating value changes between states.
#animation#motion#change
Web
Feedback
Onboarding Checklist
Step-by-step onboarding checklist with progress tracking and completion state.
#onboarding#checklist#progress
Web
Feedback
Intro Disclosure
First-time-user disclosure card with multi-step walkthrough.
#onboarding#intro#disclosure
Showing 14 of 14 web patterns · live preview available
Free & MIT
Using the components?
Star the SDK.
The whole component SDK is free — the same component, web and native, from one API. A star helps other builders find it.
Star on GitHubGet the free AI configs pack
Pre-tuned AI configs for Cursor, Claude, and Lovable — drop them in and your AI tool instantly understands your project.
No spam. Unsubscribe any time.