@smitch/fluid

v4.4.9

Published

5 months ago

A lightweight, Tailwind-powered React/Next.js UI component library.

0High
0Medium
0Low

smitch

react tailwindcss ui-components nextjs breeze-ui

Fluid UI

A Next.js/React UI component library.

Fluid UI

Overview

Fluid UI is a comprehensive library of reusable UI components for Next.js/React applications. This library is designed to streamline the development process and ensure consistency across projects.

Features

Reusable UI components
Charts
Maps
Built with React 19, Next.js 15 and TailwindCSS 3

Getting Started

To use Fluid UI in your Next.js/React project, follow these steps:

1. Install Next.js and React

If you haven't set up your Next.js project yet, start by initializing it:

npx create-next-app@latest

When prompted:

Use TypeScript?: Select Yes to enable TypeScript in your project.
Use TailwindCSS?: Select Yes to install and configure TailwindCSS automatically.

Next.js will then generate the necessary configuration for both TypeScript and TailwindCSS, including tsconfig.json, tailwind.config.js, and PostCSS setup.

2. Configure Tailwind 3

To ensure that Fluid UI works correctly, you need to configure TailwindCSS. Follow the steps below:

Note: All current Fluid releases utilize TailwindCSS v3.

2. Configure `tailwind.config.js`

Update your tailwind.config.js file to match the configuration below:

import type { Config } from "tailwindcss";
/* Import colors if using Tailwind's color palette */
import colors from "tailwindcss/colors";

const config: Config = {
  /* The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.*/
  darkMode: "selector",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    /* IMPORTANT: Add this line: */
    "./node_modules/@smitch/fluid/**/*.js",
  ],
  theme: {
    extend: {
      colors: {
        /* Modify color values as desired to suit your theme */
        primary: {
          DEFAULT: colors.indigo[600],
          light: colors.indigo[300],
          dark: colors.indigo[900],
        },
        secondary: {
          DEFAULT: colors.gray[600],
          light: colors.gray[300],
          dark: colors.gray[900],
        },
        accent: {
          DEFAULT: colors.orange[500],
          light: colors.orange[300],
          dark: colors.orange[700],
        },
        neutral: colors.gray[400],
        dark: colors.gray[900],
        light: colors.gray[100],
        info: {
          DEFAULT: colors.sky[400],
          light: colors.sky[200],
          dark: colors.sky[600],
        },
        success: {
          DEFAULT: colors.green[600],
          light: colors.green[400],
          dark: colors.green[800],
        },
        warning: {
          DEFAULT: colors.amber[500],
          light: colors.amber[300],
          dark: colors.amber[700],
        },
        error: {
          DEFAULT: colors.red[600],
          light: colors.red[400],
          dark: colors.red[800],
        },
        danger: {
          DEFAULT: colors.red[600],
          light: colors.red[400],
          dark: colors.red[800],
        },
        current: "currentColor",
        transparent: "transparent",
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms")({
      strategy: "class",
    }),
    require("@tailwindcss/typography"),
  ],
};
export default config;

Installation

npm install @smitch/fluid

Compatibility

Supported stacks & compatibility matrix

Use the table below to pick the Fluid major line that matches your app's React / Next.js and Tailwind versions. This helps avoid peer dependency conflicts.

Fluid v4.x (current):
- React: 19.x
- Next.js: 15.x
- Tailwind: 3.x
- Install: npm install @smitch/fluid
Fluid v3.x:
- React: 18.x
- Next.js: 14.x (and other releases built on React 18)
- Tailwind: 3.x
- Install: npm install @smitch/fluid@^3

Node / environment

Recommended Node: use an LTS release (Node 18/20+ recommended depending on your Next version).

Troubleshooting

If a feature (charts, maps) fails because a peer package is missing, install the optional peers indicated in the Peer dependencies section (e.g., chart.js, react-chartjs-2, leaflet).

Peer dependencies

