1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29

import { Tabs } from "@gunkin/uiify";

export default function Example() {
  return (
    <Tabs
      className=""
      id="account-tabs"
      defaultValue="profile"
      slotProps={{
        item: { className: "" },
        input: { className: "" },
        trigger: { className: "" },
        panel: { className: "" },
      }}
      items={[
        {
          value: "profile",
          label: <span>Profile</span>,
          panel: <>Profile settings</>,
        },
        {
          value: "security",
          label: <span>Security</span>,
          panel: <>Security settings</>,
        },
      ]}
    />
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100

/* Tabs — list of triggers with an active underline; content panels below.
   Adapts to [data-orientation]; active state from [data-state="active"]. */

@layer components {
  [data-uiify-tabs] > [data-part="item"] > [data-part="trigger"] {
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: none;
    background: none;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    font-weight: var(--weight-medium);
    cursor: pointer;
    border-block-end: 2px solid transparent;
    margin-block-end: calc(-1 * var(--border-width));
    transition: var(--transition-colors);
  }

  [data-uiify-tabs] > [data-part="item"] > [data-part="trigger"]:hover {
    color: var(--foreground);
  }

  [data-uiify-tabs] > [data-part="item"] > [data-part="trigger"][data-state="active"] {
    border-block-end-color: var(--primary);
    color: var(--foreground);
  }

  /* Panel visibility is owned by @gunkin/uiify/components/behavior.css (radio :checked). */

  [data-uiify-tabs] > [data-part="item"] {
    display: contents;
  }

  [data-uiify-tabs] {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: start;
    gap: 0;
  }

  [data-uiify-tabs] > [data-part="item"] > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  [data-uiify-tabs] > [data-part="item"] > label {
    display: inline-flex;
    grid-row: 1;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border-block-end: 2px solid transparent;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    font-weight: var(--weight-medium);
    cursor: pointer;
  }

  [data-uiify-tabs] > [data-part="item"] > label:hover {
    color: var(--foreground);
  }

  [data-uiify-tabs] > [data-part="item"]:has(> input:checked) > label {
    border-block-end-color: var(--primary);
    color: var(--foreground);
  }

  [data-uiify-tabs] > [data-part="item"] > input:focus-visible + label {
    outline: none;
    box-shadow: 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 20%, transparent);
  }

  [data-uiify-tabs] > [data-part="item"] > [data-part="panel"] {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  /* Shared presence fade for the newly selected panel; the previous one leaves at once. */
  @media (prefers-reduced-motion: no-preference) {
    [data-uiify-tabs] > [data-part="item"] > [data-part="panel"] {
      transition: opacity var(--duration-fast) var(--ease-out);
    }

    @starting-style {
      [data-uiify-tabs] > [data-part="item"] > [data-part="control"]:checked ~ [data-part="panel"] {
        opacity: 0;
      }
    }
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48

import { Tabs } from "@gunkin/uiify";

export default function Example() {
  return (
    <Tabs
      className="
        grid w-full max-w-[38rem] min-w-0 mx-auto [grid-template-rows:auto_auto] [align-items:start] gap-0
      "
      id="account-tabs"
      defaultValue="profile"
      slotProps={{
        item: { className: "contents" },
        input: {
          className:
            "peer/tabs absolute [inline-size:1px] [block-size:1px] [margin:-1px] " +
            "overflow-hidden [clip-path:inset(50%)] whitespace-nowrap",
        },
        trigger: {
          className:
            "inline-flex [grid-row:1] py-sm px-md [border-block-end:2px_solid_transparent] " +
            "text-muted-foreground text-sm [line-height:var(--leading-normal)] " +
            "font-[number:var(--weight-medium)] cursor-pointer hover:text-foreground " +
            "peer-checked/tabs:[border-block-end-color:var(--primary)] " +
            "peer-checked/tabs:text-foreground peer-focus-visible/tabs:[outline:none] " +
            "peer-focus-visible/tabs:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)]",
        },
        panel: {
          className:
            "[grid-column:1_/_-1] [grid-row:2] text-sm [line-height:var(--leading-normal)] " +
            "motion-safe:[transition:opacity_var(--duration-fast)_var(--ease-out)] " +
            "motion-safe:starting:peer-checked/tabs:opacity-0",
        },
      }}
      items={[
        {
          value: "profile",
          label: <span>Profile</span>,
          panel: <>Profile settings</>,
        },
        {
          value: "security",
          label: <span>Security</span>,
          panel: <>Security settings</>,
        },
      ]}
    />
  );
}