web-design
Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.
The Markdown Editor That's a Textarea.
A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~45KB minified with all features.
View the source of this page for an example of how to implement a lightweight preview image for YouTube videos that is resilient to image load failures. There is no iframe on this page at load time. The iframe is only created when the user clicks the preview.
Related contents:
The Developer-First Cookie Banner
c15t is an open source framework for managing cookies, consent, and privacy compliance. Built for modern web apps. It’s fully customizable, framework-agnostic, and designed to give developers full control over the user experience without black-box logic or vendor lock-in.
c15t (consent management) unifies analytics, consent tracking, and privacy controls into a single performant solution. Built for modern development teams, it transforms privacy management from a compliance burden into a fully observable system.
Zero-runtime Stylesheets-in-TypeScript.
Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.
Related contents:
Prebuilt UI blocks to ship beautiful MVPs fast.
Copy-paste beautiful, responsive components without worrying about styling or animations. Build faster, launch sooner.
MVPBlocks is an open-source component library for developers to copy, customize, and launch MVPs lightning-fast—no installations, just pure productivity.
A custom registry of composable, accessible and open source shadcn/ui components.
Community-Powered Animation Magic. Get your animations easily done with only Tailwind CSS classes.
Hundreds of ready-to-play sound effects for your React applications Add delight to your UI with just a few lines of code
Critical CSS refers to the minimal set of CSS rules required to render the visible portion of a webpage (above the fold). By extracting and inlining this CSS into your HTML, the browser can render content faster without waiting to load all stylesheets, improving performance and Core Web Vitals like First Contentful Paint (FCP).
Hello, and welcome to CSS Hell, where you will be subjected to 15 unimaginably torturous CSS puzzles. "What did I do to deserve this?", you ask. But you know perfectly well: you blashpemized Cascading Style Sheets. I saw that time your friends were complaining about CSS and you piled on with "CSS isn't even a real programming language"
Build the 2D and 3D Web Without Coding. Your visual workspace for React / Three Fiber.
Triplex is your visual workspace for building React / Three Fiber components. Build 2D and 3D components without coding using its visual and input controls. Jump down to code when you need to.
Related contents:
Tailwind CSS grid generator is a tool that helps developers create custom Tailwind grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size, the DIV width (span).
Related contents:
Theme Editor & Generator. A visual no-code theme editor for shadcn/ui components.
tweakcn is a powerful Visual Theme Editor for tailwind CSS & shadcn/ui components. It comes with Beautiful theme presets to get started, while aiming to offer advanced customisation for each aspect of your UI
AMP is a web component framework to easily create user-first experiences for the web.
Related contents:
Test and preview fonts.
Pick fonts for your website without breaking your head. Test fonts on live websites .
Pick fonts that demand Attention. Text makes up 80% of your UI, the rest are white spaces. The right font doesn't just display information—it shapes perception. Choose the perfect font, and turn casual visitors into loyal customers.
React components & templates for building rich text editor UIs with Tiptap.
Tiptap UI Components is a library of modular, MIT-licensed React components, templates, and primitives that help you build rich text editor UIs faster, on top of the headless Tiptap framework.
A growing library of fancy, fun, animated react components & microinteractions to make the web fun again. Free & Open Source.
gallery of error 404 page designs.
A place to find all those lost pages, worth finding.
WebTUI is a modular CSS library that brings the beauty of Terminal UIs to the browser.
tool to compute lighthouse score
Related contents:
A drop-in image optimization service for the modern web.
PicPerf is a drop-in service for making your website's images light, modern, and fast. Just prefix your image URLs or use an official integration (WordPress, Statamic, & more) to start reaping the benefits.
Related contents:
mCaptcha is proof-of-work based captcha system that is privacy focused and fully automated. A no-nonsense CAPTCHA system with seamless UX.
mCaptcha is a privacy respecting, free CAPTCHA system with a kickass UX. Your users no longer have to interact with ridiculous image-based CAPTCHA system, wasting precious mental bandwidth. Instead, your computer will do the work for you, see for yourself!
Component Library. Ruby gem for RubyUI Components.
A UI component library, crafted precisely for Ruby devs who want to stay organised and build modern apps, fast. Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
An Alpine & Tailwind UI Library.
Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects.
Related contents:
UI & UX design inspiration for mobile & web apps.
Discover real-world design inspiration. Featuring over 300,000 screens and 1,000 iOS, Android & Web apps — New content weekly.
Related contents:
A GPU compute-centric 2D renderer.
Vello is a 2D graphics rendering engine written in Rust, with a focus on GPU compute. It can draw large 2D scenes with interactive or near-interactive performance, using wgpu for GPU access.
Related content:
Become a better frontend developer.
Take your frontend skills to the next level by recreating real websites from real companies.
The perfect type of practice for developers of all skill levels. Are you up for the challenge?
JavaScript Canvas 2d Library.
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Refreshingly simple. Premium icons for websites and applications.
Related contents:
Curated colors in context.
Not sure what colors to use in your designs or where to use them? Happy Hues is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.
Kibo UI is a custom registry of composable, accessible and open source components designed for use with shadcn/ui.
Free design tools for UI & UX designers.
This is a shadcn table with server-side sorting, filtering, and pagination. It is bootstrapped with create-t3-app.
Run JS when a CSS property changes. Any CSS property.
A robust, production-ready library to observe CSS property changes. Detects browser bugs and works around them, so you don't have to.
Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
Design inspiration hub. Designers' Secret Source The best design inspiration - expertly curated for you.
Muzli is a new-tab browser extension that instantly delivers relevant design stories and inspiration to keep you in the loop.
Related contents:
Accessible React components made for you to copy, customize, and own.
Justd is a chill set of React components, built on top of React Aria Components, all about keeping the web accessible. Easy to customize and just copy & paste into your React projects. Plus, it includes Tailwind CSS for sleek styling right out of the box.
Fluid Responsive Design. Elegantly scale type and space without breakpoints.
Instead of tightening our grip by loading up on breakpoints, we can let go, embracing the ebb and flow with a more fluid and systematic approach to our design foundations.
Related contents:
A lightweight, GDPR and CCPA compliant Consent Management Tool written in vanilla JS.
Related contents:
An opinionated CSS starter kit for your "nobuild" application.
An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
A carefully curated collection of high-quality React component libraries and design systems. Each library has been selected for its unique features, documentation quality, and community support.
fixi.js is an experimental, minimalist implementation of generalized hypermedia controls.
The fixi api consists of six HTML attributes, nine events & two properties.
the color palette for internet lovers.
uchū is the color palette for internet lovers, by NetOperator Wibby. uchū utilizes the OKLCH color space for reasons. I've been using this color palette for personal projects for about a year and have been quite pleased with it.
Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework for rapid UI development.
Related contents:
Velvetyne is an association and collective dedicated to researching and disseminating typography and typeface creation. Our efforts manifest through collective creation workshops, public engagements, and the promotion of open, playful tools that embrace an uninhibited approach to typography. Our editorial practice revolves around building a politically and artistically supported typographic universe, collaborating with diverse and engaged authors. Together, we give life to fonts and graphical objects under open licenses, allowing for their use, modification, and redistribution. Additionally, we explore unconventional paths, fostering transparency and inclusivity to make typeface creation more open and dynamic.
A fast, composable, unstyled emoji picker made with Tailwind & React.
SVG Drawing Animation Generator.
SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain Css code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.
Related contents:
SVG animation tool.
SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.
Related contents:
Cursor for Designers.
The power of Cursor for your own React website. Onlook lets you visually edit your React website and write your changes back to code in real-time.
The open source Cursor for Designers. Design directly in your live React app and publish your changes to code.
Simple. Powerful. Unobtrusive. Build modern web applications with a framework that puts you first.
Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. 😉
Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.
Animated UI Components For React.
An open source collection of animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and on the web!
Related contents:
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide.
To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings.
Related contents:
SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics. Its modular, easy-to-use components emphasize precise monospace character spacing and line heights, enabling you to quickly copy and paste implementations while maintaining a clean, efficient codebase.