Skip to content

Latest commit

 

History

History
171 lines (128 loc) · 5.18 KB

README.md

File metadata and controls

171 lines (128 loc) · 5.18 KB
Raw

Fluid UI logo

Fluid UI

NPM License

Fluid UI is an elegant component library for React. It is built on top of mordern libraries like tailwindcss, headlessui and framer-motion.

Demo: fluid-design.io/docs/

Introduction

  • Beautiful by default: Fluid UI provides incorporates the best practices of modern design systems, and is designed to be beautiful by default.
  • Tailwind CSS: Every element is built with Tailwind CSS, which means you can override any style with your own CSS.
  • Themeable: By passing the primary color under tailwind.config.js, all components' accent colors will be updated accordingly.
  • Customizable: You can use most of the components as is, but it can be customized to fit your needs. See the documentation for more details.

Getting Started

Installation

npm install @fluid-design/fluid-ui

# or

yarn add @fluid-design/fluid-ui

Configure tailwind

Add a primary color theme to your tailwind.config.js file, you can go to Color UI Generator to generate a color theme.

We recommend using non var-based color theme, because the library is using and transforming based on the given colors. However, var-based color theme still works, but you might need to adjust the color theme manually.

module.exports = {
  // Add the following to your tailwind.config.js file:
  darkMode: 'class',
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@fluid-design/fluid-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
        gray: {
          50: '#f4f7fb',
          100: '#d8dbdf',
          200: '#bdc0c4',
          300: '#a2a5a9',
          400: '#888b8f',
          500: '#6f7276',
          600: '#575a5d',
          700: '#404346',
          800: '#2b2d30',
          900: '#17191c',
        },
      },
      // Other extended theme properties
    },
  },
  plugins: [
    require('@fluid-design/fluid-ui/dist/plugin/core'), // main plugin
    require('@fluid-design/fluid-ui/dist/plugin/button'), // for button component
    require('@fluid-design/fluid-ui/dist/plugin/tooltip'), // for tooltip component
  ],
};

Tailwind Plugins

If you don't want to opt-in to use components, you can also use the tailwind plugins directly.

module.exports = {
    //...
    plugins: [
    require('@fluid-design/fluid-ui/dist/plugin/core'), // main plugin
    require('@fluid-design/fluid-ui/dist/plugin/button'), // for button component
    require('@fluid-design/fluid-ui/dist/plugin/tooltip'), // for tooltip component
  ],
}

Examples

The Example Page provides many possiple ways to group components into a nice-looking ui.

It is the perfect starting point for learning and building your own app.

Or check out some examples from below:

Select

CleanShot.2023-02-04.at.13.54.40.mp4

Switch

CleanShot.2023-02-04.at.14.02.43.mp4

Accordion

CleanShot.2023-02-04.at.14.01.29.mp4

Button

CleanShot.2023-02-04.at.14.02.06.mp4

Future Goals

Fluid UI will continue to evolve and grow. Here are some of the features we are working on:

  • Accordion ✅
  • Tab ✅
  • Button ✅
  • Menu ✅
  • Forms - Combobox ✅
  • Forms - Select ✅
  • Forms - Switch ✅
  • Forms - Input ✅
  • Forms - Textarea ✅
  • Forms - Validation ✅
  • Plugin - Button ✅
  • Plugin - Tooltip ✅
  • Dialog (Modal) ✅
  • Toast ✅
  • UI - Card ✅
  • UI - List ✅
  • Popover 🚧

Issues

We would love to hear from you! If you have any feedback or run into issues using our library, please file

an issue on this repository.