Open Source design resources

Vercel Labs' open-source agent skill that reviews UI code against Web Interface Guidelines — accessibility, interaction, and UX checks applied automatically in AI coding workflows.

Open-source collection of beautifully designed, accessible email components for React Email, MJML React and JSX Email, copy-paste ready and compatible with shadcn/ui.

49 free copy-paste microinteractions for React, CSS and Tailwind — animated buttons, hover effects, tabs and inputs with no package to install.

Open-source animated React components and next-gen UI interactions — displacement hovers, animated tooltips and scroll-driven cards installed via the shadcn CLI.

A free, open-source React component library built on Base UI, styled with Tailwind, animated with Motion — 70+ polished components for humans and AI agents.

1,440+ beautifully crafted open-source 3D icons, free for personal and commercial use with no attribution required.

Open-source component library engineered for speed and visual excellence, with copy-paste components built around physical elasticity, shaders, and micro-interactions.

Animation and UI design skills from Emil Kowalski, distilling years at Vercel and Linear into installable skills for designers and engineers.

visualize is a skill that stops AI-generated HTML looking agent-made — replacing Inter-and-purple-gradient defaults with on-brand, distinctive output.

Free, open-source animated React chart components built on Recharts and Apache ECharts, styled for shadcn/ui — copy, paste and ship.

Open-source WebGPU shader components for React, Vue, Svelte, Solid and JS — declarative animated backgrounds, overlays and interactive effects.

Free MIT-licensed library of 298 handcrafted animated icons built with Lottie, optimized for a 32px grid and usable on web, React, iOS and Android.

Open-source Liquid Glass components for React with real WebGL edge refraction, spring physics, and accessible primitives — shipped as a shadcn registry plus an MCP server.

Open-source library of interactive React components, blocks, shaders and hooks built with Base UI, Tailwind CSS and Motion, distributed via a shadcn registry.

Open-source ASCII figures drawn with text for AI agents to embed in their writing — MDX components for pages and fenced code blocks for READMEs, PRs and Linear.

198 free, MIT-licensed animated React components with smooth Motion animations — drop-in shadcn/ui compatible and fully customizable with Tailwind CSS.

MIT-licensed SwiftUI design system extracted from a production iOS app — monochrome palette plus one brand color, neo-skeuomorphic buttons, Metal shader effects and an AI agent skill.

MIT-licensed React component rendering Apple-style liquid glass lenses that refract live DOM — cross-browser SVG displacement, ~5 kB, zero dependencies.

Native motion blur for React Native views on iOS and Android — wrap any moving content in MotionBlurView and the blur follows its on-screen velocity.

Open source UI components by @micka_design, documented as a fluid design system covering hover, motion, surfaces and typography.

Free, open-source React micro-interaction components for the half-second after a click — copy the TypeScript source; the behavior is finished, the style is yours.

Fast, lightweight JavaScript animation engine with an all-in-one API for timelines, staggering, SVG morphing, scroll sync and draggable physics.

Open-source, motion-powered animated components for React and HTML — beautifully crafted pieces that bring interfaces to life with seamless animations.

An open SVG brand library with 7,400+ logos and cloud icons — search, copy and ship brand marks via npm packages, CLI, CDN, API or MCP.

Open-source React and React Native components crafted with Tailwind CSS and NativeWind — one copy-paste library shared across web, Next.js and Expo apps.

A flexible open-source icon family for interfaces, diagrams and presentations — thousands of glyphs in six weights, shipped as SVGs, web fonts and framework packages.

Sub-atomic styles: an open source set of expertly crafted CSS custom properties for consistent, adaptive design, installable from a CDN or NPM.

Agent skills that make AI agents genuinely good at building mobile apps — study top-grossing apps via Appllama, then build to a simulator-verified bar.

A Claude Code skills pack for design-adjacent work: curated resource articles, one-click website theme optimization, and design system document generation.

An open source collection of 200+ high-quality, animated, interactive and fully customizable React components and micro-interactions.

A border-beam animation for web UI — a light beam traveling around element borders, installable as the border-beam npm package.

936 open-source UI sound effects for web, mobile, SaaS and games, previewable across 12 sonic styles with one-shots and seamless loops.

A cozy React + TypeScript component library with an original island-style design language, where every visual, icon and animation is crafted from scratch.

A free design skill for AI coding agents — Claude Code, Codex, Cursor and more. Gives your agent the design vocabulary to ship crafted UI instead of AI slop.

A curated toolkit of 70+ skills, plugins, MCP servers and CLAUDE.md tricks that make Claude Code output better-looking frontends.

A Linear-inspired project management interface built with Next.js, shadcn/ui and Tailwind CSS for tracking issues, projects and teams.

A curated awesome list of 64 AI tools for building beautiful UI and UX, spanning agent skills, apps, MCP servers, design tools and resources.

1,000+ free, open-source shadcn/ui components and React examples for Tailwind CSS, from data grids and Gantt charts to kanban boards and file uploads.

