Explore All Tools and Resources

Never start from blank Figma ever again! Website design components, app flows and color palettes!

Simple, headless, blogging CMS.

beautifully crafted animated icons.

Modular CSS Library that brings the beauty of Terminal UIs to the browser

Exploring why error handling in JavaScript is such a challenge, and how a simple question on X triggered a flurry of opinions.

An in-depth analysis of the top notification infrastructure solutions for developers.

Tactile Image Viewer.

iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.

The foundation of most web animations.

A drop-in replacement for @tailwindcss/typography, designed for use with shadcn/ui. Includes headings, paragraphs, lists and more.

A small CSS trick

Build flexible, declarative UIs like native HTML with Compound Components

The core problem is that toasts always show up far away from the user's attention.

How React preserves or resets state depends on component position and keys.

How to use Figma variables to stop variant bloat in your design system.

What made Honk ‘honkish’.

RetroUI - Retro styled component library built with React and TailwindCSS for modern web apps.

The Exa API retrieves the best, realtime data from the web for your AI.

Practical guide to the jobs and skills of the design engineer in tech.

A plugin that brings declarative support for the CSS Anchor Positioning API to Tailwind, allowing you to define and position elements relative to custom anchors.

Practical tips on how to go from good to great animations.

PostCSS plugin to create smooth linear-gradients that approximate easing functions.

Two worlds, two doors.

When I look around the web, most of the shadows I see are fuzzy grey boxes. It doesn't have to be this way, though!

Redaction is a bespoke typeface commissioned by Titus Kaphar and Reginald Dwayne Betts’ for The Redaction exhibition at MoMA PS1.

React hook library, ready to use, written in Typescript.

Let's dive into how UI component testing is approached today and how new tools released this year could simplify testing for the library authors.

Reshaped provides professionally crafted component libraries in React and Figma to make your product design and development faster.

An open-source checklist to help you plan, build and grow your design system.

Customize theme for shadcn/ui with tweakcn's interactive editor. Supports Tailwind CSS v4, Shadcn UI, and custom styles.

Master crafting exceptional user interfaces a course by Jhey Tompkins.

Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

A simple gradient generator tool made by designer for designers to create stunning gradients with customizable colors, text, and effects.

Best-in-class Design Systems collection with a repository of Components and Foundations references from top-tier tech companies and leading UI teams.

Notes on the proposed Item Flow system for grid, flexbox, and masonry.

An overview of techniques I’ve used to generate random gradient images.

Lower-level component library for building accessible higher-level UI libraries, design systems and web applications with React.

Exploring SVG and its visual effects applications.

The Dalai Lama walks into a bagel shop and says, "Can you make me one with everything?"

The ultimate Three.js course whether you are a beginner or a more advanced developer.

A course to build intuition through reasoning for interaction design by Rauno Freiberg.

Unlock the full potential of your UI design and engineering skillsets. Learn to design and translate polished components into HTML and CSS.

An interactive mini-course on creating SVG animations by Nanda Syahrasyad.

Animations on the Web is taught by one of the top interactive designers in the world, Emil Kowalski.

The right animations breathe life into web pages, while over-the-top ones can be a distraction. In this course, I will teach you the perfect balance, diving deep into the world of meaningful animations.

Add beautiful animations to your React apps using Framer Motion.

The all-new interactive learning experience that teaches you how to build cool stuff with React.

If you messed around with CSS for long enough, chances are you’ve tried at least once to make a... Tagged with webdev, frontend, css.

Cloud-native architecture meets built-in tracing and routing. Experience log management without compromise.

Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid and Lit.

Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit while retaining 100% control over markup and styles.

oss out that granular state management, manual refetching and endless bowls of async-spaghetti code. TanStack Query gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences.

A fully type-safe router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs.

Full-document SSR, Streaming, Server Functions, bundling and more, powered by TanStack Router and Vite - Ready to deploy to your favorite hosting provider.

Learn how Supabase works with Next.js to increase security and reduce development hours, and how Clerk integrates with this stack.

After years of searching for an effective approach to managing dialogs and modals, I finally discovered a reliable pattern.

Learn how to build B2B applications with Clerk and Supabase.

What exactly is a displacement filter? In this article, Dirk Weber will be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, Dirk has divided the article into three parts in which you’ll be exploring how the feDisplacementMap works, methods to create fancy displacement maps in SVG, and methods to animate the filter and create dramatic visual effects.

Generative Engine Optimization (GEO) is a new method to widen your digital content’s reach, and this article offers practical tips to make it work for you.

Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript

