🎨 Primitives
26 core building blocks including buttons, inputs, dialogs, and more
Acrobi Design SystemV1.0.0
Complete primitives, structures, workflow modules, menu system, and client components
Skip to content
What's New in V1?
🚀 Major Features
- Complete Menu System - Global actions, posts, admin, view styles, sorting, search, and privacy menus
- Rich Text Editor - TipTap-based editor with multiple modes and emoji support
- Workflow Modules - AddCollection, AssignTo, Copy, Delete, Archive, and Capture workflows
- Global Sheet Manager - Bottom sheet system using Vaul library
- Enhanced Color System - Color palette components for text formatting
📊 Component Statistics
- Total Components: 66
- Primitives: 26 core building blocks
- Structures: 28 composite components
- Modules: 20 workflow solutions
- Hooks: 4 React hooks
- Providers: 1 global provider
- Client Components: 8 (domain-specific)
🎯 Quick Start
bash
# Install the CLI
npm install -g @acrobi/cli
# Add components to your project
acrobi add button
acrobi add add-collection
acrobi add menu-actions
# Install the UI package
npm install @acrobi/ui🏗️ Architecture
The Acrobi Design System follows a layered architecture:
- Primitives - Basic UI elements (Button, Input, Dialog)
- Structures - Composite components (Forms, Lists, Navigation)
- Modules - Complete workflows (AddCollection, MenuSystem)
- Providers - Global state management (SheetProvider)
- Client - Domain-specific components (separate from core)
🎨 Design Tokens
Built on a comprehensive design token system with:
- Colors - Semantic color palette with dark/light mode support
- Typography - Responsive text scales and font families
- Spacing - Consistent spacing scale across all components
- Breakpoints - Mobile-first responsive design system
- Shadows - Elevation system for depth and hierarchy
Ready to build something amazing? Get started →