Vertical Tabs

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

<div class="w-full max-w-4xl bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
  <div class="grid md:grid-cols-[220px_1fr]">
    <aside class="border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/60 p-3" aria-label="Documentation sidebar">
      <div role="tablist" aria-orientation="vertical" aria-label="Documentation sections" class="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible">
        <button role="tab" id="vtab-intro" aria-selected="true" aria-controls="vpanel-intro" tabindex="0"
          class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm font-medium text-white bg-slate-900 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 whitespace-nowrap md:whitespace-normal">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          Introduction
        </button>
        <button role="tab" id="vtab-install" aria-selected="false" aria-controls="vpanel-install" tabindex="-1"
          class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 whitespace-nowrap md:whitespace-normal">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
          Installation
        </button>
        <button role="tab" id="vtab-config" aria-selected="false" aria-controls="vpanel-config" tabindex="-1"
          class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 whitespace-nowrap md:whitespace-normal">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          Configuration
        </button>
        <button role="tab" id="vtab-deploy" aria-selected="false" aria-controls="vpanel-deploy" tabindex="-1"
          class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 whitespace-nowrap md:whitespace-normal">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/></svg>
          Deployment
        </button>
        <button role="tab" id="vtab-faq" aria-selected="false" aria-controls="vpanel-faq" tabindex="-1"
          class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 whitespace-nowrap md:whitespace-normal">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.01 2.907-.603.111-.99.88-.99 1.493v.6M12 17h.01"/></svg>
          FAQ
        </button>
      </div>
    </aside>

    <div class="p-6 md:p-8 min-h-[280px]">
      <div role="tabpanel" id="vpanel-intro" aria-labelledby="vtab-intro" tabindex="0" class="focus:outline-none">
        <p class="text-xs font-medium text-blue-600">Getting started</p>
        <h2 class="mt-1 text-xl font-bold text-gray-900">Introduction</h2>
        <p class="mt-3 text-sm leading-7 text-gray-600">DevSnips is a component library of production-ready UI snippets. This guide walks you through installation, configuration, and deployment so you can ship faster.</p>
      </div>
      <div role="tabpanel" id="vpanel-install" aria-labelledby="vtab-install" tabindex="0" class="hidden focus:outline-none">
        <p class="text-xs font-medium text-blue-600">Step 1</p>
        <h2 class="mt-1 text-xl font-bold text-gray-900">Installation</h2>
        <pre class="mt-3 rounded-lg bg-gray-900 text-gray-100 text-xs leading-6 p-4 overflow-x-auto"><code>npm install @devsnips/cli
npx devsnips add tabs</code></pre>
      </div>
      <div role="tabpanel" id="vpanel-config" aria-labelledby="vtab-config" tabindex="0" class="hidden focus:outline-none">
        <p class="text-xs font-medium text-blue-600">Step 2</p>
        <h2 class="mt-1 text-xl font-bold text-gray-900">Configuration</h2>
        <p class="mt-3 text-sm leading-7 text-gray-600">Edit the <code class="px-1 py-0.5 bg-gray-100 rounded">devsnips.config.js</code> file to set your theme tokens, output directory, and preferred framework.</p>
      </div>
      <div role="tabpanel" id="vpanel-deploy" aria-labelledby="vtab-deploy" tabindex="0" class="hidden focus:outline-none">
        <p class="text-xs font-medium text-blue-600">Step 3</p>
        <h2 class="mt-1 text-xl font-bold text-gray-900">Deployment</h2>
        <p class="mt-3 text-sm leading-7 text-gray-600">Push to your repository and your CI pipeline will publish components. Preview deployments are created automatically for every branch.</p>
      </div>
      <div role="tabpanel" id="vpanel-faq" aria-labelledby="vtab-faq" tabindex="0" class="hidden focus:outline-none">
        <p class="text-xs font-medium text-blue-600">Help</p>
        <h2 class="mt-1 text-xl font-bold text-gray-900">Frequently asked questions</h2>
        <p class="mt-3 text-sm leading-7 text-gray-600">Can I use DevSnips in commercial projects? Yes — all components are MIT licensed and free for commercial use.</p>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    var list = document.querySelector('[aria-label="Documentation sections"]');
    if (!list) return;
    var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
    var panels = tabs.map(function (t) { return document.getElementById(t.getAttribute('aria-controls')); });
    function activate(tab) {
      tabs.forEach(function (t) {
        var s = t === tab;
        t.setAttribute('aria-selected', s); t.tabIndex = s ? 0 : -1;
        t.classList.toggle('text-white', s); t.classList.toggle('bg-slate-900', s);
        t.classList.toggle('text-gray-700', !s); t.classList.toggle('hover:bg-gray-100', !s);
      });
      panels.forEach(function (p) { if (p) p.classList.add('hidden'); });
      var panel = document.getElementById(tab.getAttribute('aria-controls'));
      if (panel) panel.classList.remove('hidden');
    }
    tabs.forEach(function (tab, i) {
      tab.addEventListener('click', function () { activate(tab); });
      tab.addEventListener('keydown', function (e) {
        var idx = null;
        if (e.key === 'ArrowDown') idx = (i + 1) % tabs.length;
        if (e.key === 'ArrowUp') idx = (i - 1 + tabs.length) % tabs.length;
        if (e.key === 'Home') idx = 0;
        if (e.key === 'End') idx = tabs.length - 1;
        if (idx !== null) { e.preventDefault(); tabs[idx].focus(); activate(tabs[idx]); }
      });
    });
  })();
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# Vertical Tabs

Vertical tab list layout.

## Usage
```bash
npx devsnips add Tailwind/Components/Tabs/vertical-tabs
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`