A modular, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Create Amazing Mockups.

Simplify Your DevOps. Learn how our platform can elevate your infrastructure management.

Format, lint, and more in a fraction of a second.

Authentication for the Web. Free and open source.

A collection of beautiful, modern React components. Open source. Open code. Free to use.

A flexible, open-source UI component library built on shadcn/ui, designed to simplify Supabase-powered projects with pre-built Auth, Storage, and Realtime features.

Free, no sign up required and easy to use tool to create charts from any CSV or JSON data.

Enums in TypeScript can be confusing, with differences between numeric and string enums causing unexpected behaviors.

A deep dive into Testing Library's .toBeVisible() and .toBeInTheDocument() matchers, exploring their differences, use cases, and best practices.

Free Stock Video Footage in 4K and HD to Download.

Choose from a range of syntax colors, hide or show the background, and toggle between a dark and light window.

Let's crack the code on how to do proper exit and enter animations on page transitions in Next.js App Router using Framer Motion.

Learn to think like a designer as an engineer.

People-centered software designer who dabbles with front-end engineering & nerds out on product strategy.

Simplifies styling based on ancestor state via style queries.

Looking to integrate a WYSIWYG editor into your JavaScript app?

A set of beautifully-designed, customizable plugins and components to help you build your rich-text editor.

The Component Gallery is a collection of components from the best Design Systems.

The world’s fastest and most reliable OLTP database.

An open-source, lightweight, unstyled, and composable emoji picker for React—originally created for Liveblocks Comments.

The open-source, affordable email platform that brings together marketing, transactional and broadcast emails into one single, complete solution.

World's most flexible commerce platform. The most popular ecommerce project on GitHub.

Helping the world learn from its data with event analytics everyone can use. Let’s build.

The most cost-effective video infrastructure for businesses of all scale.

Build and deploy reliable background jobs with no timeouts and no infrastructure to manage.

A powerful, privacy-friendly, open-source alternative to Google Analytics — lightweight, cookie-free, and easily integrated into any website or app.

A curated collection of typefaces that are available under a variety of free licences somewhere on the interwebs.

A CLI to scaffold your react custom hooks, with a focus on performance, reusability, and type-safety.

An open-source & self-hostable Heroku / Netlify / Vercel alternative.

The AI Toolkit for TypeScript, from the creators of Next.js.

An interactive guide to component composition with React Server Components.

Animation library for Tailwind CSS Library.

Open-source illustrations for any idea you can imagine and create.

Clone any website with pixel perfect accuracy.

A collection of easing graphs for web developers.

Core building blocks for AI apps. High-quality, accessible, and customizable components for AI interfaces.

Copy and paste components ready to use. Practical. Customizable.

Document, Discover and Test APIs with Scalar.

Customizable Starter Template with SSG & Instant Content Updates.

Beautiful UI Components for Web at Your Fingertips.

Why it's a good idea to use the URL to store state.

Accessible medium.com-style image zoom for React.

Monicon is a icon library for Modern Frameworks.

Get free-to-use Prebuilt React components powered by Tailwind CSS & Framer Motion.

A playground to explore App Router features.

The easiest way to add authentication and user management to your application.

Learn how to recreate a biological cell growth simulation using JavaScript and HTML5 Canvas.

The Open Source Firebase Alternative.

A free, open-source library for using feature flags in Next.js and SvelteKit.

Highly customizable React library for workflow builders, no-code apps, image processing, visualizers.

Discover the Best Web Design Tools for Creating Stunning Websites and Apps.

Built to make you extraordinarily productive, Cursor is the best way to code with AI.

Chat with v0. Generate UI with simple text prompts. Copy, paste, ship.

Replit is an AI-powered platform for building professional web apps and websites.

Tomorrow's editor, today. Windsurf Editor is the first AI agent-powered IDE that keeps developers in the flow.

Prompt, run, edit & deploy web apps.

Build software products, using only a chat interface.

Build, test, and send transactional and marketing emails at scale.

Revealing the elegant techniques and clever design patterns powering the Next.js website implementation.

One of the most underrated CSS properties.

Beautiful & consistent icon toolkit made by the community.

Ready-made responsive modal component for shadcn/ui.

Beautiful UI components and templates to make your landing page look stunning.

How the Atomic Design methodology can create a great design system from scratch and make better developers.

Beautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript.

UX Patterns for Artificial Intelligence Design.

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

Type-safe search params state management for React.

Find the best cursor rules for your framework and language.

