A minimalist UI library built with React 19 and Tailwind 4. Designed for data-intensive dashboards and B2B platforms where information density and performance are the primary requirements.
View the Design System Showcase
- High Density: Layouts and components optimized for complex data views and analytical workflows.
- Modern Performance: Zero-runtime styling overhead with Tailwind 4 and React 19 concurrent mode.
- Full Adaptability: Integrated dark/light mode synchronization via document-root class.
- Total Reliability: 100% TypeScript implementation for type-safe component consumption.
- React 19: Core UI logic and concurrent rendering.
- Tailwind CSS 4: Modern styling engine with native CSS variables.
- TypeScript: Direct type definitions for documentation and safety.
- Vite: Ultra-fast build tool and development server.
- Colors: Semantic palette tailored for professional readability.
- Typography: Optimized scale for complex information architecture.
- Separator: Structural tools for layout segmentation.
- Card: Modular container with sub-components (Header, Content, Footer).
- Tabs: Logic for multi-view interfaces.
- Modal: Accessible overlays using React Portals.
- Button: Multi-variant actions with loading states.
- Switch: Toggles for system-wide configuration.
- Dropdown: Portal-rendered menus for context actions and notifications.
- Kbd: Visual shortcuts for power-user documentation.
- Table: Dense data grids for analytical management.
- Progress: Multi-state indicators for system metrics.
- Trend: Indicators for variance analysis with automatic direction logic.
- Badge: Status pills for classification.
- Chip: High-density tags with interactive removal capability.
- Alert: Semantic banners for system messaging.
- Avatar: Personalization with presence status and 5 size tiers.
- Spinner: Visual feedback for indeterminate wait times.
- Skeleton: Loading primitives for asynchronous data states.
- Tooltip: Hover context for dense data points.
- Native Behavior: Components behave exactly like their HTML counterparts.
- Visual Efficiency: High contrast and clear hierarchy for expert users.
- Professional Palette: Neutral grays to maintain brand agnostic design.
- Low Abstraction: Components are easy to override and maintain.
- Dashboard Density: Specifically built for high-information environments.
-
Clone the repository
git clone https://github.com/AndreaP2A/React-B2B-UI-Design-System.git
-
Install dependencies
npm install
-
Start development server
npm run dev
-
Build for production
npm run build
This project is open-source and available under the MIT License.