@smitch/breeze
v2.2.21
Published
A lightweight, Tailwind-powered React/Next.js UI component library.
Maintainers
smitchReadme
Breeze UI
A Next.js/React UI component library built with React 19, Next.js 15, and Tailwind CSS 3.
Live demo: https://breezeui.site
Overview
Breeze 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 (Bar, Line, Pie, etc.)
- Maps (Markers, Polygons, etc.)
- Built with React 19, Next.js 15, and Tailwind CSS 3
- Dark mode support via Tailwind's
selectorstrategy
Getting Started
To use Breeze UI in your Next.js/React project, follow these steps. Note: Tailwind CSS 3 is a peer
dependency—install it if not already present (npm install -D tailwindcss postcss autoprefixer).
1. Installation
npm install @smitch/breeze
# or
pnpm add @smitch/breeze # recommended — auto-installs peers
# or
yarn add @smitch/breezeTip: Using pnpm or Yarn Berry? All Tailwind peer dependencies install automatically!
2. Configure Tailwind 3
To ensure Breeze UI works correctly, configure Tailwind CSS v3. All releases use v3.x.
1. Generate Tailwind Config Files
npx tailwindcss init -pThis creates tailwind.config.js and postcss.config.js (pre-filled with Tailwind + Autoprefixer).
2. Configure tailwind.config.js
Update your tailwind.config.js to include Breeze's content path and theme.
/** @type {import('tailwindcss').Config} */
import colors from "tailwindcss/colors";
module.exports = {
darkMode: "selector",
content: [
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
/* IMPORTANT: Add this line: */
"./node_modules/@smitch/breeze/**/*.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",
}),
],
};3. Configure postcss.config.js
module.exports = {
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {},
},
};4. Add Tailwind Directives to CSS
Add to your global CSS file (e.g., globals.css in App Router):
@tailwind base;
@tailwind components;
@tailwind utilities;Basic Usage
Import and use components:
import { Button } from "@smitch/breeze";
const App = () => <Button>Click me</Button>;
export default App;For charts/maps, see below.
Charts Usage
Charts include: BarChart, BubbleChart, LineChart, PieChart, DoughnutChart, ScatterChart, RadarChart, PolarAreaChart, MixedChart.
Install deps:
npm install chart.js react-chartjs-2Chart Usage Example
import { BarChart } from "@smitch/breeze/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 components: MapMarker, MapCircle, MapPolygon, MapLine, MapRectangle.
Install deps:
npm install leaflet react-leaflet leaflet.fullscreennpm install -D @types/leaflet @types/leaflet.fullscreenMap Usage Examples
Static Map
import { Map } from "@smitch/breeze/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/breeze/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
- Image PlaceHolder
- X Embed
- 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
DateTime
- Clock
Maps
- Map
Social Media
- Social Media Share
Author
Breeze UI is developed and maintained by Stephen Mitchell.