Skip to content

An empty boilerplate template to start a fresh project

License

Notifications You must be signed in to change notification settings

fluid-design-io/fluid-ui

Repository files navigation

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.