Fluid Design UI Library

website·Indexed 32 days ago

A modern React UI library providing responsive components with smooth transitions and dark mode support. It includes a comprehensive set of UI elements such as Accordions, Buttons, Cards, Dialogs, and Tabs, as well as form components built on Formik. The library also offers TailwindCSS plugins for buttons and tooltips.

Tokens: 12.1K
Snippets: 58
Records: 73
Agent score: 49%

What's inside Fluid Design

Overview of List components
Lists are UI components composed of multiple rows of items. They are typically used to display sets of items with similar data structures, such as a combination of images and text. List items can contain various elements including text, buttons, toggles, icons, and thumbnails.
https://fluid-design.io/docs/ui/list/
Overview of Fluid Design React UI Library
Fluid Design is a React UI library providing modern components with a strong emphasis on accessibility (a11y) and smooth transitions. It is designed to be compatible with any React project and focuses on creating components that work for all users, including those using screen readers, high-contrast modes, and those who prefer reduced motion. The library leverages Headless UI to implement focus management and keyboard navigation.
https://fluid-design.io/
Implement Button accessibility
Fluid UI Buttons are keyboard-focusable and support high-contrast mode (increasing contrast and font weight).
- Use the label prop for basic screen reader support.
- Use the sr prop to provide a more descriptive custom string for screen readers.
```
<Button label='Create' sr='Create a new post' />
```
https://fluid-design.io/docs/button/
Enable multiple selections in Select
To allow multiple selections, set the multiple prop to true. To restrict the number of selections, set multiple to a specific number. When using multiple selection, the initialValues for that field in the Form should be an array.
```
<Select 
  name='cars' 
  list={cars} 
  label='Select cars' 
  multiple={4} // Allows up to 4 selections
/>
```
https://fluid-design.io/docs/form/select/
Install and configure the Tooltip Plugin
The Tooltip Plugin is a purely CSS-based solution that requires no JavaScript. It must be installed via npm and registered in the Tailwind CSS configuration file alongside the core plugin.
```
npm install @fluid-design/fluid-ui
```
```
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@fluid-design/fluid-ui/dist/plugin/core'),
    require('@fluid-design/fluid-ui/dist/plugin/tooltip'),
    // ...
  ],
};
```
https://fluid-design.io/docs/plugin/tooltip/

Validate Fluid UI Input fields using Yup

Fluid UI forms use Formik internally, allowing for field validation via Formik's API or Yup schemas. Pass a Yup validation schema to the validationSchema prop of the Form component to enforce constraints on Input fields.

import { Form, Input, SubmitButton } from '@fluid-design/fluid-ui';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Email is invalid').required('Email is required'),
  password: Yup.string()
    .required('Password is required')
    .min(8, 'Password must be at least 8 characters'),
});

// Inside component return:
<Form
  initialValues={{ name: '', email: '', password: '' }}
  validationSchema={validationSchema}
  onSubmit={(values, { setSubmitting }) => {
    // handle submission
  }}
>
  <Input name='name' label='Name' type='text' />
  <Input name='email' label='Email' type='email' />
  <Input name='password' label='Password' type='password' />
  <SubmitButton>Submit</SubmitButton>
</Form>

Install the Fluid UI Button Plugin

Install the @fluid-design/fluid-ui package via npm and register both the core plugin and the button plugin in your tailwind.config.js file.

npm install @fluid-design/fluid-ui

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@fluid-design/fluid-ui/dist/plugin/core'),
    require('@fluid-design/fluid-ui/dist/plugin/button'),
    // ...
  ],
};

Install @fluid-design/fluid-UI
Install the @fluid-design/fluid-UI library using npm or yarn.
```
# Using npm
npm install @fluid-design/fluid-UI

# Using yarn
yarn add @fluid-design/fluid-ui
```
https://fluid-design.io/docs/usage/

Configure Combobox for advanced selection scenarios

The Combobox supports several advanced configurations:

Object Data Sources: Use itemKey to specify which property of the object should be displayed as the label.
Multiple Selection: Set multiple to true for unlimited selection, or provide a number to limit the maximum number of items a user can select.
Disabled Items: Use disabledKey to specify the key of an item in the list that should be non-interactive.
Empty Options: Enable hasEmptyOption and set emptyOptionText to provide a default 'null' or 'unspecified' choice.

import { Combobox } from '@fluid-design/fluid-ui';

// Example: Multiple selection with a limit of 4 items and a disabled option
<Combobox
  name='food'
  itemKey='name' // Used when list contains objects
  disabledKey='unavailable' // Disables the item with this key
  list={foodData}
  label="What's on the menu? (max 4 items)"
  placeholder='Select your favorites'
  multiple={4}
/>

// Example: Adding an empty/unspecified option
<Combobox
  name='reservationTime'
  label='Reservation Time'
  placeholder='Select a time'
  list={reservationTimeData}
  hasEmptyOption
  emptyOptionText='Unspecified'
/>

Validate arrays and objects in forms

You can use Yup's array() or object() methods within the validationSchema to validate complex data types, such as multi-select inputs. This is useful for enforcing minimum or maximum selection limits.

import { Form, Select } from '@fluid-design/fluid-ui';
import * as Yup from 'yup';

function Example() {
  const validationSchema = Yup.object().shape({
    food: Yup.array()
      .min(1, 'You must select at least one food')
      .max(4, 'You can only select up to 4 foods'),
  });

  return (
    <Form
      onSubmit={() => null}
      initialValues={{ food: [] }}
      validationSchema={validationSchema}
    >
      <Select
        name='food'
        itemKey='name'
        list={foodList}
        label='Food'
        placeholder='Select food'
        multiple
      />
    </Form>
  );
}

Handle Nested Modals and Focus Trapping
Fluid Design modals support nested modals (e.g., a confirmation dialog appearing over another modal). Because they are built on Headless UI, they include built-in focus trapping: when a modal is open, keyboard focus is trapped inside the modal and interaction with the rest of the page is disabled until the modal is closed.
```
import { Button, useModal } from '@fluid-design/fluid-ui';

const NestedComponent = () => {
  const [presentModal] = useModal(NestedModal1);
  return <Button label='Nested Modal' onClick={() => presentModal()} />;
};
```
https://fluid-design.io/docs/dialog/
Add icons to Buttons
Icons can be added using icon, iconStart, or iconEnd props. Icons can be passed as a component function (where Fluid UI applies styles) or as a React Element.
For icon-only buttons, use the iconOnly prop to ensure equal padding on all edges. When using iconOnly, always provide a label prop for screen reader accessibility.
```
{/* Icon with text */}
<Button color='green' icon={MdAddCircle} label='Create' />

{/* Custom icon placement */}
<Button 
  color='blue' 
  iconStart={MdInfo} 
  iconEnd={<MdChevronRight className='w-5 h-5 rtl:rotate-180' />} 
  iconEndPosition='between' 
  label='Info' 
/>

{/* Icon only button */}
<Button label='Create' color='green' icon={MdAddCircle} iconOnly />
```
https://fluid-design.io/docs/button/