web-design
A collection of DESIGN.md files inspired by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.
Copy a DESIGN.md into your project, tell your AI agent "build me a page that looks like this" and get pixel-perfect UI that actually matches.
Open-Source Design Editor.
Opens Figma files. Built-in AI. Fully programmable. Also a toolkit for building custom editors.
A random collection of accessibility-focused tools that you might find at least partially useful
Related contents:
A fully featured React components library.
Build fully functional accessible web applications faster than ever – Mantine includes more than 120 customizable components and 70 hooks to cover you in any situation.
skeleton screens for your UI. Auto generated skeleton loading framework.
Pixel-perfect skeleton loading screens, extracted from your real UI. No manual measurement, no hand-tuned placeholders. boneyardsnapshots your real UI and captures a flat list of skeleton “bones” — positioned, sized rectangles that mirror the page exactly.
No manual measurement. No hand-tuned placeholders. Wrap your component in <Skeleton> and get pixel-perfect skeleton screens that stay in sync with your actual layout.
Motion animations as Tailwind classes.
Write Motion animations as Tailwind-like classes. Zero imports, zero boilerplate, zero runtime overhead. Write Framer Motion animations as Tailwind-style utility classes – Motionwind transforms animate-* classes into motion props at build time with zero imports and zero boilerplate. Motion animations as Tailwind classes. A Babel plugin that transforms animate-hover:scale-110 into whileHover={{ scale: 1.1 }} at build time. Zero imports, zero boilerplate.
Related contents:
The design language that makes your AI harness better at design. The missing upgrade to Anthropic's frontend-design skill. Design fluency for AI harnesses.
Great design prompts require design vocabulary. Most people don't have it. You can't ask for "more vertical rhythm" if you've never used those words. Impeccable gives you commands that put designer language in your hands.
Free split-flap display emulator for any TV. The classic flip-board look, without the $3,500 hardware.
Turn any TV into a retro split-flap display. The classic flip-board look, without the $3,500 hardware. And it's free. FlipOff is a free, open-source web app that emulates a classic mechanical split-flap (flip-board) airport terminal display — the kind you'd see at train stations and airports. It runs full-screen in any browser, turning a TV or large monitor into a beautiful retro display.
Super lightweight syntax highlighter.
Super lightweight syntax highlighter for JavaScript and JSX—about 1 kB minified and gzipped. Works in the browser or any JS runtime that can set HTML strings.
Pure JavaScript/TypeScript library for multiline text measurement & layout. Fast, accurate & supports all the languages you didn't even know about. Allows rendering to DOM, Canvas, SVG and soon, server-side.
Pretext side-steps the need for DOM measurements (e.g. getBoundingClientRect, offsetHeight), which trigger layout reflow, one of the most expensive operations in the browser. It implements its own text measurement logic, using the browsers' own font engine as ground truth (very AI-friendly iteration method).
Free, Fast, and Powerful SVAR React DataGrid
An open-source, high-performance data grid for modern React applications with virtual scrolling, advanced filtering, editing, tree data, and full TypeScript support.
Open Source Video Player.
open source media player framework for Web and React. Modern, modular, and composable media player framework for Web and React.
Related contents:
Automate your web typography workflow with this Composer dev-tool. 🚀
Converts TTF fonts to optimized WOFF2 subsets using Python FontTools. Works with Laravel, Symfony, and vanilla PHP projects.
Related contents:
The ColorPalette Pro synthesizer generates 6 different color palettes, in 4 styles, across 8 color spaces and formats.
Export, share, download, and copy palettes to create beautiful artworks, websites, and designs.
Use any icon (100,000+) from Iconify, for TailwindCSS.
The Backend Built forAgentic Development
Give agents everything they need to ship fullstack apps.
InsForge is a backend development platform built for AI coding agents and AI code editors. It exposes backend primitives like databases, auth, storage, and functions through a semantic layer that agents can understand, reason about, and operate end to end.
Haptic feedback for the mobile web. Supports React, Vue, and Svelte.
Related contents:
The AI Operator Living in Your Web Page. JavaScript in-page GUI agent. Control web interfaces with natural language.
🪄One line of code, turns your website into an AI-native app. Users give natural language commands, AI handles the rest.
Looking for inspiration? Browse our curated collection of HTML UI components ready to drop into your next project.
Build your retro component library
A set of 8-bit styled components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.
Extract Dominant Colors from Images. Go CLI, REST API & JavaScript Library.
Extract dominant colors from images using k-means clustering. A fast, cross-platform CLI tool that extracts dominant colors from images using k-means clustering.
The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI.
Related contents:
Beautiful & Animated Charts.
A Beautiful & Animated Chart UI Website built on top of shadcn & recharts. A modern, customizable chart library for React and Next.js applications featuring visually stunning and interactive data visualizations.
A fast, lightweight, and responsive masonry grid layout library.
Light Weight "Headroom Style" scroll intent library that hides the site header on scroll down and shows on scroll up.
A lightweight JavaScript library for creating smart header behavior based on scroll intent. Peek automatically hides your site header when users scroll down and reveals it when they scroll up, creating a more immersive browsing experience.
SPINNERS is a collection of HTML and CSS "loading icon" animations which you can use on your websites, on your apps or on any other place you need to signal your visitors / users that some content is loading.
Open Source CLI to Extract Design Systems & Tokens.
Extract any website’s design system into design tokens in a few seconds: logo, colors, typography, borders, and more. One command.
Extract design tokens from any website with one command. CSS to design system converter with W3C design tokens export.
Turn your terminal into a design engineer
A toolkit for coding agents like Claude Code, Amp, Cursor, OpenCode, and Codex to help you build UIs that don't suck.
Related contents:
Slow down, pause, or speed up time of any web content.
Debug animations, study cool demos, and make games easier or harder.
A dynamic windowed scrolling table component for react.
HighTable is a virtualized table component for React, designed to efficiently display large datasets in the browser. It loads and renders only the rows necessary for the current viewport, enabling smooth scrolling and performance even with millions of rows. HighTable supports asynchronous data fetching, dynamic loading, and optional column sorting.
Related contents:
Stop writing CSS like it's 2015.
Modern CSS code snippets, side by side with the old hacks they replace. Every technique you still Google has a clean, native replacement now.
Cloudflare's component library for building modern web applications.
Kumo provides accessible, design-system-compliant UI components built on Base UI. It handles keyboard navigation, focus management, and ARIA attributes so you can build accessible applications without thinking through every detail.
Related contents:
Ultra-lightweight, semantic, zero-dependency HTML UI component library.
Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.
Professionally crafted React & Figma components for building beautiful products or starting your own design system.
UI Components and Blocks Built with Tailwind CSS.
Discover a curated collection of over 100 handcrafted UI components made with Tailwind CSS, React, and shadcn/ui. Designed for seamless integration, these components combine aesthetic precision with developer-friendly flexibility to help you build beautiful, production-ready interfaces faster.
A Sea-Change in the Look of Language by Nick Shinn.
Fonts that simulate the experience of reading in olden days, by diverse means.
Detect CSS Hacks & Modernise Your Code.
ReliCSS is a "CSS hack" detection tool designed to help developers identify and replace outdated browser-specific CSS hacks with modern, standards-compliant alternatives.
Related contents:
UxNote is a lightweight annotation bar for mockups and websites—drop one script to highlight, pin, and export feedback directly in the browser.
Related contents:
La classe Vanilla JS universelle pour Google Maps.
MagixMaps est une bibliothèque JavaScript légère, performante et sans dépendances (Vanilla JS), conçue pour intégrer l'API Google Maps (version 2026) dans tout projet web.
Hotpink vous permet de voyager au pays des couleurs web nommées, découvrir des teintes originales et leur histoire, et organiser et créer des palettes stylées.
Build expressive avatars fast.
Create unique, production-ready avatars with our powerful frameworks, beautiful themes, and intelligent predictive tooling. Mix and match to create 101,297,008+ unique combinations. No design skills required.
10M Free Icons & Stock Photos, SVG & PNG. Free Icons and Stock Photos, Made by Humans.
The world’s largest and most diverse collection of high-quality vector icons and photos. Crafted and curated by real human Creators.
Related contents:
Beautiful, open source, WebGPU-based charting library.
ChartGPU is a TypeScript charting library built on WebGPU for smooth, interactive rendering—especially when you have lots of data.
UI Components & Templates for Ruby on Rails. Stop fighting CSS and build beautiful Rails apps faster.
No more ugly Rails apps. Get professional-looking components and themes that work perfectly with Rails—no design skills required.
build generative UIs for the web. Consistent, cacheable generative UIs for the web.
syntux is the generative UI library for the web. It lets you build generative UIs that are consistent and flexible.
home of open source icons.
Iconify is an opensource library of icons - they also have an API which you can use to get the icon SVG.
AI → JSON → UI. AI-generated UI with guardrails.
When users prompt for UI, you need guarantees. json-render gives AI a constrained vocabulary so output is always predictable.
Predictable. Guardrailed. Fast.
Let users generate dashboards, widgets, apps, and data visualizations from prompts — safely constrained to components you define.
Related contents:
Beautiful UI components for AI tool calls.
Responsive, accessible, typed, copy-pasteable. Built on Tailwind, Radix, and shadcn/ui. Open Source.
Learn the theory and practice behind great animations with this interactive learning experience.
Related contents:
smooth squircle corners for HTML elements.
Monoco is a tiny JavaScript library that adds squircles (smooth corners) and other corner types to html elements.
OKLCH Color Pattern Generator.
Oklchroma is a color pattern generator that helps designers and developers create harmonious color scales based on the OKLCH color space. Instead of manually defining each shade, Oklchroma generates a complete set of color variables based on a single base color and using mathematical formulas in CSS to generate the rest of the colors.
Text Symbols Copy and Paste - Cool Symbols ✿ ➹ © ✔ ✦ ❥.
Symbol.so lets you copy and paste cool symbols from over 70 different categories including arrows, stars, hearts, flags, check marks, bullet points, math symbols, and many more. You can copy any symbol with just a click, along with its codes, including Unicode number, Alt code, HTML code, entity, HEX, CSS, and URL-encoded code.
Beautifully crafted animated icons*
an open-source (MIT License) collection of smooth animated icons for your projects. feel free to use them, share your feedback, and let's make this library awesome together.
Collection of animation snippets made for TailwindCSS.
A proof of concept of a viable drag and drop alternative.
Layrr is the visual editor for real code. Design visually, edit any stack, own everything. A browser coding agent interface for selecting elements and sending instructions directly to Claude Code.
Wirebrowser is a debugging, interception, and memory-inspection toolkit powered by the Chrome DevTools Protocol (CDP). It unifies network manipulation, API testing, automation scripting, and deep JavaScript memory inspection into one interface. With features like Breakpoint-Driven Heap Search and real-time Live Object Search, Wirebrowser provides researchers and engineers with precise, high-visibility tools for client-side analysis, reverse engineering, and complex application debugging.