Design System Playground

About

This repository demonstrates how you can build a design system that ensures consistent UI, reusable components, styling guidelines, and has accessibility at its core.

Setup

Clone this repository and install dependencies:

git clone https://github.com/Nhollas/design-system-playground.git
cd design-system-playground
npm install

To start the development environment:

npm run dev

Contributing

Open an issue or submit a pull request for any improvements or bug fixes. Contributions are welcome!

Tools

• Tailwindcss V4: Provides utility-first styling across UI components.
• React Aria Components: Helps with accessible interaction patterns and behaviors.
• React Hook Form: Handles complex form states and validations.
• Zod: Ensures robust schema validation for form data.
• Tanstack Query: Manages server-state, caching, and data fetching logic.

Showcase

Here are some screenshots of the app in its current state: