ERGO-UI
A modern, futuristic React component library
Button
Variants
Sizes
Outline
Sharp
With Icon
Custom Colour
Badge
Variants
PrimarySecondaryTertiaryDanger
Sizes
SmallMediumLarge
Sharp
PrimarySecondaryDangerCustom
Avatar
Status
Sizes
Sharp
Alert
Information
This is an informational alert message.
Success
Your action was completed successfully.
Error
Something went wrong. Please try again.
Notice
Here is a secondary style alert.
Toggle
Variants
Sharp
Progress
Bar — Variants
65%
40%
80%
Bar — Sizes
Circular
75%
50%
30%
Input
Variants
States
With Icon
TextArea
Variants
States
Select
Default
Error
Sharp
Accordion
Primary Accordion
This is the primary accordion content. Click the header to collapse.
Secondary Accordion
Secondary variant accordion content goes here.
Sharp Accordion
This accordion uses sharp corners.
Card
Primary Card
A primary card with a header icon and some body content.
Toggle Card
Notifications
Email
Push
Sharp Card
Card with sharp corners enabled.
Modal
Open a modal