# Minora
> Elegant minimalist UI kit — clean components with warm gold accent, zero dependencies.
[]()
[](LICENSE)
[](dist/minora.min.css)
[](https://www.jsdelivr.com/package/gh/ilzamafif/minora)
Minora is a handcrafted UI kit built with **vanilla HTML, CSS, and JavaScript**. Every component uses CSS custom properties from a single source of truth — change one token, the entire system adapts. No frameworks. No dependencies. Just clean, elegant components.
```
┌─────────────────────────────────────────────────────┐
│ ╭────────────╮ ╭────────────╮ ╭────────────╮ │
│ │ Button │ │ Badge │ │ Toggle │ │
│ ╰────────────╯ ╰────────────╯ ╰────────────╯ │
│ │
│ ┌───────────────────────────────────────────┐ │
│ │ Input with label & helper text │ │
│ └───────────────────────────────────────────┘ │
│ │
│ ╭─ Radio ○ ─╮ ╭─ Checkbox ☑ ─╮ ╭─ Alert ─╮ │
│ ╰───────────╯ ╰──────────────╯ ╰─────────╯ │
│ │
│ ┌───────────────────────────────────────────┐ │
│ │ Toast notification: ✓ Saved! │ │
│ └───────────────────────────────────────────┘ │
│ │
│ Modal backdrop with dialog [ Confirm ] │
└─────────────────────────────────────────────────────┘
```
---
## Quick Start — CDN
### CSS Only
```html
```
### JS Only (modals, toasts, selects, tooltips)
```html
```
### CSS + JS (complete)
```html
```
### Specific Version (recommended for production)
```html
```
### Design Tokens Only
```html
```
---
## Complete Example
Copy-paste this into an `.html` file and open in your browser:
```html
Minora Quick Start
Quick Start
```
---
## Available Components
| Component | Description | Status |
|---|---|---|
| **[Button](https://github.com/ilzamafif/minora#button)** | Solid, outline, ghost, destructive — 3 sizes, icon-only, loading spinner | ✅ Stable |
| **[Badge](https://github.com/ilzamafif/minora#badge)** | Solid/subtle/outline — with dot indicator, notification overlay | ✅ Stable |
| **[Tag](https://github.com/ilzamafif/minora#tag)** | Dismissible tags with fade animation, clickable, icon support | ✅ Stable |
| **[Avatar](https://github.com/ilzamafif/minora#avatar)** | Image/initials/icon fallback, status dots, overlapping groups | ✅ Stable |
| **[Divider](https://github.com/ilzamafif/minora#divider)** | Horizontal rules, text/icon separators, vertical separators | ✅ Stable |
| **[Input](https://github.com/ilzamafif/minora#input)** | Default/filled/underline variants, icon addons, clear button | ✅ Stable |
| **[Textarea](https://github.com/ilzamafif/minora#textarea)** | Auto-resize, character counter, validation states | ✅ Stable |
| **[Select](https://github.com/ilzamafif/minora#select)** | Custom dropdown with search, grouped options, keyboard nav | ✅ Stable |
| **[Multiselect](https://github.com/ilzamafif/minora#multiselect)** | Tag-based selection, select all/clear, counter badge | ✅ Stable |
| **[Checkbox](https://github.com/ilzamafif/minora#checkbox)** | Standard/filled/card, radio buttons, segmented controls | ✅ Stable |
| **[Toggle](https://github.com/ilzamafif/minora#toggle)** | Smooth animated switches with icon support | ✅ Stable |
| **[Form Validation](https://github.com/ilzamafif/minora#form-validation)** | Inline errors, password strength, form-level alerts | ✅ Stable |
| **[Toast](https://github.com/ilzamafif/minora#toast)** | 6 positions, progress bar, stacking, auto-dismiss, actions | ✅ Stable |
| **[Modal](https://github.com/ilzamafif/minora#modal)** | Focus trap, scroll lock, nested stacking, multi-step | ✅ Stable |
| **[Dialog](https://github.com/ilzamafif/minora#dialog)** | Confirm, destructive, info, input-based confirmation | ✅ Stable |
| **[Tooltip](https://github.com/ilzamafif/minora#tooltip)** | 9 positions, auto-flip, rich content, interactive | ✅ Stable |
| **[Popover](https://github.com/ilzamafif/minora#popover)** | Click-triggered panels with header/body/footer | ✅ Stable |
| **[Alert](https://github.com/ilzamafif/minora#alert)** | Subtle/filled/outline, inline messages, page banners | ✅ Stable |
---
## Customization
All colors, spacing, typography, and animation values come from `tokens.css` — a single source of truth. Override them **after** loading Minora CSS:
```html
```
### Full Token List
See [tokens.css](src/tokens.css) for all available custom properties:
| Category | Tokens |
|---|---|
| **Colors** | `--color-neutral-*` (50–950), `--color-accent-*` (50–950), `--color-success-*`, `--color-warning-*`, `--color-error-*`, `--color-info-*` |
| **Typography** | `--font-serif`, `--font-sans`, `--font-mono`, `--text-*`, `--leading-*`, `--tracking-*`, `--font-*` |
| **Spacing** | `--space-0` to `--space-32` (4px base) |
| **Radius** | `--radius-none`, `--radius-sm`, `--radius-md`, `--radius-pill` |
| **Shadows** | `--shadow-sm`, `--shadow-md` |
| **Transitions** | `--duration-*`, `--ease-*`, `--transition-*` |
| **Z-Index** | `--z-base` to `--z-toast` |
---
## Design System
**Palette:** Warm gold (`#d4872e`) on cool gray — timeless, sophisticated, minimal.
**Typography:** Playfair Display (serif) for headings + Inter (sans-serif) for body. Classical meets modern.
**Philosophy:** Every value is a CSS custom property. Change one token, the entire system adapts. No hardcoded values anywhere.
---
## Browser Support
| Browser | Version |
|---|---|
| Chrome | 88+ |
| Firefox | 85+ |
| Safari | 14.1+ |
| Edge | 88+ |
| Opera | 74+ |
> **Note:** Some components use `:has()` selector (input focus states). Polyfill available at [css-has-pseudo](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-has-pseudo).
---
## File Size
| File | Size | Gzip |
|---|---|---|
| `minora.css` | 246 KB | 38 KB |
| `minora.min.css` | 112 KB | **22 KB** |
| `minora.js` | 39 KB | 13 KB |
| `minora.min.js` | 22 KB | **9 KB** |
| `tokens.css` | 28 KB | 6 KB |
| **Total (min + gzipped)** | | **~37 KB** |
---
## Build from Source
```bash
git clone https://github.com/ilzamafif/minora.git
cd minora
npm install
npm run build:all # CSS + JS concat + minify
npm run watch # auto-rebuild on changes
```
**Build output:** `dist/` folder with concatenated and minified files, ready for CDN.
---
## Project Structure
```
minora/
├── dist/ ← CDN-ready files
│ ├── minora.css ← All components
│ ├── minora.min.css ← Minified
│ ├── minora.js ← All JS modules
│ ├── minora.min.js ← Minified
│ └── tokens.css ← Standalone tokens
├── src/
│ ├── tokens.css ← Design tokens (source of truth)
│ ├── components/ ← 13 CSS component files
│ └── js/ ← 4 JS module files
├── docs/ ← Documentation
├── package.json
├── build.mjs ← Build script (csso + terser)
├── LICENSE ← MIT
└── README.md
```
---
## Changelog
See [CHANGELOG.md](CHANGELOG.md) for the full version history.
---
## Contributing
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-component`)
3. Commit your changes (`git commit -m 'Add amazing component'`)
4. Push to the branch (`git push origin feature/amazing-component`)
5. Open a Pull Request
**Guidelines:**
- All CSS values must use custom properties — no hardcoded colors or pixel values
- Follow the existing naming convention: `.component`, `.component-variant`, `.component-size`
- Include anatomy comments at the top of each component file
- Test across Chrome, Firefox, Safari, and Edge
---
## License
[MIT](LICENSE) — use freely in personal and commercial projects. Attribution appreciated but not required.
---
Built with ☕ by the Minora team.