Accordion
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.
Alerts
Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has a title and an icon. No description.
Unable to process your payment.
Please verify your billing information and try again.
- Check your card details
- Ensure sufficient funds
- Verify billing address
Neutral Alert
This is a neutral alert with default styling.
Success! Your changes have been saved
This is a success alert with green styling.
Information
This is an informational alert with blue styling.
Warning
This is a warning alert with amber/orange styling.
Size Variants
Small Success Alert
This is a small size alert.
Medium Information Alert
This is a medium (default) size alert.
Large Warning Alert
This is a large size alert.
Alerts with CTA
Success with CTA
This alert includes a call-to-action button.
Information with CTA
This informational alert includes multiple action buttons.
Warning with CTA
This warning alert includes a call-to-action.
Error with CTA
This error alert includes a call-to-action button.
Alert Dialog
Aspect Ratios
Avatar
CNER
CNLRER
Sizes (Roundrect)
SCSCSCSC
Sizes (Round)
SSCSCSC
With Images
CNCNCNCN
Color Variants
ABCDEFGHIJKLMNOPQRSTUV
With Status Indicators
CNABCDEF
Avatar Group (Stacked)
CNMLER
SCSCSC+2
Avatar Label Group
SC
Sheldon Cooper
sheldon.cooper@bbt.com
CN
John Doe
john.doe@example.com
Add Picture Button
Badges
PrimarySecondaryDestructiveOutlineGhostBrand PrimaryBrand SecondaryPositiveNegativeInfoWarningTertiaryAccent 1Accent 2
Verified89920+
Breadcrumb
Buttons
Button Group
Card
Login to your account
Enter your email below to login to your account
Carousel
1
2
3
4
5
Checkbox
Sizes
States
By clicking this checkbox, you agree to the terms and conditions.
Combo Box
Dialog
Drawer
Dropdown Menu
Empty
404 - Not Found
The page you're looking for doesn't exist. Try searching for what you need below.
Need help? Contact support
Input
Input Dropdown
Leading Dropdown
Trailing Dropdown
Dropdown Only
Fields
Item
Basic Item
A simple item with title and description.
Your profile has been verified.
Key Value Pair
John Doe
Label
Font Weight Comparison
Generic Label (Regular Weight)
Form Label (Medium Weight)
Basic
With Mandatory Indicator
With Badge
With Help Icon
With Description
Tell us a little about yourself
All Features Combined
Your middle name or initial (optional)
Nav Menu
Pagination
Popover
Progress
Radio Group
PCAF
PCAF
Resizable
Richtext Editor
RichTextEditor
Scroll Area
Select
Separator
Radix Primitives
An open-source UI component library.
Blog
Docs
Source
Sheet
Sidebar: should be on the left side of the screen
Skeleton
Slider
Horizontal
String value
Vertical
Sonner: needs sonner library
Sonner (toasts)
Switch
Tabs
SmallDefaultLargeNo min width with icon onlySmall min widthMedium min widthLarge min width with icon and labelTabs with content
Textarea
Toggle
Toggle Group
Strong/Outline
Strong/Ghost
Regular
Large
Small
Mini
Split
Tooltip
Key Value Pair
Stacked Layout
Left Aligned
String value
£+1,234.56
£+1,234.56Label
Unavailable
Right Aligned
String value
£+1,234.56
£+1,234.56Label
Unavailable
Inline Layout
Text
£+1,234.56
£+1,234.56Label
Unavailable
Directional Indicators
Text
£1,234.56
£-567.89
Text
Text
Data Table
Data Table — Default - Auto Column Width, Auto Table Width
Container
variant: default, gap: sm, width: full, align: center, padding: left, margin: noneTable
column width: auto, row height: normal, table divider: bottom, padding: default, text align: center| Status | Name | Amount | |||||
|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | $316.00 | Badge | |||
success | A Abe | Abe45@example.com | $242.00 | Badge | |||
processing | M Monserrat | Monserrat44@example.com | $837.00 | Badge | |||
success | S Silas | Silas22@example.com | $874.00 | Badge | |||
failed | C Carmella | carmella@example.com | $721.00 | Badge |
Data Table - Narrow Row Height, Normal Column Width, Auto Table Width, Text Align Right
Container
variant: default, gap: sm, width: full, align: center, padding: left, margin: noneTable
column width: normal, row height: narrow, table divider: topBottom, padding: default, text align: right| Status | Name | Amount | |||||
|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | $316.00 | Badge | |||
success | A Abe | Abe45@example.com | $242.00 | Badge | |||
processing | M Monserrat | Monserrat44@example.com | $837.00 | Badge | |||
success | S Silas | Silas22@example.com | $874.00 | Badge | |||
failed | C Carmella | carmella@example.com | $721.00 | Badge |
Data Table - Wide Row Height, Customise Column Width, Auto Table Width, Text Align Left
Container
variant: default, gap: sm, width: auto, align: center, padding: left, margin: noneTable
column width: auto, row height: wide, table divider: bottom, padding: default, text align: left| Status | Name | Amount | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | ken99@example.com | ken99@example.com | $316.00 | Badge | ||||
success | A Abe | Abe45@example.com | Abe45@example.com | Abe45@example.com | $242.00 | Badge | ||||
processing | M Monserrat | Monserrat44@example.com | Monserrat44@example.com | Monserrat44@example.com | $837.00 | Badge | ||||
success | S Silas | Silas22@example.com | Silas22@example.com | Silas22@example.com | $874.00 | Badge | ||||
failed | C Carmella | carmella@example.com | carmella@example.com | carmella@example.com | $721.00 | Badge |
Data Table - Complex - Normal Column Width, Auto Table Width, Text Align Left
Container
variant: default, gap: sm, width: full, align: center, padding: left, margin: noneTable
column width: narrow, row height: normal, table divider: bottom, padding: default, text align: left| Status | Name | Amount | |||||
|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | $316.00 | Badge | |||
success | A Abe | Abe45@example.com | $242.00 | Badge | |||
processing | M Monserrat | Monserrat44@example.com | $837.00 | Badge | |||
success | S Silas | Silas22@example.com | $874.00 | Badge | |||
failed | C Carmella | carmella@example.com | $721.00 | Badge |
Data Table — Card - Toolbar Attach - Wide Row Height, Min Column Width, Full Table Width, Text Align Left
Container
variant: default, gap: sm, width: full, align: center, padding: none, margin: noneTable
column width: auto, row height: wide, table divider: bottom, padding: default, text align: left, toolbar: attach| Status | Name | Amount | |||||
|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | $316.00 | Badge | |||
success | A Abe | Abe45@example.com | $242.00 | Badge | |||
processing | M Monserrat | Monserrat44@example.com | $837.00 | Badge | |||
success | S Silas | Silas22@example.com | $874.00 | Badge | |||
failed | C Carmella | carmella@example.com | $721.00 | Badge |
Data Table — Card - Toolbar Attach - Auto Column Width, Auto Table Width, Text Align Centre
Container
variant: default, gap: sm, width: auto, align: center, padding: none, margin: noneTable
column width: auto, row height: normal, table divider: bottom, padding: default, text align: center, toolbar: attach| Status | Name | Amount | |||||
|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | $316.00 | Badge | |||
success | A Abe | Abe45@example.com | $242.00 | Badge | |||
processing | M Monserrat | Monserrat44@example.com | $837.00 | Badge | |||
success | S Silas | Silas22@example.com | $874.00 | Badge | |||
failed | C Carmella | carmella@example.com | $721.00 | Badge |
Data Table — Variant7 - Toolbar Separate - Default Column Width, Auto Table Width, Text Align Left
Container
variant: variant7, gap: sm, width: auto, align: center, margin: left, padding: noneTable
column width: normal, row height: normal, table divider: topBottom, padding: default, text align: left, toolbar: separate| Status | Name | Amount | |||||
|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | $316.00 | Badge | |||
success | A Abe | Abe45@example.com | $242.00 | Badge | |||
processing | M Monserrat | Monserrat44@example.com | $837.00 | Badge | |||
success | S Silas | Silas22@example.com | $874.00 | Badge | |||
failed | C Carmella | carmella@example.com | $721.00 | Badge |
Data Table — Variant7 - Toolbar Separate - Normal Row Height, Customise Column Width, Auto Table Width, Text Align Left
Container
variant: variant7, gap: sm, width: auto, align: stretch, margin: left, padding: noneTable
column width: auto, row height: normal, table divider: topBottom, padding: default, text align: left, toolbar: separate| Status | Name | Amount | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
success | K Ken | ken99@example.com | ken99@example.com | ken99@example.com | $316.00 | Badge | ||||
success | A Abe | Abe45@example.com | Abe45@example.com | Abe45@example.com | $242.00 | Badge | ||||
processing | M Monserrat | Monserrat44@example.com | Monserrat44@example.com | Monserrat44@example.com | $837.00 | Badge | ||||
success | S Silas | Silas22@example.com | Silas22@example.com | Silas22@example.com | $874.00 | Badge | ||||
failed | C Carmella | carmella@example.com | carmella@example.com | carmella@example.com | $721.00 | Badge |
Top Nav: should be on the top of the screen
Tags
1. Base Styles & Sizes
DEFAULT:Label (xs)Label (sm)Label (md)Label (lg)
PRIMARY:Label (xs)Label (sm)Label (md)Label (lg)
SECONDARY:Label (xs)Label (sm)Label (md)Label (lg)
INFO:Label (xs)Label (sm)Label (md)Label (lg)
TERTIARY:Label (xs)Label (sm)Label (md)Label (lg)
ACCENT-2:Label (xs)Label (sm)Label (md)Label (lg)
BRAND-PRIMARY:Label (xs)Label (sm)Label (md)Label (lg)
2. Functional Variants (Dismiss & Count)
Label12Label
3. Contextual Styles (Inverse & Disabled)
Dark Mode
DefaultPrimary5
Disabled DefaultDisabled Count8Disabled Dismiss
Disabled Dark Mode