Nexus Design System

A design system for building web applications with React and TailwindCSS

Features

• Tree-shakeable (components you don't use won't be included in your bundle)
• Dark mode support
• Override library styles with your own using tailwindcss or your own css

Wanna see how this library works ?

Run the example project and play around

The example project has the published npm package linked so you do not really have to do a local npm link.

cd examples
npm install
npm run dev

// add this to main.jsx file

import "@mustafaihssan/nexus-ui/dist/style.css";

Main Components

• [x] ~~Buttons~~
• [ ] Master Layout with sidebar and header
• [ ] Sidebar with JSON menu
• [ ] Header with Auth menu + Change Teninet + Change App
• [ ] Login page
• [ ] Logout page
• [ ] Change Teninet page
• [ ] Change App page
• [ ] Page Layout For Lists
• [ ] Page Layout For view/Edit
• [ ] Nexus Table
• [ ] Action Buttons (Add, Edit, Delete, View, etc)
• [ ] upload file
• [ ] download/view file buttons
• [ ] upload files list
• [ ] Breadcrumbs
• [ ] Button Group
• [ ] Card
• [ ] Model Dialog
• [ ] Modal Dialog with form
• [ ] toast notification
• [ ] Loading with spinner and skeleton
• [ ] Tabs with router
• [ ] Tags
• [ ] Segmented Select
• [ ] Segmented Select with Cards List
• [ ] Statistics Widgets

Nexus Form

• [ ] Nexus Form (with validation) + react-hook-form
• [ ] Nexus Form Field Input
• [ ] Nexus Form Field Select (with update options from API)
• [ ] Nexus Form Field Checkbox

Theme

• [ ] Theme Provider
• [ ] Language Switcher
• [ ] Dark Mode