.svg){kind=icon}
A curated list of awesome things related to shadcn/ui.
Material 3 is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.
The definitive CSS UI library for glassmorphism
A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.
A Guide to Learning CSS Grid by Jonathan Suh
CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. This guide was created as a resource to help you better understand and learn Grid, and was organized in a way I thought made the most sense when learning it.
Tailwind CSS Color Generator
Press spacebar, enter a hexcode or change the HSL values to create a custom color scale.
CSS gradients using CSS colors functions introduced in 2023.
Design details that feel like magic
This demo only works in Chromium 125+. Example of futur CSS anchor tool.
Overview of Tailwind colors
All the Tailwind CSS colors in a handy cheatsheet with hex, hsl and rgb values.
You can bookmark this page so you'll never forget any Tailwind color again!
Small, feature-rich calendar components
Simple UI examples from my social media.
This is repository with examples of simple UI components. The repository is based on Next.js and React.js.
System font stack CSS organized by typeface classification for every modern OS.
The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.
a package manager for the web.
Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
Build services that earn trust.
IF curates this catalogue to help teams design trustworthy services that work for people. Contact IF for workshops about how to use these patterns.
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
Let your page react to scroll changes.
The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add custom offsets per element, or set offsets on the viewport (e.g. always trigger after the element reaches 20% of the viewport)
Free digital design resources. Wonderfully Curated Design Resources.
Sleek, modular open source JavaScript file uploader
Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly with any application. It’s fast, has a comprehensible API and lets you worry about more important problems than building a file uploader.
Uppy fetches files locally and from remote places like Dropbox or Instagram. With its seamless integration, reliability and ease of use, Uppy is truly your best friend in file uploading.
Here at Pa11y, we think making the web more accessible improves it for everyone. So we publish a range of free and open source tools to help designers and developers make their web pages more accessible.
Bento Grids is a curated collection of tiles-based layouts that were popularized by Apple with their summary slides.
The main idea behind bento is to present the key takeaways in a very visual and easy-to-consume way. Bento layouts are great for showcasing brand identity, summarizing product features, and much more.