Draft UI


The purpose of Draft UI is to make building accessible applications faster and easier than ever

Make It Your Own

I've intentionally avoided using the Tailwind config and arbitrary values as much as possible. While you are welcome to copy and paste these components and use them in your projects as-is, the goal of this project is to get your projects up and running as quickly as possible without having to worry about accessibility and interactivity.

Special Thanks

There are many OSS projects who have inspired and power the backbone of this project. This project is a combination of other folks really hard work so I'd like to recognize and thank them:

  • shadcn/ui: Without the inspiration of shadcn/ui, this project would not exist. The idea to create a beautiful, copy and paste library opened my eyes on how to make a useful tool without having to worry about bundling, distribution, and a bunch of other things I don't know much about.

  • React Aria Components: The backbone of this project. I consider React Aria to be the de facto accessibility library on the web. Creating React Aria Components has made it easier than ever to build UI that is functional and accessible to all users.

    I'd especially like to acknowledge @devongovett who has been representing React Aria on Twitter and has been very communicative about the team's progress and quick to respond to feedback.

  • Chakra UI: Although not directly involved with this project, I leveraged many of their styling decisions where I wanted additional flexibility with components. I also heavily relied on their naming to conventions to compose components.

    I've also been heavily combing through their repo to better understand how their Storybook and Docs are working together.