lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Components

accordion

Expanded accordion panel

Expanded accordion content

Disabled accordion header

Disabled accordion content

Collapsed accordion

Collapsed accordion content

alert

alertalert accentalert successalert warningalert danger

badge

breadcrumb

Home Parent page

Current page

button

default

button-expand

button-group

onetwothree

button-handle

button-icon

button-resize

button-sort

card

Heading

Content

chat

hello there...this is a message that just keeps going...

checkbox

color

message text

date

message text

divider

some text content

some text content

file

format-datetime

2023-07-28T04:20:17.434Z

format-number

1234567123.4567123.4567

header

headeritemitemlink

input

menu

menu itemitem selecteditem disabledmenu itemmenu itemitem selecteditem disabledmenu item

month

message

nav

item 1item 2item 3

pagination

/ 3

password

progress-bar

progress-circle

progress-dot

radio

message text

range

message text

rating

search

select

Option OneOption TwoOption Threemessage text

stepper

Step 1Step 2Step 3

switch

message text

tabs

onetwothreepanel onepanel twopanel three

tag

neutralinfosuccesswarningdanger

textarea

message text

time

message text

toggletip

Wow this is a toggletip message!

DismissLearn More

tree

Item 1Item 2Item 3Item 3-1Item 3-2Item 3-3Item 3-3-1Item 3-3-2Item 3-3-3Item 3-4Item 3-5

icon

grid

colcolcolcolcellcellcellcellcellcellcellcellcellcellcellcell

header