kernul-os-dashboard — Vite 后台模板

SHA-256: 86dbe8860da0419cd745854a2e0087a2d56707dbf1b2068ca6581721aed8f6ee

2026-10-03T13:53:32.523Z

# Kernul OS Dashboard

A matte dark React dashboard template for analytics, activity feeds, and operational overview screens.

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![React](https://img.shields.io/badge/React-19-61dafb.svg)](https://react.dev/)
[![Vite](https://img.shields.io/badge/Vite-6-646cff.svg)](https://vite.dev/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38bdf8.svg)](https://tailwindcss.com/)

Kernul OS Dashboard is a static, frontend-only dashboard starter with a three-pane layout, responsive drawer behavior, Recharts data widgets, and a restrained dark interface. It is useful as a base for admin products, analytics views, SaaS consoles, or design-system experiments that need more density than a marketing template.

## Features

- Responsive app shell with left navigation, top command header, and right activity sidebar.
- KPI cards with inline sparklines and trend indicators.
- Area, bar, progress, and donut chart widgets powered by Recharts.
- Notification, activity, and contact side panels.
- Tailwind CSS 4 theme tokens and custom scrollbar styling.
- Frontend-only Vite build with no API keys or backend service required.

## Stack

- React 19
- TypeScript
- Vite 6
- Tailwind CSS 4
- Recharts
- Lucide React
- Bun

## Quick Start

```bash
git clone [email protected]:bymilon/kernul-os-dashboard.git
cd kernul-os-dashboard
bun install
bun run dev
```

The dev server runs at `http://localhost:3000`.

## Scripts

```bash
bun run dev      # Start Vite on port 3000
bun run build    # Create a production build in dist/
bun run preview  # Preview the production build
bun run lint     # Type-check with TypeScript
```

## Project Structure

```txt
src/
  components/       Dashboard shell, sidebars, header, and analytics widgets
  lib/              Shared class-name utility
  App.tsx           Layout state and pane composition
  index.css         Tailwind theme and global styles
  main.tsx          React entry point
DESIGN.md          Visual design notes and responsive guidance
```

## Customization

- Edit dashboard metrics and chart data in `src/components/MainOverview.tsx`.
- Adjust navigation sections in `src/components/Sidebar.tsx`.
- Update notifications, activity, and contacts in `src/components/RightSidebar.tsx`.
- Tune the matte dark palette and typography in `src/index.css`.
- Use `DESIGN.md` as the design-system reference for spacing, color, and chart styling.

## Roadmap

See [TODO.md](TODO.md) for the release backlog. Tasks are written in a Linear-style format so they can be moved into GitHub issues later.

## Contributing

Issues and pull requests are welcome. Keep changes focused, include screenshots for visual changes, and run:

```bash
bun run lint
bun run build
```

Read [CONTRIBUTING.md](CONTRIBUTING.md) before opening a pull request.

## Security

Do not open public issues for vulnerabilities. Follow [SECURITY.md](SECURITY.md).

## License

MIT. See [LICENSE](LICENSE).