Skip to main content




Applies only to Traditional Web Apps

Tabs Reference

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and classes

    CSS selectors

    Element CSS Class Description
    Active Header It's active header (represented as the one with a colored underline)
    Active Tab It's active content


    Here are some more advanced use-cases of the widget.

    Change the active header style

    Write the following CSS in the CSS editor and change the yourcolor value: {
        border-bottom: var( --border-size-m) solid yourcolor;

    Or using CSS variables: var(--color-yourcolor)

    Example: {
        background: border-bottom: var( --border-size-m) solid var(--color-red)

    Add a background color to the tabs

    1. Enclose the tabs with a container.
    2. Add the classes background-blue-lighter text-neutral-0, this adds a light blue background and force the text to be white.
    3. Publish the application.

    • Was this article helpful?