Tabs

Style

Semantic colors, density, corner radius, and max-width on the tabs root.

Preview

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.tabs class="tabs" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

Semantic

Use class="ui-{role}" to set the semantic palette of a tabs.

Available options: accent, alert, brand, info, success

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.tabs class="tabs" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-accent" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-brand" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-alert" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-info" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-success" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

Size

Use class="ui-size-{size}" to set the size of a tabs.

Available options: xs, sm, md (default), lg, xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.tabs class="tabs ui-size-sm" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-size-md" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-size-lg" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-size-xl" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a tabs.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.tabs class="tabs ui-rounded-none" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-rounded-md" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-rounded-lg" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-rounded-xl" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />
<.tabs class="tabs ui-rounded-full" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

Max width

Without max-w-*, width comes from component CSS. Default for tabs: md (width: 100%).

Use class="max-w-{step}" to set the maximum width of a tabs root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (md)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

none

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

full

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

9xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

8xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

7xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

6xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

5xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

4xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

3xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

2xs

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

2xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

3xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

4xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

5xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

6xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

7xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

8xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

9xl

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.tabs class="tabs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-none" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-full" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-9xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-8xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-7xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-6xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-5xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-4xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-3xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-2xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-xs" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-sm" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-md" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-lg" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-2xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-3xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-4xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-5xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-6xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-7xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-8xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />

<.tabs class="tabs max-w-9xl" value="lorem" items={Corex.Content.new([
      %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
      %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
      %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
    ])} />