DocsBlog

  • 0.25.3

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Styling
Theming

Concepts

OverviewCompositionTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

Components

Accessible and easy to use or customize UI components

Categories

Here are a list of the components available in this library, grouped by their functionality:

Actions

Components that trigger an action.

  • Button

    Buttons are used to trigger actions or events.

  • Icon Button

    Icon buttons are used to trigger actions or events.

Communication

Communication components provide useful information.

  • Admonition

    Admonitions are used to provide additional information or context.

  • Accordion

    Accordions are used to display collapsible content.

  • Avatar

    Avatars are used to represent users or entities.

  • Notifications

    Notifications are used to alert users of important information.

  • Progress Indicators

    Progress indicators are used to show the status of an ongoing process.

  • Tag

    Tags are used to categorize or label content.

  • Tooltip

    Tooltips are used to provide additional information.

Containment

Components that contain other components.

  • Confirm Modal

    Confirm modals are used to confirm an action.

  • Prompt Modal

    Prompt modals are used to collect user input.

  • CTA Modal

    CTA modals are used to promote a specific action.

  • Dialog

    Dialogs are used to display content on top of an overlay.

  • Table

    Tables are used to display data in a structured format.

Navigation

Components that help users navigate through the app.

  • Menu

    Menus are used to display a list of options.

  • Tabs

    Tabs are used to navigate between different sections.

Selection

Components that allow users to select choices.

  • Drag & Drop

    Drag & drop is used to move items between locations.

  • Checkbox

    Checkboxes are used to select multiple options.

  • Date Picker

    Date pickers are used to select a date.

  • Radio

    Radio buttons are used to select a single option.

  • Rating

    Ratings are used to provide feedback on a scale.

  • Select

    Selects are used to choose from a list of options.

  • Combobox

    Comboboxes are used to filter or select from a list.

  • Switch

    Switches are used to toggle between two states.

Inputs

Components that allow users to input data.

  • Field

    Fields are used to collect user input.

  • Input

    Inputs are used to collect user input.

  • Textarea

    Textareas are used to collect multi-line user input.

  • Label

    Labels are used to describe form inputs.

  • Fieldset

    Fieldsets are used to group related form inputs.

  • Field Message

    Field messages are used to provide feedback.

  • File Uploader

    File uploaders are used to upload files.

On this page

  • Edit this page on Github
Cerberus Design System | Docs