Open source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, accessible.

My first professional/coding related post in a while, this one dives into finding as inclusive a solution as possible for displaying the initials of users on a platform. What follows is not really a s

I’m Kitty Giraudel, a non-binary trans frontend developer based in Berlin, focused on accessibility and inclusivity.

Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls.

Call for inspiration using the purple hat for when you have inspiration blocks or need fresh new ideas. A great tool created by a deisnger for web professionals.

Learn how to build tooltips, menus, and more with the new popover API.

TL;DR: Be careful when using the word menu. Be certain you have chosen the term that accurately describes the control you want. If this post looks familiar to you, that is because it is essentially a redress of my 2020 post Stop Using ‘Drop-down’. It is not as divergent as…

How can we make disabled buttons more inclusive? When do they work well, and when do they fail on us? And finally, when do we actually need them, and how can we avoid them? Let’s find out.

A strategy to help ease some of the pain and confusion when deprecating unwanted components from your Figma design system.

I found a pretty reliable way to create flexible, responsive custom tables in Figma. I’ll do a video walkthrough at some point, but if you want to play… https://t.co/cibZI3Uk4g— Buzz Usborne (@buzzusborne) April 6, 2022

Accessibility, inactive buttons and WCAG

While keeping things simple for your design teams

Everything has a shelf life, a time when something has served its purpose and it’s no longer needed. While we talk a lot about how to start a design system, it’s not often talked about what to do w...

Tables frequently appear on the web but aren’t easy to design and code. This illustrated guide explains the table anatomy and how to build a table, keeping in mind its future elaboration.

Test text fields for inputmode: decimal, email, verbatim, none, numeric, search, tel, text and url

Autocomplete / Combobox / Search autocomplete features are provided at 80% of e-commerce sites, yet only 19% achieve the highest performance. See our latest large-scale test findings for on-site search.

In this first part of a two-part article, Eduard Kuric analyzes the characteristics of effective toggle buttons that make it error-proof and prevent confusion and frustration of users.

The problem of how to design an effective toggle button that shows the selected option clearly is a long-term open question among UI/UX designers. In this second part, Eduard Kuric explains a complex list of visual cues used by toggle buttons to communicate which of their options is active.

We are very excited to announce the release of the React Aria and React Spectrum date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes @internationalized/date, a brand new framework-agnostic library for locale-aware date and time manipulation.

Explore 1000s of components and libraries

Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.

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