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.

License

Mozilla Public License 2.0 — © Marc Alcaraz