# Tanuki UI
**Use HTML elements as they are.**
[](https://www.npmjs.com/package/tanuki-ui)
[](https://bundlephobia.com/package/tanuki-ui)
[](http://unlicense.org/)
[日本語](./README.ja.md) | English
---
Tanuki UI is a styled component library based on standard HTML elements. Unlike traditional UI libraries, it provides ready-to-use components while preserving HTML semantics.
## Concept
### HTML First Approach
```jsx
// Write like regular HTML
import { H1, P, Button, Input, Form } from 'tanuki-ui';
function App() {
return (
Page Title
This is a paragraph. You can use it just like an HTML p element.
);
}
```
### Dual Export
Components are exported with both HTML element names and semantic names for intuitive usage.
```jsx
// Both are the same component
import { P, Paragraph } from 'tanuki-ui';
import { H1, Heading } from 'tanuki-ui';
import { A, Anchor } from 'tanuki-ui';
```
## 🎯 Why Tanuki UI?
### 🚀 Lightweight
**23.5KB** gzipped
All core components
### 🎨 16 Themes
Platform-native designs
Ready to use
### 📝 HTML First
Standard semantics
No learning curve
## 📦 Bundle Size
One of the lightest React UI libraries available:
| Package | Size |
|---------|------|
| **Core Components** | 23.5KB |
| **Core CSS** | 9.9KB |
| **Layouts** *(optional)* | +12.6KB |
| **Node Editor** *(optional)* | +49.5KB |
> 💡 Import only what you need to make it even smaller!
## Key Features
### 📄 HTML Basic Elements
Complete coverage of HTML5 semantic elements:
**Content Sections**
- `Article`, `Section`, `Nav`, `Main`, `Header`, `Footer`, `Aside`, `Address`
**Text Content**
- `H1`-`H6`, `P`, `Blockquote`, `Pre`, `Div`, `Hr`
**Embedded Content**
- `Image` (`Img`), `Figure`, `Figcaption`
**Lists**
- `List` (`Ul`), `ListItem` (`Li`), `Descriptions` (`Dl`)
**Forms**
- `Form`, `Button`, `Input`, `Textarea`, `Select`, `Label`, `Fieldset`, `Legend`
- `Progress`, `Meter`, `Output`
### 🎛️ Advanced Components
**Form Extensions**
- `MediaInput` - File upload
- `RangeInput` - Slider
- `SwitchInput` - Toggle switch
- `SortableList` - Drag & drop sorting
**Dialogs & Navigation**
- `Dialog`, `Modal`, `Alert`, `Drawer`
- `ContextualMenu`, `Popover`
- `TabNav`, `TabBar`, `SidebarList`
**Layouts**
- `AppLayout`, `SidebarLayout`, `HeaderMainLayout`
- `ScrollView`, `ParavirtualScroll`
- `Panel` System (Dynamic layouts)
### 🎨 Visual Node Editor
`tanuki-ui/extended/node-editor` provides a production-ready visual editor:
```jsx
import { NodeEditor } from 'tanuki-ui/extended/node-editor';
function MyApp() {
return (
);
}
```
**Features:**
- Drag & drop node manipulation
- Auto-layout functionality
- Minimap display
- Internationalization (i18n)
- Keyboard shortcuts
- History management (Undo/Redo)
- Constraint system
## 🚀 Quick Start
```bash
# Install
npm install tanuki-ui
# Import and use
```
```jsx
import { Button } from 'tanuki-ui';
import 'tanuki-ui/style.css';
function App() {
return ;
}
```
## 📥 Installation
```bash
# npm
npm install tanuki-ui
```
```bash
# yarn
yarn add tanuki-ui
```
```bash
# pnpm
pnpm add tanuki-ui
```
```bash
# bun
bun add tanuki-ui
```
### Peer Dependencies
- React 18.0.0 or higher
- React DOM 18.0.0 or higher
## Usage
### Basic Usage
```jsx
import { H1, P, Button } from 'tanuki-ui';
import 'tanuki-ui/style.css';
function Welcome() {
return (
<>
Welcome to Tanuki UI
A UI library where HTML elements work as they are.
);
}
```
### Using Layouts
```jsx
import { AppLayout, SidebarLayout } from 'tanuki-ui/layouts';
import 'tanuki-ui/layouts/style.css';
function App() {
return (
Navigation}
main={Main Content}
/>
);
}
```
### Using Node Editor
```jsx
import { NodeEditor } from 'tanuki-ui/extended/node-editor';
import 'tanuki-ui/extended/node-editor/style.css';
function GraphEditor() {
const [nodes, setNodes] = useState([]);
const [connections, setConnections] = useState([]);
return (
);
}
```
## Themes
Multiple themes available:
```jsx
// Import theme CSS
import 'tanuki-ui/styles/monotone.css'; // Monotone (Default)
import 'tanuki-ui/styles/android12.css'; // Android 12
import 'tanuki-ui/styles/apple-liquid-glass.css'; // Apple Liquid Glass
import 'tanuki-ui/styles/aws.css'; // AWS
import 'tanuki-ui/styles/figma.css'; // Figma
import 'tanuki-ui/styles/github-dark.css'; // GitHub Dark
import 'tanuki-ui/styles/handheld-console.css'; // Handheld Console
import 'tanuki-ui/styles/ios12.css'; // iOS 12
import 'tanuki-ui/styles/linear.css'; // Linear
import 'tanuki-ui/styles/macOS12.css'; // macOS 12
import 'tanuki-ui/styles/material-design.css'; // Material Design
import 'tanuki-ui/styles/openai.css'; // OpenAI
import 'tanuki-ui/styles/vercel.css'; // Vercel
import 'tanuki-ui/styles/windows-xp.css'; // Windows XP
import 'tanuki-ui/styles/windows11.css'; // Windows 11
import 'tanuki-ui/styles/windows98.css'; // Windows 98
```
### Available Themes (16 total)
**Modern & Minimal**
- **Monotone** (`monotone.css`) - High contrast, accessibility-focused theme (Default)
- **Vercel** (`vercel.css`) - Clean, modern development-focused theme
- **Linear** (`linear.css`) - Linear app-inspired modern design
- **OpenAI** (`openai.css`) - OpenAI's clean interface styling
**Platform Themes**
- **macOS 12** (`macOS12.css`) - macOS Big Sur/Monterey design system
- **iOS 12** (`ios12.css`) - iOS design language with rounded corners
- **Windows 11** (`windows11.css`) - Windows 11 Fluent Design system
- **Android 12** (`android12.css`) - Material Design 3 (Material You)
**Developer Tools**
- **GitHub Dark** (`github-dark.css`) - GitHub's dark theme
- **Figma** (`figma.css`) - Figma design tool interface
- **AWS** (`aws.css`) - AWS console-inspired design
**Special Effects**
- **Apple Liquid Glass** (`apple-liquid-glass.css`) - Premium glass morphism effect
- **Material Design** (`material-design.css`) - Google's Material Design system
**Retro & Gaming**
- **Windows 98** (`windows98.css`) - Classic Windows 98 styling
- **Windows XP** (`windows-xp.css`) - Windows XP Luna theme
- **Handheld Console** (`handheld-console.css`) - Gaming console inspired theme
## API
### Export Structure
- **Main Package** (`tanuki-ui`): Core components
- **Layouts** (`tanuki-ui/layouts`): Layout components
- **Node Editor** (`tanuki-ui/extended/node-editor`): Advanced editor
- **Themes** (`tanuki-ui/themes/LiquidGlassFilter`): Special effects
### TypeScript Support
Full TypeScript support with standard HTML attribute inheritance:
```tsx
import { Button, Input } from 'tanuki-ui';
// Use HTML attributes as-is
```
## Browser Support
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS Safari, Chrome for Android)
## Bundle Size
| Package | Size (minified + gzipped) |
|---------|---------------------------|
| Core Components | 23.5KB |
| Core CSS | 9.9KB |
| Layouts | 12.6KB |
| Layouts CSS | 2.5KB |
| Node Editor | 49.5KB |
| Node Editor CSS | 6.9KB |
| Themes (each) | ~3-5KB |
## Performance
- Optimized with React.memo
- Style isolation with CSS Modules
- Lazy loading support
- Tree-shaking ready
## License
Unlicense
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## Development
```bash
# Start development environment
npm run dev:playground
# Start Storybook
npm run dev:storybook
# Build
npm run build
# Type check
npm run typecheck
# Run tests
npm test
# Lint
npm run lint
```
## Project Structure
```
tanuki-ui/
├── src/
│ ├── bars/ # Toolbars, tab bars
│ ├── blocks/ # Icons, text blocks
│ ├── controls/ # Control components
│ ├── dialogs/ # Dialogs, modals
│ ├── elements/ # HTML basic elements
│ ├── extended/ # Extended components
│ │ └── node-editor/ # Node editor
│ ├── form/ # Form elements
│ ├── hooks/ # Custom hooks
│ ├── layouts/ # Layout components
│ ├── navigations/ # Navigation
│ └── themes/ # Theme related
├── public/
│ └── styles/ # Preset themes
└── docs/ # Documentation
```
# Tanuki UI
**Use HTML elements as they are.**
[](https://www.npmjs.com/package/tanuki-ui)
[](https://bundlephobia.com/package/tanuki-ui)
[](http://unlicense.org/)
[日本語](./README.ja.md) | English