Fluid UI

• Overview
• Features
• Installation
• Basic Usage
• Components
  • Buttons
  • Inputs
  • Forms
  • Menus
  • Feedback
  • Media
  • Typography

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

Installation

To install the library, use npm:

npm i @smitch/fluid

Basic Usage

import { Input } from '@smitch/fluid'

const App = () => (
	<div>
		<Input placeholder='Enter text' />
	</div>
)

export default App

Components

Buttons

• Button
  • Text Button
  • Icon Button
  • Text & Icon Button
  • Close Button
  • Delete Button
• Button Group

Inputs

• Input
  • Autocomplete
  • Checkbox
  • Color Picker
  • Counter
  • Dates & Time Input
  • Email Input
  • File Upload
  • Number Input
  • Password Input
  • Radio Group
  • Range Input
  • Search Input
  • Select
  • Switch
  • Telephone Input
  • Textarea
  • Text Input
  • URL Input

Forms

• Fieldset
• Form
  • Log-in
  • Contact
  • Address
  • Newsletter
  • Search
  • Register
• Label

Menus

• Accordion
• Breadcrumbs
• Carousel
• Drawer
• Dropdown
• Pagination
• Sidebar
• Tabs

Feedback

• Alert
• Badge
• Dialog
  • Modal Dialog
• Loading
• Progress
• Ratings
• Toast

Media

• Card
• Figure
• Gallery
• Modal
• Twitter Embed
  • Single Tweet
  • Twitter Timeline
• Video Player
• YouTube Embed

Typography

• Blockquote
• Codeblock
• Heading

Website

https://fluid-ui.vercel.app/

NPM Package

npm i @smitch/fluid

Technologies

React, Next.js, TailwindCSS, TypeScript, Storybook, npm