Phoenix + DaisyUI

Setup
Setup
Welcome
Welcome
Alert
Components Alert
Avatar
Components Avatar
Badge
Components Badge
Breadcrumbs
Components Breadcrumbs
Button
Components Button
Card
Components Card
Checkbox
Components Checkbox
Drawer
Components Drawer
Dropdown
Components Dropdown
Fieldset
Components Fieldset
Flash
Components Flash
Footer
Components Footer
Header
Components Header
Hero
Components Hero
Indicator
Components Indicator
Input
Components Input
Join
Components Join
Label
Components Label
List
Components List
Loading
Components Loading
Menu
Components Menu
Modal
Components Modal
Navbar
Components Navbar
Pagination
Components Pagination
Progress
Components Progress
Radio
Components Radio
Range
Components Range
Select
Components Select
Simple Form
Components Simple Form
Stat
Components Stat
Swap
Components Swap
Table
Components Table
Tabs
Components Tabs
Text Input
Components Text Input
Textarea
Components Textarea
Toggle
Components Toggle
Tooltip
Components Tooltip
Insert Users
Examples Insert Users

Tabs

<.tabs >
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>

Tabs border Open in playground

Tab 1 Tab 2 Tab 3

<.tabs border>
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>

Tabs lift Open in playground

Tab 1 Tab 2 Tab 3

<.tabs lift>
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>

Tabs box Open in playground

Tab 1 Tab 2 Tab 3

<.tabs box>
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>

Tabs box using radio input Open in playground

<.tabs box>
  <.tab type="radio" name="my_tabs_1" title="Tab 1" />
  <.tab type="radio" name="my_tabs_1" checked title="Tab 2" />
  <.tab type="radio" name="my_tabs_1" title="Tab 3" />
</.tabs>

Tabs sizes Open in playground

Tab 1 Tab 2 Tab 3

<.tabs class="mb-2" lift size="xs">
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>
<.tabs class="mb-2" lift size="sm">
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>
<.tabs class="mb-2" lift size="md">
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>
<.tabs class="mb-2" lift size="lg">
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>
<.tabs class="mb-2" lift size="xl">
  <.tab>Tab 1</.tab>
  <.tab active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>

Tabs border with content Open in playground

Tab content 1

Tab content 2

Tab content 3

<.tabs border>
  <.tab type="radio" name="my_tabs_2" title="Tab 1" />
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 1
  </.tab_content>
  <.tab type="radio" name="my_tabs_2" checked title="Tab 2" />
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 2
  </.tab_content>
  <.tab type="radio" name="my_tabs_2" title="Tab 3" />
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 3
  </.tab_content>
</.tabs>

Tabs lift with icons and content Open in playground

Live

Tab content 1

Laugh

Tab content 2

Love

Tab content 3

<.tabs lift>
  <.tab type="label" name="my_tabs_4">
    <.icon name="hero-play" />
    Live
  </.tab>
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 1
  </.tab_content>
  <.tab type="label" name="my_tabs_4" active>
    <.icon name="hero-face-smile" />
    Laugh
  </.tab>
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 2
  </.tab_content>
  <.tab type="label" name="my_tabs_4">
    <.icon name="hero-heart" />
    Love
  </.tab>
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 3
  </.tab_content>
</.tabs>

Tabs border with content on bottom Open in playground

Tab content 1

Tab content 2

Tab content 3

<.tabs lift position="bottom">
  <.tab type="radio" name="my_tabs_5" title="Tab 1" />
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 1
  </.tab_content>
  <.tab type="radio" name="my_tabs_5" checked title="Tab 2" />
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 2
  </.tab_content>
  <.tab type="radio" name="my_tabs_5" title="Tab 3" />
  <.tab_content class="border-base-300 bg-base-100 p-10">
    Tab content 3
  </.tab_content>
</.tabs>

Tabs with custom color Open in playground

Tab 1 Tab 2 Tab 3

<.tabs >
  <.tab>Tab 1</.tab>
  <.tab class="text-primary bg-orange-500" active>Tab 2</.tab>
  <.tab disabled>Tab 3</.tab>
</.tabs>