Light

rhinobase / raftyui Goto Github PK

View Code? Open in Web Editor NEW

108.0 2.0 4.0 23.77 MB

React + TailwindCSS Component Library

Home Page: https://rafty.rhinobase.io

License: MIT License

JavaScript 2.56% TypeScript 96.61% CSS 0.74% Shell 0.02% HTML 0.06%

component-library react ui-components tailwindcss

raftyui's Introduction

Rafty UI

React + Accessibility + Tailwind CSS

npm bundle size

LICENSE

Downloads

GitHub Repo stars

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

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:

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

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

And in your tailwind.config.js file

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 to help guide you.

Join the community

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

Follow us on Twitter for the latest news @rhinobaseio

raftyui's People

Contributors

Stargazers

Watchers

Forkers

nikaswani trace2798 ecomnazar sureshkuchana

raftyui's Issues

Merge stories and docs

we should deploy the stories also with the docs

feat: @rafty/corp package

These components need to be added in @rafty/corp package

fix: tailwind plugin doesn't work internally

The plugin doesn't work in docs and storybook

Add currency input

Add currency input field component
Add docs for currency input field
Create storybook for currency input field

Add capability to close an open Accordion

Right now, the according component can be opened but it cannot close itself without any other accordion item of it's group is opened.

Item 1 opened:

Item 1 closing only when item 2 opened

IMO - it's better if we can make any accordion can close themself.

Would love to open a PR for this if this is approved

Improve Data Table

Add virtualization
Add auto headers capabilities

fix: improve avatar group component

max prop's logic is not correct as max should be positive number more than or equals to 1

Sandpack editor not rendering tailwind classes

Integration examples are not working when opened in the code sandbox editor

fix: correct all the API of the docs

Improve all the APIs of the components in the docs

fix: improve Scroll Area

Need to improve the API of the ScrollArea component.
Add virtualization to ScrollArea.

feat: Improve @rafty/corp Combobox component api

Change Combobox api from prop based to subcomponent based to make it more customizable and flexible.
Add functionality to render custom trigger and custom content by user.
Add virtualization using improved scrollarea api

Size property not correctly implemented

Missing size prop support in tooltip
Tag improve overall sizing

Bug: plugin not working correctly

padding classes given in plugin file are not working
border radius classes given in plugin file are not working

feat: auto publish package on new tag push

Add a GitHub workflow to publish the package on tag push
With GitHub release

fix: improve navigation menu api and animations

Add the new animations for the navigation menu
Improve the whole navigation menu API & UI

fix: Make all the pages static rendered

Right now all the docs pages are dynamic, we need to make them all statically rendered.

Convert plugin package from ts to js

Convert from .ts to .js package to improve compile times. As we are not using any types

Migrate to BiomeJS

Migrate our build systems to @biomejs/biome

Improve Theme Builder

Improve the theme builder to include all the components offered by Rafty
Remove the card-based components
Add a sidebar menu to customize the settings

fix: virtualization in combobox using scrollarea

Implement an example to use virtualization in combobox using scrollarea component.

Expire Time Month Selection Keyboard Input Issue

I've identified an issue with the Expire Time Month Selection component located at https://rafty.rhinobase.io/themes. When attempting to select a month using the keyboard, the component does not respond as expected. This issue hinders the ability to navigate and select months using keyboard inputs, which can be a significant accessibility concern.

Steps to Reproduce:

Navigate to the Expire Time Month Selection component at https://rafty.rhinobase.io/themes.
Attempt to select a month using the keyboard (e.g., using arrow keys, typing the month, etc.).
Observe that the component does not respond to keyboard inputs.

Nextjs Page Router example not working

Example not working in stackblitz

Merge isBarebone and isUnstyled into a single property

It is confusing to have 2 different wording to achieve the same thing. We should make it a single property isUnstyled to mark the component and its sub components for un-styling, in all the components.
Also update the docs to reflect these changes

feat: Add tailwind merge

Add tailwind-merge in the classNames function

Support for i18n

All components should support i18n standards in

@rafty/ui
@rafty/corp

package

docs: fibr integration example not working

The example in the docs for the fibr package is not working

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.