Skip to content

Components Overview

SageUI provides a comprehensive set of components organized into logical categories. Each component is designed with accessibility, customization, and developer experience in mind.

Actions

Interactive elements that trigger actions or behaviors.

Button

Clickable buttons in various styles and sizes

Modal

Dialog overlays for important content and user interactions

Data Input

Form elements for collecting user input.

Text Input

Text input fields with various states and styles

Checkbox

Checkboxes for boolean selections

Radio

Radio buttons for single selections from multiple options

Select

Dropdown select menus for choosing from options

Data Display

Components for presenting information and data.

Card

Flexible containers for grouping related content

Card Title

Some example content for the card body.

Avatar

User profile images and placeholder avatars

Avatar
Avatar

Badge

Small status indicators and labels

DefaultPrimarySuccessWarning

Table

Structured data tables with sorting and styling

NameRoleStatus
John DoeAdminActive
Jane SmithUserPending

Feedback

Components for providing user feedback and status information.

Alert

Contextual feedback messages for user actions

Success! Changes saved.
⚠️Warning: Check your input.

Loading

Spinners and loading indicators

Tooltip

Contextual information on hover or focus

Getting Started

Ready to start using these components? Check out our installation guide or dive into specific component documentation.


Component Status

ComponentStatusAccessibilityDocumentation
Button✅ Complete♿ WCAG AA📚 Full
Card✅ Complete♿ WCAG AA📚 Full
Alert✅ Complete♿ WCAG AA📚 Full
Input✅ Complete♿ WCAG AA📚 Full
Checkbox✅ Complete♿ WCAG AA📚 Full
Radio✅ Complete♿ WCAG AA📚 Full
Select✅ Complete♿ WCAG AA📚 Full
Avatar✅ Complete♿ WCAG AA📚 Full
Badge✅ Complete♿ WCAG AA📚 Full
Table✅ Complete♿ WCAG AA📚 Full
Loading✅ Complete♿ WCAG AA📚 Full

Released under the MIT License.