Grid list with menu

/

Avatar

BasicFallbackGroupInitialsSizeSquare

Badge

BasicDangerInfoOutlineSecondarySuccessWarningWith borderWith iconWith linkWith solid background

Bar list

BasicControlledWith cardWith link

Breadcrumbs

BasicSlash separatorWith iconWith menu

Button

Button with iconCircleCustom backgroundCustom designDangerDisabledInfoInline alertLargeOutlinePlainPrimarySecondarySmallSquareStateSubtle dangerSubtle infoSubtle primarySubtle successSubtle warningSubtle with iconSuccessWarning

Button group

BasicDisabledVerticalWith iconWith menuWith text

Checkbox

BasicControlledCustom backgroundDefault selectedDisabledInvalidReadonlyUncontrolledWith checkbox groupWith descriptionWith fieldset

Choice box

Multiple choiceSingle choiceWith cardWith default selectedWith gapWith gap columnsWith iconWith linkWith modalWith sheet

Code block

BasicOther langWith copy buttonWith line numbersWith max height

Color picker

Basic

Color slider

BasicDisabledOrientationWith label

Color swatch

BasicCustom size

Color swatch picker

Basic

Color wheel

BasicControlledDisabled

Combo box

BasicControlledDisabledInvalidReadonlyUncontrolledWith avatarWith avatar and descriptionWith descriptionWith description on itemWith fieldsetWith iconsWith label

Date field

BasicControlledUncontrolledValidationWith descriptionWith fieldsetWith label

Date picker

BasicControlledDisabledReadonlyUncontrolledValidationWith descriptionWith fieldsetWith time

Date range picker

BasicDisabledReadonlyWith fieldset

Description list

BasicFull width with cardFull width with modalFull width with sheetWith badgeWith cardWith disclosureWith modalWith sheet

Detail line

BasicWith badgeWith card

Details

BasicWith badgeWith iconWith linkWith modalWith sheetWith text

Disclosure group

BasicControlledCustom styleDisabledInside modalInside sheetMultiple expandedNestedWith form

Fieldset

BasicDisabledWith cardWith custom layoutWith field groupWith grid layoutWith legendWith text

File trigger

ControlledWith drop zone

Grid list

BasicControlledDisabledDrag between gridDraggableMultiple selectionRegular listSingle selectionWith avatarWith linkWith menuWith sectionWithout selection

Heading

Level 1Level 2Level 3Level 4With actions

Input otp

ControlledDisabledOnly lettersOnly numbersPinValidationWith patternWith separatorWith timer

Keyboard

BasicCustom backgroundWith buttonWith input groupWith menuWith toggle

Link

BasicCustom styleText linkWith button styleWith text

Menu

ArrowBasicBlur overlayDanger itemDisabled itemFor userMultipleMultiple userOn actionOpen modalPlacementSection level sectionWarning itemWith autocompleteWith avatarWith avatar and descriptionWith avatar triggerWith descriptionWith linkWith sectionWith shortcutWith sticky headerWith submenuWith table

Meter

BasicFullWith descriptionWith value label props

Modal

Alert dialogBasicControlledCustom closeCustom style 1Custom style 2Custom style 3Custom style 4DialogFullscreenNestedStickyWith checkboxWith form submitWith iconWith switch

Note

BasicDangerInfoInside toastSuccessWarning

Number field

BasicCompactControlledCurrencyDisabledPercentUnitsWith descriptionWith field errorWith fieldsetWith labelWith link after label

Password field

BasicWith anonation

Popover

ArrowBasicNestedPlacementWith avatar triggerWith description listWith detail lineWith detailsWith dialogWith formWith grid listWith tabs

Progress bar

BasicControlledWith description

Radio

BasicCustom backgroundDisabledInvalidWith checkboxWith descriptionWith fieldset

Search field

BasicControlledDisabledReadonlyUncontrolledWith custom inputWith descriptionWith keyboardWith label

Select

BasicControlledDisabledInvalidMultipleUncontrolledWith autocompleteWith avatarWith avatar and descriptionWith descriptionWith description on itemWith fieldsetWith iconsWith label

Sheet

BasicControlledCustom closeFloatPositionSticky

Slider

BasicControlledCustom styleOrientationStep

Switch

BasicControlledCustom backgroundDefault selectedDisabledReadonlyUncontrolledWith descriptionWith fieldset

Table

BasicBulk actionsDraggableFull width with cardFull width with modalGridSortableStrippedWith actionWith columns selectionWith menu actionsWith paginationWith searchWith tanstack table

Tabs

BasicCircle with borderFill black whiteFill dangerFill danger subtleFill info subtleFill primaryFill primary subtleFill secondaryFill success subtleFill warningFill warning subtleFill with circle containerFill with motionKeyboard activationScrollableScrollable on mobileVerticalWith borderWith circle itemWith danger colorWith foreground colorWith iconWith info colorWith linkWith success colorWith warning color

Tag field

BasicControlled inputDisabledInvalid tag inputReadonlyUncontrolled input

Tag group

Allow removeControlled selectionDefault selectedDisabled selectionLinkMultiple selectionSingle selectionWith fieldset

Text

BasicWith badgeWith fieldsetWith input groupWith link

Text field

BasicControlledDisabledReadonlyUncontrolledValidation with zodWith buttonWith field errorWith fieldsetWith input groupWith link after labelWith native select

Textarea

BasicWith tabs

Time field

BasicControlledUncontrolledValidationWith descriptionWith fieldsetWith label

Toggle

BasicControlledOutlineSizeSquare sizeUncontrolled

Toggle group

BasicControlledCustom backgroundMultipleSizeSquare sizeSubtle dangerSubtle infoSubtle primarySubtle successSubtle warningUncontrolledWith motion

Tooltip

BasicBiggerFull roundedInverseNo delayPlacementWith pressableWithout arrow

Tracker

BasicCustom backgroundWith cardWithout tooltip

Tree

BasicControlledDefault expandedDisabledDisabled selectionDraggableMultipleOn actionWith icons

With menu

Get code

---

NYC-1

192.168.10.21

Atlas blogatlasblog.com

online

Northwind shopnorthwind.shop

deploying

Beacon docsdocs.beacon.io

maintenance

Harbor crmharborcrm.com

error

Polaris careerscareers.polaris.io

online

Lumen financelumen.finance

paused