Fluid UI

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
• Getting Started
  • Installation
  • Configure tailwind
• Tailwind Plugins
• Examples
• Future Goals
• Issues

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.