ABRS UI Kit

React UI re-usable components

Documentation

Below is a list of all documented components in the library, organized by category:

Layout Components

• Grid - Flexible layout system with rows and columns
• Card - Container for organizing related content
• Drawer - Side panel that slides in from the edge of the screen
• Modal - Dialog that appears on top of the main content
• Tabs - Tabbed interface for switching between content views
• Divider - Horizontal line to separate content
• Collapsible - Content sections that can be expanded or collapsed
• Collection - Container for organizing collections of items
• Scrollable - Container with customizable scrolling behavior
• Shimmer - Loading placeholder animation

Navigation Components

• Action - Interactive element for user actions
• Breadcrumb - Navigation aid showing the user's location
• Button - Standard button element

Form Components

• TextField - Basic text input field
• Number - Input field for numerical values
• Email - Input field with email validation
• Password - Secure input for passwords with visibility toggle
• PhoneNumber - Input field for phone numbers with validation
• FileInput - Input for file uploads
• Otp - One-time password input
• TextArea - Multi-line text input
• RadioButton - Radio button selection control
• Checkbox - Checkbox selection control
• SwitchButton - Toggle switch control
• Select - Dropdown selection control
• AutoComplete - Text input with suggestions
• MultiSelection - Multiple item selection control
• Floating - Container for floating label inputs

Date & Time Components

• DatePicker - Date selection control with calendar
• Calendar - Calendar view for date selection
• Time - Time selection control
• DateSlider - Interactive slider for date ranges

Feedback Components

• Alert - Feedback message with different severity levels
• Toast - Brief notification message
• Tooltip - Contextual information displayed on hover
• Chip - Compact element representing an input, attribute, or action

Typography Components

• Text - Text display with additional styling options