See the live demo of the Rs-Ui components here. If the UI seems broken, please refresh the page, and wait about a couple of minutes for the assets to be considered (Unkown issue when using chromatic).
Rs-Ui is a design system for building user interfaces in React. It provides a set of components that helps developers create consistent and visually appealing user interfaces quickly and efficiently. The purpose of the prototype is to demonstrate my proficiency in React and design principles, as well as to showcase my ability to create reusable components that can be easily integrated into any project.
- Button - Different variants, sizes, states
- Alert - Notifications with different severity levels
- Badge - Small count and status indicators
- Card - Container component with variants
- Avatar - User pictures with fallback initials
- Progress Bar - Progress indicator
- Spinner/Loader - Loading states
- Breadcrumb - Navigation path indicator
- Accordion - Collapsible content sections
- Modal - Dialog boxes with customizable headers/footers
- Dropdown - Menu component with positioning options
- Form Components: - [ ] Input - Text entry with validation states - [ ] TextArea - Multi-line text input - [ ] Select - Dropdown selection - [ ] Checkbox - Boolean selection - [ ] Radio - Option selection
- Toggle/Switch - On/off controls
- Tabs - Tabbed interface component
- Tooltip - Information on hover
- Toast/Notification - Temporary messages
- Pagination - Page navigation controls
- Table - Data display with sorting/filtering
- Sidebar/Navigation - Navigation component
- Slider/Range - Input for selecting values from a range