@smitch/fluid
v2.0.8
Published
A React ui-component libray.
Downloads
1,606
Maintainers
Readme
Fluid UI
A Next.js/React UI component library.
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 your projects.
Features
- Reusable UI components
- Built with React
- Easy to integrate
- Supports TypeScript
- Storybook for component documentation
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 Tailwind CSS?: Select Yes to install and configure Tailwind CSS automatically.
Next.js will then generate the necessary configuration for both TypeScript and Tailwind CSS, including tsconfig.json
, tailwind.config.js
, and PostCSS setup.
2. Configure Tailwind
To ensure that Fluid UI works correctly, you need to configure Tailwind CSS and install the Tailwind Forms plugin. Follow the steps below:
1. Install Tailwind CSS Forms Plugin
You need to install the Tailwind CSS forms plugin for proper form styling:
npm install @tailwindcss/forms
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}',
/* 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: [
/* Tailwind Forms plugin for consistent form styling */
require('@tailwindcss/forms')({
strategy: 'class',
}),
],
}
export default config
Installation
npm install @smitch/fluid
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
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
- Pagination
- Sidebar
- Tabs
Feedback
- Alert
- Badge
- Dialog
- Loading
- Progress
- Ratings
- Toast
Media
- Card
- Figure
- Gallery
- Hero
- Modal
- 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
Author
Fluid UI is developed and maintained by Stephen Mitchell.