Getting Started
Dark Mode
Charts
Colors
Drag-and-drop
Forms
Utilities
Introduction
Embark on a witty adventure with this open-source design system using React Aria. Master troubleshooting tips to solve missing props in your React app.
Introduction
Justd is more than just a design system. It is a comprehensive toolkit designed to make creating accessible, visually stunning, and highly customizable user interfaces effortless. Built on top of React Aria Components, Justd leverages their accessibility-first approach to ensure your designs are inclusive and meet modern accessibility standards, allowing you to focus on delivering exceptional user experiences.
Why choose Justd? It includes Tailwind CSS for seamless, modern styling, a beautifully crafted icon library to enhance your designs, and a robust color system offering four formats and shades from 50 to 950. This flexibility ensures your designs are consistent, scalable, and visually appealing.
With Justd, you are not just designing interfaces. You are crafting experiences that leave a lasting impression.
Shoutout
A huge thank you to Devon Govett and the React Aria team for their outstanding work on the React Aria Components. Their dedication has set a new benchmark for excellence! I also want to extend my gratitude to Adam Wathan and his team for creating the incredible Tailwind CSS. This project wouldn’t be possible without it.
What's the scoop on React Aria?
React Aria offers a collection of foundational React components and hooks designed to facilitate the creation of accessible, high-quality UI components effortlessly.
It includes key features like accessibility, internationalization, smooth interactions, and intelligent behavior, allowing you to focus on designing your unique aesthetic. Tested across various devices and assistive technologies, React Aria ensures a seamless user experience for everyone.
Why React Aria?
React Aria is an excellent starting point for developing accessible React components and provides a great opportunity to learn how to build your own. It is especially beneficial for testing your components in real-world scenarios, which is crucial for deploying them in production environments.
Tailwind CSS
All components are built with Tailwind CSS v4, which provides a robust set of utility classes for styling. This allows you to quickly and easily customize the appearance of your components without having to write custom CSS.
FAQ
This is a list of frequently asked questions about Justd.
- Is it free and open source? Yes.
- Is it a design system? Yes.
- Is it a component library? No. Just copy and paste.
- Can I use it outside of React? No.
- What frameworks are supported? Anything that supports React.
- Can I use it with TypeScript? Yes, in fact, it is written in TypeScript.
- Can I use it to my Project? Yes, you can use it for both personal and commercial projects without needing to provide attribution. However, I’d love to see what you build, so if you’re up for it, let me know 🙂