A collection UI components and hooks for building media players on the web.

Supercharged React dataviz components.

By properly configuring a few key input attributes, you can make web forms much easier to use on mobile devices.

Internationalization (i18n) for Next.js.

Simple and private website analytics platform.

Beautiful, customizable components built with Base UI and Tailwind CSS.

An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.

Free Illustrations for your Documentation or Design System.

Handcrafted animated modern components build for performance and ready to use in your app.

Class Variance Authority.

A lightweight carousel library with fluid motion and great swipe precision.

Drawer component for React.

All-in-one platform for product analytics, feature flags, session replays, experiments, and surveys.

Turn any website into LLM-ready data.

A free collection of different editable SVG's to spice up your online and offline designs.

Build stunning websites with less effort.

The best screenshot rendering platform for developers.

A collection of composable, unstyled UI primitives for building accessible web applications.

Improving user experience with UUIDs.

Minimal typeface for devs/designers embodying Vercel's simplicity and speed.

A light weight javascript library that lets you draw graphics with a hand-drawn, sketchy, appearance.

The first fully RSC-compatible charting library and copy-paste capability.

A beautiful library with SVG logos.

Tiptap is a suite of content editing & real time collaboration tools.

Vercel's design system called Geist. Made for building consistent and delightful web experiences.

Learn how to type the "as" prop in React to dynamically change the rendered HTML tag.

The documentation you want, effortlessly.

The Next.js framework for building documentation sites.

The documentation you want, effortlessly.

The power of Mixpanel, the ease of Plausible and nothing from Google Analytics.

Bulk color convertor + modern CSS 4.0 support (OKLCH, P3, etc).

Color and typography tools for web developers and designers.

Automated AI localization for web & mobile apps.

Speed up your workflow with responsive, pre-built UI blocks designed for marketing websites.

Smooth payments for SaaS and Indie Hackers that don't break the bank.

Payment infrastructure for the 21st century.

See and share Core Web Vitals and PageSpeed Insights results simply and easily.

Stop wasting time building OTP inputs.

Build better responsive designs in less code.

A simple JavaScript tool for converting any layout you have to drag-to-swap layout.

An aesthetic and customizable circular visual component for React.

Speed up your website by 70%.

A time picker component for your shadcn ui app.

React UI components with Tailwind CSS for charts and dashboards.

A playground to test the Cache-Control header and its directives.

Solves the hard problems with embedding, storing, streaming, and customizing video.

Like Google Lighthouse, but it scans every single page.

Get your pages indexed within 48 hours.

Learn frontend as a specialized craft through videos and articles.

Type safe and validated Server Actions for Next.js projects.

A non-exhaustive list of details that make a good web interface.

Create unique logos quickly by sketching your ideas.

Beautiful UI components built with Tailwind CSS and React.

A React component to animate numbers. Dependency-free. Accessible. Customizable.

Extended shadcn-button with additional styles in a single component.

Displays an animated loading indicator, inspired by the Radix UI spinner design.

The most comprehensive authentication library for TypeScript.

Localization infrastructure made for fast-paced startups.

Ready to use, fancy React components to make the web fun again. Free & Open Source.

An unstyled drawer component for React, built with Base UI.

Generate beautiful Open Graph images with zero effort.

An opinionated toast component for React.

Extract color palettes from images.

A collection of best practices that designers can consider when building user interfaces.

Supercharge your Next.js MDX content workflow.

The easiest way to upload files to your app.

UI kit to make beautiful, animated interfaces, faster.

Look up popular software licenses summarized at-a-glance.

Interactive articles by SVG wizard.

React Scan automatically detects performance issues in your React app.

Digital library for designers and engineers.

CSS easing functions made easy.

Composable, accessible open-source components for shadcn/ui.

Learn methods to animate live cursors in collaborative tools.

A small JavaScript library to create and animate annotations on a web page.

Learn how to add texture to CSS gradients using SVG noise for a more realistic design effect.

Learn JavaScript design and performance patterns for building more powerful web applications.

Headless React PDF viewer for the web.

A fast, composable, unstyled emoji picker made with Tailwind & React.

Refined Typography and Components for your MDX Content.

Learn to style elements based on their DOM attributes for easier debugging, using Tailwind CSS.

A resource for web accessibility education.

A React hook for auto-scrolling to the latest message in AI chat apps.

Warp is the intelligent terminal with AI and your dev team's knowledge built-in.

Learn how to make anything abortable in JavaScript.

why we moved from RGB and HSL—Martian Chronicles, Evil Martians' team blog.