Draft UI

A collection of simply designed React components focused on making web acce...

README

draft-ui


Introduction


Copy and paste-able components built with React Aria Components and Tailwind CSS

Draft UI has been massively inspired by shadcn/ui so I encourage you to take a look at their introduction page.

Long story short, Draft UI follows all the same ideals:

- Copy and paste components give you full control over the component code, it is yours to use.
- Modify and adapt to your hearts content, using these docs as a starting point.
- These components should be able to be used in any framework that supports React.
- Draft UI is free to use on any personal or commercial projects. And if you do, let me know!

Installation


Here's everything you need to get started

Install TailwindCSS

Depending on your project, steps to install Tailwind may vary. Check out their installation page for guidance.

Install Required Dependencies


  1. ``` sh
  2. npm install react-aria-components@1.0.0-rc.0 cva@beta tailwind-merge tailwindcss-animate tailwindcss-react-aria-components@1.0.0-beta.1
  3. ```

This project requires the following packages:

- react-aria-components@1.0.0-rc.0
- cva@beta
- tailwind-merge
- tailwindcss-animate
- tailwindcss-react-aria-components@1.0.0-beta.1

Install Icons


Draft UI uses Lucide Icons by default. You can use whichever library you prefer, but you'll need to replace the default icons manually.

  1. ``` sh
  2. npm install lucide-react
  3. ```