Breadcrumb
Cards
Default
This is a Default Card with a longer content area. You can use this card for general information, dashboard widgets, or any content that doesn't require a colored accent.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Etiam euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque.
variant="default"
Accent (darkgrey)
This is an Accent Card.
variant="accent" color={darkgrey}
Accent (accent)
This is an Accent Card.
variant="accent" color={accent}
Accent (red)
This is an Accent Card.
variant="accent" color={red}
Accent (blue)
This is an Accent Card.
variant="accent" color={blue}
Accent (turquoise)
This is an Accent Card.
variant="accent" color={turquoise}
Accent (green)
This is an Accent Card.
variant="accent" color={green}
Accent (orange)
This is an Accent Card.
variant="accent" color={orange}
Accent (yellow)
This is an Accent Card.
variant="accent" color={yellow}
Accent (purple)
This is an Accent Card.
variant="accent" color={purple}
Accent (pink)
This is an Accent Card.
variant="accent" color={pink}
Accent (lightgrey)
This is an Accent Card.
variant="accent" color={lightgrey}
Accent (black)
This is an Accent Card.
variant="accent" color={black}
Hover
This is a Hover Card with a longer content area. Use this card to highlight interactive or hoverable content, such as previews, actions, or dynamic widgets.
Hover over this card to see the framer-motion effect. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque.
variant="hover"
Buttons
Solid (xs, xsm, sm, md)
Outline (xs, xsm, sm, md)
Accent (xs, xsm, sm, md)
Danger (xs, xsm, sm, md)
Alert Dialog
Alert Variants
Success
Success! Your changes have been saved
This is an alert with icon, title and description.
Default
This Alert has a title and an icon. No description.
Error
Unable to process your payment.
Please verify your billing information and try again.
- Check your card details
- Ensure sufficient funds
- Verify billing address
Info
Heads up!
This is an informational alert.
Warning
Warning!
This is a warning alert. Please be careful.
AuthCard (Google only)
Sign in or create an account with Google to start using subNest
Toast
Combobox
Select
Datepicker
Badges
ColorMinimalStandard
Dark GreyDark GreyDark Grey
AccentAccentAccent
RedRedRed
BlueBlueBlue
GreenGreenGreen
OrangeOrangeOrange
YellowYellowYellow
PurplePurplePurple
PinkPinkPink
Light GreyLight GreyLight Grey
BlackBlackBlack
TurquoiseTurquoiseTurquoise
DataTable
Name | Billing | Cost | Next Renewal |
|---|---|---|---|
| Netflix | Monthly | $15.99 | 7/15/2025 |
| Spotify | Monthly | $9.99 | 7/20/2025 |
| Adobe Creative Cloud | Monthly | $52.99 | 7/22/2025 |
| Amazon Prime | Annual | $139.00 | 1/10/2026 |
| Notion | Monthly | $8.00 | 7/18/2025 |
| Google Workspace | Monthly | $12.00 | 7/25/2025 |
| Apple iCloud | Monthly | $2.99 | 7/28/2025 |
| PlayStation Plus | Quarterly | $24.99 | 8/1/2025 |
| GitHub Copilot | Monthly | $10.00 | 7/30/2025 |
| Zoom Pro | Monthly | $14.99 | 7/27/2025 |
Inputs
Default
File
Disabled
With Label
With Button
SignInLoading
Signing you in...
Empowering you to take control of your subscription spending.