Vertex UI

Modern React Component Library

Accessible • Composable • Type Safe • Beautiful

---

✨ Overview

Vertex UI is a modern React component library built with React, TypeScript, Tailwind CSS v4, and Storybook.

The goal of Vertex UI is to provide beautifully designed, highly accessible, production-ready components with an excellent developer experience.

---

Features

• ♿ Accessibility First
• ⚡ Lightweight
• 🎨 Themeable
• 📦 Tree Shakeable
• 🔥 Type Safe
• 🧩 Composable Components
• 🌙 Dark Mode Support
• 📚 Storybook Documentation
• 🧪 Unit Tested
• 🚀 Built with Tailwind CSS v4

---

Tech Stack

Technology	Purpose
React	UI Library
TypeScript	Type Safety
Tailwind CSS v4	Styling
Storybook	Component Documentation
Vitest	Unit Testing
Testing Library	Component Testing
CVA	Variant Management
Radix UI	Component Composition
Lucide React	Icons

---

Installation

npm install

---

Development

Start the development server

npm run dev

Start Storybook

npm run storybook

Run tests

npm run test

Build the library

npm run build

---

Project Structure

src
│
|__assets
|
├── components
│   └── ui
│       ├── button
│       ├── input
│       ├── badge
│       ├── modal
│       └── ...
│
├── hooks
├── lib
├── styles
├── test
└── stories

---

Project Progress

Foundation

• Vite
• React
• TypeScript
• Tailwind CSS v4
• Design Tokens
• Theme System
• Storybook
• Vitest
• Accessibility Setup

---

Components

Inputs

• Button
• Input
• FormField
• Textarea
• Select
• Textarea
• Checkbox
• Radio
• Switch

Feedback

• Alert
• Toast
• Spinner
• Skeleton
• Progress

Data Display

• Badge
• Avatar
• Card
• Divider
• table
• Data Grid

Navigation

• tabs
• Breadcrumb
• Pagination
• Dropdown

Overlay

• Modal
• Drawer
• Tooltip
• Popover

---

Completed Components

Component	Storybook	Tests	Accessibility
Button	✅	✅ 9 Tests	✅
Input	✅	✅ 7 Tests	✅
FormField	✅	✅ 7 Tests	✅
Textarea	✅	✅12 Tests	✅
Select	✅	✅ 9 Tests	✅
CheckBox	✅	✅ 11 Tests	✅
RadioGroup	✅	✅ 8 Tests	✅
Switch	✅	✅ 8 Tests	✅
Badge	✅	✅ 5 Tests	✅
Avatar	✅	✅ 6 Tests	✅
Tooltip	✅	✅ 5 Tests	✅
Progress	✅	✅ 8 Tests	✅
Spinner	✅	✅ 6 Tests	✅
Alert	✅	✅ 6 Tests	✅
Toast	✅	✅ 6 Tests	✅
Modal	✅	✅ 9 Tests	✅
Drawer	✅	✅ 8 Tests	✅
Popover	✅	✅ 7 Tests	✅
Card	✅	✅ 11 Tests	✅
Table	✅	✅ 10 Tests	✅
Skeleton	✅	✅ 11 Tests	✅
Tabs	✅	✅ 9 Tests	✅
Divider	✅	✅ 9 Tests	✅
Data Grid	✅	✅ 16 Tests	✅
Dropdown	✅	✅ 10 Tests	✅
Breadcrumb	✅	✅ 11 Tests	✅
Pagination	✅	✅ 16 Tests	✅

---

Accessibility

Vertex UI is built with accessibility as a core principle.

Current accessibility features include:

• Keyboard Navigation
• Screen Reader Support
• Semantic HTML
• ARIA Attributes
• Focus Management
• Loading State Announcements
• Disabled State Support

---

Design Principles

Vertex UI follows four guiding principles.

• Accessibility First
• Developer Experience
• Composability
• Consistency

---

Roadmap

Version 0.1

• Project Setup
• Theme System
• Button

Version 0.2

• Input
• Textarea
• Select
• Badge

Version 0.3

• Modal
• Dropdown
• tabs

Version 1.0

• Documentation
• 20+ Components
• npm Package
• CI/CD
• 100% Storybook Coverage

---

Contributing

Contributions are welcome.

Please open an issue before submitting large feature requests.

---

License

MIT

---

Author

Yussif Bashiru

Frontend Engineer

• GitHub: https://github.com/Alaska-gh
• LinkedIn: (add your LinkedIn profile here)

---

⭐ If you find Vertex UI useful, consider starring the repository.