• Docs
  • Blog

    • 0.25.1

    • 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