Getting Started

Learn how to use this library and start creating.

That library was created as a result of a side project I built to experiment with some features and it contains a collection of reusable React components for fast development and almost zero lock-in.

Please note that this is not a packaged component library served with an npm package. Instead, you can simply copy and paste the components into your project to start using them immediately.

Credits

Before we dive into the details, i would like to give credit to @shadcn for his excellent work, which has been a great source of inspiration for this component library.

Prerequisites

Although you can easily repurpose them, all the examples you will find are made with React, and use TailwindCSS for styling.

So before using the components, in addition to the two dependencies already mentioned, you need to ensure that you have the following dependencies installed in your project:

  • clsx: A tiny utility for constructing class names in JavaScript.
  • tailwind-merge: A utility for merging Tailwind CSS classes.
  • class-variation-authority: A library for managing class variations in components.

Usage

Each component will have a preview available that will allow you to see the result immediately, and a small toggle to view its anatomy. Something like this:

Primary

You will also always find on each page, a section containing a link to the component's source code that you can copy and paste for your own development.

Contribution

This library is used primarily for my indie projects, and will be enriched, as I go along with new components, that said if you find a bug or have any interesting ideas, feel free to open a PR on GitHub, or write me on Twitter!

License

This library is completely free and open-source, released under the MIT License. You are welcome to use, modify, and distribute the code as per the terms of the license.