Components
Browse and use our collection of reusable components.
Button
Displays a button or a component that looks like a button.
Input
Displays a form input field.
Textarea
Displays a multi-line text input field.
Label
Renders an accessible label associated with controls.
Select
Displays a list of options for the user to pick from.
Checkbox
A control that allows the user to toggle between checked and not checked.
Radio Group
A set of checkable buttons where only one can be checked at a time.
Switch
A control that allows the user to toggle between on and off.
Slider
An input where the user selects a value from within a given range.
Toggle
A two-state button that can be on or off.
Toggle Group
A set of toggle buttons that can work together.
Calendar
A date field component that allows users to select dates.
Date Picker
A date picker built with Calendar and Popover.
Avatar
An image element with a fallback for user profiles.
Badge
Displays a badge or a component that looks like a badge.
Card
Displays a card with header, content, and footer.
Chart
Beautiful charts built with Recharts. Area, bar, line, pie, radar, and radial.
| Name | Status |
|---|---|
| Item 1 | Active |
| Item 2 | Pending |
Table
A responsive table component.
Skeleton
Used to show a placeholder while content is loading.
Separator
Visually separates content.
Hover Card
For sighted users to preview content behind a link.
Alert Title
Alert
Displays a callout for user attention.
Dialog
A modal dialog that interrupts the user.
Popover
Displays rich content in a portal triggered by a button.
Toast
A succinct message that is displayed temporarily.
Tooltip
A popup that displays information related to an element.
Progress
Displays an indicator showing the completion progress of a task.
Command
Fast, composable command menu for search and actions.
Dropdown Menu
Displays a menu to the user.
Tabs
A set of layered sections of content.
Accordion
A vertically stacked set of interactive headings.
Collapsible
An interactive component which expands and collapses.
Sheet
A panel that slides out from the side of the screen.
Scroll Area
Augments native scroll functionality for custom styling.
Sites Map
Interactive Mapbox map for visualizing energy site locations.
Energy Flow
React Flow diagram showing real-time energy distribution.
AI Chat
Conversational AI interface for energy system management.
EMS Schedule
Energy management system schedule visualization.
Electricity Price
Real-time electricity pricing display.
Weather Card
Weather information card component.