138 free, open-source animated components for React and Next.js, built with Motion and Tailwind CSS — copy the source or install via the shadcn CLI.

A Claude skill and methodology for faithfully reproducing any website — from static pages to WebGL demos — using real source instead of AI guesswork.

The Chinese-language home for shadcn/ui: beautifully designed, accessible, open-source components you copy and paste, plus docs, themes and templates.

1,366 free MIT-licensed icons on one 24×24 grid, in stroke, two-tone, duotone and fill — set the exact size and stroke you ship, copy as SVG or JSX.

An open-source, collaborative design agent workspace: start from a brief, generate prototypes that follow your design system, then let your coding agent refine them with the team.

An open-source Codex and Claude skill that turns raster logos into clean motion-ready SVG, then exports animated HTML, GIF and video previews.

An open-source library of 250+ animation-ready React components and blocks built with Next.js, Tailwind CSS, Motion and shadcn/ui — with MCP support for AI agents.

A library of beautifully crafted animated icons built for Svelte, open source on GitHub and searchable right on the site.

A free, open-source registry of 1,600+ rare animated React components built with Tailwind CSS and Motion, installed with the shadcn CLI or MCP.

Motion-first animated icons you copy straight into your app, with one-command shadcn CLI installs and open-source code on GitHub.

Over 6,200 free, open-source SVG icons with customizable size, color and stroke, plus packages for React, Vue, SolidJS and Figma.

A WebGL playground for voice-assistant orbs — 13 presets from Siri Wave to Neural Plasma, audio-reactive tuning and copy-ready code.

HeroUI v3 (formerly NextUI) — accessible React and React Native components built on React Aria and Tailwind CSS v4, with 27.7k GitHub stars.

160+ copy-paste React components for motion, transitions and UI effects — morphing buttons, 3D carousels, loaders and chart animations.

A shadcn registry of 42 pixel-perfect, uniquely crafted components — from Apple Carousel to Fluid Gradient Text — free to copy and MIT licensed.

Unstyled React UI components for building accessible web apps and design systems, from the creators of Radix, Floating UI, and Material UI.

An open source supply of generated DESIGN.md style guides for any public domain, shaped from live brand identity and markup via Context.dev.

Search and retrieve 200,000+ icons from 150+ collections as an MCP server for AI agents or a standalone CLI, returning SVG, JSX, or Iconify code.

Garry Tan's Claude Code workflow stack — slash commands for office hours, CEO-level plan review, rigorous code review, QA and release automation.

A curated collection of ready-to-use DESIGN.md files extracted from 73 real websites, for AI agents that need to generate on-brand UI.

A GitHub template that turns a URL into a clean Next.js clone — give your AI coding agent one command and it recreates the site.

LiftKit is a design-system-derived UI framework for React and Next.js on Tailwind — currently being rewritten around Base UI primitives.

A modern UI component library built on top of Base UI, shipping 510 particles designed for developers and AI coding agents.

An Agent Skills-format data visualization skill that turns raw data into editorial-quality charts and full HTML reports with a unified visual grammar.

A pure JavaScript/TypeScript library for fast, accurate multiline text measurement and layout — no DOM reflow required.

A free, open-source icon library with 2,700+ handcrafted SVG icons and ready-made packages for React, Vue, Angular, Svelte, Flutter and Figma.

A free UI library for React and Next.js with 200+ MIT-licensed copy-paste components, Tailwind blocks, device mockups and TypeScript source.

A Claude and Codex skill for turning UI screenshots and design mockups into faithful HTML/CSS, with asset separation and screenshot-based verification.

A free, MIT-licensed set of 350+ animated React icons built on Lucide and Motion, installable through the shadcn CLI registry.

A community-made icon toolkit of 1,877 consistent, lightweight SVG icons, tree-shakable and customizable across all major package managers.

Home of five free React UI effect libraries — Beam, Orb, Gooey, Metal and Image — built to be installed and wired up by coding agents.

A single-file React UI kit for AI products, built on shadcn/ui — screens, AI UX patterns and components for founders building with coding agents.

A Claude Code design system skill capturing Nothing's visual language — monochrome, typographic and industrial UI on command.

Beautiful hand-crafted SVG icons by the makers of Tailwind CSS — 316 MIT-licensed icons in outline, solid, mini and micro styles with React and Vue libraries.

Open-source skill files that stop AI coding agents like Cursor, Claude Code and Codex from shipping generic, slop-looking frontends.

An open-source React UI kit of copy-paste animated components built for Next.js and Tailwind CSS, with new components released regularly.

Anthony Fu's collection of Agent Skills, encoding his preferences, experience, and best practices — generated from source docs and kept in sync.

Beautifully designed components that you can copy and paste into your apps. Accessible, customizable and open source — built on Radix UI and Tailwind CSS.

150+ animated components built with React, Tailwind CSS and Motion. Copy-paste landing page sections and effects that make marketing sites stand out.

A large collection of copy-paste components built on top of shadcn/ui and Tailwind CSS — forms, layouts and application UI patterns for real products.