Megumin UI — Component Demo
A lightweight, dark-mode ready CSS framework focusing on simplicity and modern design.
Typography
Headings
Heading 1 (2.5rem)
Heading 2 (2rem)
Heading 3 (1.75rem)
Heading 4 (1.5rem)
Heading 5 (1.25rem)
Heading 6 (1rem)
Link
Default link style
Text utilities
font-bold
font-normal
uppercase
truncate: this text is too long to fit
text-left
text-center
text-right
Badges
Color variants
Default
Primary
Secondary
Tertiary
Inline usage
Pending tasks 3
New messages 12
Notifications 99+
Alerts
Palette variants
This is a default alert message.
This is a primary (brand) alert.
This is a secondary alert.
This is a tertiary alert.
Semantic state variants
Operation completed successfully.
An error occurred. Please try again.
Warning: this action cannot be undone.
Here is some helpful information.
With dismiss button
Your changes have been saved.
Tables
| Name |
Role |
Status |
Score |
| Megumin |
Arch-wizard |
Active |
9800 |
| Kazuma |
Adventurer |
Active |
4200 |
| Aqua |
Goddess |
Idle |
1100 |
| Darkness |
Crusader |
Active |
7600 |
| Wiz |
Lich |
Default |
8300 |
Layout
Grid — cols-2
Grid — cols-3
Grid — cols-4
Flex — justify-between
Background color utilities
bg-primary
bg-secondary
bg-tertiary