Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rhinobase/raftyui

React + TailwindCSS Component Library
https://github.com/rhinobase/raftyui

component-library react tailwindcss ui-components

Last synced: 9 days ago
JSON representation

React + TailwindCSS Component Library

Host: GitHub
URL: https://github.com/rhinobase/raftyui
Owner: rhinobase
License: mit
Created: 2023-02-07T12:45:35.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-09-24T11:57:35.000Z (11 days ago)
Last Synced: 2024-09-25T01:47:48.198Z (11 days ago)
Topics: component-library, react, tailwindcss, ui-components
Language: TypeScript
Homepage: https://rafty.rhinobase.io
Size: 22.6 MB
Stars: 111
Watchers: 2
Forks: 4
Open Issues: 11
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

# Rafty UI

## React + Accessibility + Tailwind CSS

Rafty UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

---

## Features

- **Works out of the box** - Rafty UI contains polished React components that work out of the box.

- **Flexible & composable** - Rafty UI components are built on top of a Radix UI Primitive and Tailwind CSS for endless composability 🧰.

- **SSR** - Rafty UI components support React SSR functionality 😍.

- **Dark Mode** - All components are dark mode compatible 🌙.

## Looking for the documentation?

Check it out at [rafty.rhinobase.io](https://rafty.rhinobase.io)

## Quick start

Rafty UI is made up of multiple components and tools that you can import one by one.

### Installing Rafty UI

To use Rafty UI in your project, run one of the following commands in your terminal:

```sh
npm add @rafty/ui
# or
yarn add @rafty/ui
# or
pnpm add @rafty/ui
```

### Setup

For the styling to work in `@rafty/ui`, you must make a few changes to your `tailwind.config.js` file.

First, install the `@rafty/plugin` package as devDependencies

```sh
npm add -D @rafty/plugin
# or
yarn add -D @rafty/plugin
# or
pnpm add -D @rafty/plugin
```

And in your `tailwind.config.js` file

```js
module.exports = {
darkMode: "class",
content: [
// ...,
"./node_modules/@rafty/**/*.js",
],
theme: {
extend: {
// (Optional)
// Extend the default configuration
colors: {
primary: colors.purple,
// ...,
},
},
},
plugins: [
// ...,
require("@rafty/plugin"),
],
};
```

## Connect with us

Whether you're a beginner or an advanced Rafty UI user, joining our community is the best way to connect with like-minded people who build great products with the library.

### Contributing

Feel like contributing? That's awesome! We have a [Contributing Guide](https://github.com/rhinobase/raftyui/blob/main/CONTRIBUTING.md) to help guide you.

### Join the community

Connect with a vibrant community of developers, and designers on Discord at [discord.gg/rhinobase](https://discord.gg/YtzxUfCk8c). Share your experiences, exchange insights, and shape the evolution of @rafty/ui.