# 🎨 repoUI Component Style Library
> A **pure CSS** modern web UI component library. Zero dependencies, plug-and-play, with light/dark theme support.
**repoUI** is a lightweight, elegant, themeable front-end component style library. Built on **CSS variables (design tokens)**, it supports **light / dark themes** with one click, includes a complete icon font set, layout system, and dozens of common UI components. All styles are native CSS with no framework dependency — just drop it into any HTML project.
---
## ✨ Features
| Feature | Description |
|---------|-------------|
| 🎨 **Design Tokens** | Complete CSS variable system (colors/fonts/spacing/radius/shadow/z-index) |
| 🌗 **Light/Dark Themes** | Switch to dark mode with `data-theme="dark"` |
| 🔠 **Icon Fonts** | Built-in hundreds of common icons covering dev/collab/code scenarios |
| 📦 **Pure CSS, Zero Dependencies** | No JavaScript framework required |
| ♻️ **Plug-and-Play** | Single CSS file — just `` it in |
| 🧩 **Rich Components** | 20+ common UI components built in |
---
## 🚀 Quick Start
### Include
```html
```
### Simple Example
```html
Title
Card content
SuccessWarningError
Overview
Code
History
```
### Dark Theme
```html
```
---
## 🧩 Component List
### Layout & Navigation
- `.repo-layout` / `.repo-layout__header` / `__sidebar` / `__main` / `__content` — Page layout
- `.repo-row` / `.repo-col` — Grid system
- `.repo-container` / `.repo-container--fluid` — Container
- `.repo-tabs` — Tabs
- `.repo-breadcrumb` — Breadcrumb navigation
### Basic Components
- `.repo-btn` (+ `--primary` `--secondary` `--danger` `--ghost` `--link` `--sm` `--lg` `--icon`) — Buttons
- `.repo-input` / `.repo-textarea` / `.repo-input-group` — Input fields
- `.repo-select` — Select dropdown
- `.repo-checkbox` / `.repo-radio` — Checkbox / Radio
### Data Display
- `.repo-tag` (+ `--default` `--primary` `--success` `--warning` `--danger` `--outline`) — Tags
- `.repo-badge` (+ `--primary` `--success` `--danger` `--warning` `--dot`) — Badges
- `.repo-avatar` (+ `--xs` `--sm` `--md` `--lg` `--xl`) — Avatars
- `.repo-card` — Card
- `.repo-table` (+ `--border`) — Table
- `.repo-pagination` — Pagination
- `.repo-file-tree` — File tree
- `.repo-diff` — Code diff
### Feedback & Overlay
- `.repo-tooltip` (+ `--top` `--bottom` `--left` `--right`) — Tooltip
- `.repo-modal` (+ `--open`) — Modal
- `.repo-drawer` (+ `--left`) — Drawer
- `.repo-message` (+ `--success` `--error` `--warning` `--info`) — Message notification
- `.repo-dropdown` (+ `--open`) — Dropdown menu
### Loading & Status
- `.repo-spinner` (+ `--sm` `--lg`) — Loading spinner
- `.repo-skeleton` (+ `--text` `--circle` `--button`) — Skeleton screen
- `.repo-progress` — Progress bar
### Code
- `.repo-code-block` — Code block (with copy button, language label)
- `.repo-inline-code` — Inline code
---
## 🎨 Design Tokens (CSS Variables)
All repoUI styles are driven by CSS variables, making them easy to customize:
```css
:root {
--repo-color-primary: #3b82f6; /* Primary color */
--repo-color-danger: #ef4444; /* Danger color */
--repo-color-success: #10b981; /* Success color */
--repo-color-warning: #f59e0b; /* Warning color */
--repo-font-family: -apple-system, "Segoe UI", sans-serif;
--repo-radius-md: 6px; /* Radius */
--repo-spacing-4: 16px; /* Spacing */
/* ...more variables in repoUI.css */
}
```
Token groups:
- **Colors**: `--repo-color-*` (primary/danger/success/warning/text/bg/border/link/icon)
- **Fonts**: `--repo-font-*` (family/size/line-height)
- **Spacing**: `--repo-spacing-*` (1~12)
- **Radius**: `--repo-radius-*` (sm/md/lg/xl/full)
- **Shadows**: `--repo-shadow-*` (xs~xl)
- **Z-index**: `--repo-z-*` (dropdown/sticky/fixed/modal/popover/tooltip)
- **Layout**: `--repo-header-height` / `--repo-sidebar-width`
---
## 🔠 Using Icons
repoUI includes a built-in icon font:
```html
```
> Icon class format: `icon-*`
---
## 📁 Project Structure
```
repoUI/
├── repoUI.css # Complete style library (single file, ~60KB)
├── fonts/ # Icon font files
│ ├── repo-icons.eot
│ ├── repo-icons.ttf
│ └── repo-icons.woff
└── README.md # This document
```
---
## 📄 License
This project is licensed under the **MIT License**. See [LICENSE](LICENSE) for details. You are free to use, modify, and distribute it, as long as you retain the copyright notice.
---
## 🙏 Thanks
Thanks for using repoUI Component Style Library! If you find it useful, feel free to give it a ⭐ or share it in your projects.