An open API service indexing awesome lists of open source software.

https://github.com/tapiwamakandigona/react-ui-kit

Minimal React UI component library with dark theme, TypeScript, and zero dependencies | Button, Input, Modal, Toast, Card, Badge
https://github.com/tapiwamakandigona/react-ui-kit

component-library css-custom-properties dark-theme design-system jest react typescript ui-kit vite zero-dependencies

Last synced: about 2 months ago
JSON representation

Minimal React UI component library with dark theme, TypeScript, and zero dependencies | Button, Input, Modal, Toast, Card, Badge

Awesome Lists containing this project

README

          



React UI Component Library (TypeScript)


A minimal, zero-dependency React component library with dark theme support, full TypeScript typings, Jest test coverage, and Storybook-ready exports.




Top Language
Last Commit


---

## ⚡ Why Zero Dependencies?

Most UI libraries ship megabytes of CSS frameworks and peer dependencies. This library has **zero runtime dependencies** — every component is built from raw CSS custom properties and React primitives, giving you total control over bundle size.

## 🧩 Components

| Component | Props API | Features |
|-----------|----------|----------|
| **Button** | `variant`, `size`, `disabled`, `loading` | Primary/Secondary/Danger, spinner state |
| **Input** | `label`, `error`, `type` | Validation states, dark mode |
| **Modal** | `open`, `onClose`, `title` | Portal rendering, ESC key, backdrop click |
| **Toast** | `message`, `type`, `duration` | Auto-dismiss, stacking, success/error/info |
| **Card** | `title`, `footer` | Flexible content slots |
| **Badge** | `variant`, `count` | Color-coded status indicators |

---

## 🛠️ Stack

- **React 19** + **TypeScript** (strict mode)
- **CSS Custom Properties** (zero CSS frameworks)
- **Jest + React Testing Library** (unit tests)
- **Vite** (build + dev server)

---

## 🚀 Quick Start

```bash
git clone https://github.com/tapiwamakandigona/react-ui-kit.git
cd react-ui-kit
npm install
npm run dev
```

```bash
npm test # Run test suite
npm run build # Build library
```

---


Built by Tapiwa Makandigona


⭐ Star if you appreciate zero-dependency component design!