Fluid is a component library and expects the host app to provide framework/runtime dependencies. Below are the packages you should have installed in your project when using @smitch/fluid.

Required (framework)

npm install react react-dom next

Optional (feature-specific — install only if you use the feature)

Charts (optional)

If you use the chart components, install the Chart.js runtime and the React wrapper:

npm install chart.js react-chartjs-2

Maps (optional — Leaflet)

If you use the map components, install Leaflet and React Leaflet:

npm install leaflet react-leaflet

TypeScript notes:

For some setups you may want @types/leaflet (install if your build complains about Leaflet types):

npm install -D @types/leaflet

Basic Usage

Now, you can import and use any Fluid UI component in your Next.js project:

import { Button } from "@smitch/fluid";

const App = () => <Button>Click me</Button>;

export default App;

Charts Usage

Charts available include:

BarChart
BubbleChart
LineChart
PieChart
DoughnutChart
ScatterChart
RadarChart
PolarAreaChart
MixedChart

Charts require Chart.js and the React wrapper:

npm install chart.js react-chartjs-2

Chart Usage Example

import { BarChart } from "@smitch/fluid/charts";

const App = () => {
  return (
    <BarChart
        data={{
            datasets: [
                {
                    label: 'Min Temperature (°C)',
                    data: [12, 15, 10, 8, 14],
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderWidth: 0,
                },
                {
                    label: 'Max Temperature (°C)',
                    data: [22, 25, 20, 18, 24],
                    backgroundColor: 'rgba(255, 99, 132, 0.6)',
                    borderWidth: 0,
                },
                ...
            ],
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
        }}
      title = 'Weekly Temperature Ranges',
      legendposition = 'bottom',
    />
  )
};

export default App;

Map Usage

Map options include:

MapMarker
MapCircle
MapPolygon
MapLine
MapRectangle

Install Leaflet and React Leaflet (and leaflet.fullscreen if fullscreen control required):

npm install leaflet react-leaflet leaflet.fullscreen

npm install -D @types/leaflet @types/leaflet.fullscreen

Map Usage Examples

Static Map

import { Map } from "@smitch/fluid/map";

const App = () => {
  return (
    <Map
      center={[51.505, -0.09]}
      style={{
        height: "400px",
        width: "100%",
      }}
      tileIndex={0}
      zoom={16}
    />
  );
};

export default App;

Map with marker

import { Map, MapMarker } from "@smitch/fluid/map";

const App = () => {
  return (
    <Map
      attributionControl
      center={[51.505, -0.09]}
      fullscreenControl
      fullscreenControlPosition="topleft"
      style={{
        height: "400px",
        width: "100%",
      }}
      tilesControl
      zoom={13}
      zoomControl
    >
      <MapMarker popupContent="Marker 1" position={[51.505, -0.09]} />
      <MapMarker position={[51.51, -0.1]} />
    </Map>
  );
};

export default App;

Components

Buttons

Button
Close Button
Button Group

Inputs

Checkbox
Counter
File Upload
Input
Password Input
Radio Group
Range Input
Search Input
Select
Switch
Textarea
Text Input

Forms

Fieldset
Form
Label

Menus

Accordion
Breadcrumbs
Carousel
Drawer
Dropdown
NavBar
Pagination
Sidebar
Tabs

Feedback

Alert
Badge
Dialog
Loading
Progress
Ratings
Ticker
Toast

Media

Card
Figure
Gallery
Hero
Icon
Modal
PlaceHolder
Twitter Embed
Twitter Timeline
Video
Video Player
YouTube Embed

Typography

Blockquote
Codeblock
Heading

Data Visualization

Data Table
Pictogram
Line Chart
Bar Chart
Mixed Chart
Pie Chart
Doughnut Chart
Radar Chart
PolarArea Chart
Scatter Chart
Stat Bar

Time

Clock

Maps

Social Media

Social Media Share

Author

Fluid UI is developed and maintained by Stephen Mitchell.