Oihana Next UI

A modular Next.js UI component library built with React 19, Tailwind CSS v4 and DaisyUI v5.

Features

⚛️ React 19 + Next.js 16
🎨 Tailwind CSS v4 + DaisyUI v5
🌙 Dark mode support (flash-free)
📱 PWA ready
♿ Accessible components
🧩 Composable and themeable

Installation

bun add oihana-next-ui
# or
npm install oihana-next-ui

Requirements

{
  "react":     "^19.0.0",
  "react-dom": "^19.0.0",
  "next":      "^16.0.0"
}

Usage

import Picture   from 'oihana-next-ui/components/images/Picture'
import Button    from 'oihana-next-ui/components/Button'
import useThemes from 'oihana-next-ui/contexts/themes/useThemes'

CSS

Some components require their stylesheet to be imported explicitly :

/* Spinner styles */
@import 'oihana-next-ui/components/spinners/styles/battery.css';

Tailwind CSS v4 plugins

With Tailwind CSS v4, plugins are registered directly in your CSS file :

/* globals.css */
@import 'tailwindcss' ;

/* Oihana background patterns plugin */
@plugin 'oihana-next-ui/themes/plugins/background-patterns/index' ;

/* Oihana pattern craft plugin */
@plugin 'oihana-next-ui/themes/plugins/pattern-craft/index' ;

DaisyUI Catppuccin theme

/* globals.css */
@import 'oihana-next-ui/themes/daisyui/catppuccin.css' ;

Development

Clone the repo and start the demo app :

git clone https://github.com/BcommeBois/oihana-next-ui
cd oihana-next-ui
bun install
bun dev

Open http://localhost:3666 to browse the component demos.

Built with

Next.js — React framework for production
React — UI library
Tailwind CSS — Utility-first CSS framework
DaisyUI — Component library for Tailwind CSS
VEGAS Core JS — A set of libraries writing in Javascript and based on the ES6 standard.
React Icons — Popular icon packs as React components
Motion — Animation library
Maskito — Input masking library
Day.js — Lightweight date library
Chroma.js — Color manipulation library

Build the library

bun run build:lib

Watch mode

bun run build:lib:watch

Release

Versioning

This project follows Semantic Versioning — MAJOR.MINOR.PATCH (e.g. 1.2.3).

Type	Command	Example	When to use
Patch	`bun run release:patch`	`0.1.0` → `0.1.1`	Bug fix, minor tweak
Minor	`bun run release:minor`	`0.1.0` → `0.2.0`	New component or feature, backward compatible
Major	`bun run release:major`	`0.1.0` → `1.0.0`	Breaking change

Each script automatically bumps the version, builds the library, publishes to npm, and pushes the commit and tag to GitHub.

You can also set a specific version manually :

npm version 1.0.0
bun run release

Or a pre-release version :

npm version prerelease --preid=alpha   # 0.1.0 → 0.1.1-alpha.0
npm version prerelease --preid=beta    # 0.1.0 → 0.1.1-beta.0
npm version prerelease --preid=rc      # 0.1.0 → 0.1.1-rc.0
bun run release

npm version automatically updates package.json, creates a Git commit and a Git tag.