Tabs component

CHANGELOG.md

@@ -7,11 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - React]
 
-- Nothing yet!
+### Added
+
+- Add new `Tabs` component ([#674](https://github.com/tailwindlabs/headlessui/pull/674))
 
 ## [Unreleased - Vue]
 
-- Nothing yet!
+### Added
+
+- Add new `Tabs` component ([#674](https://github.com/tailwindlabs/headlessui/pull/674))
 
 ## [@headlessui/[email protected]] - 2021-06-21
 

packages/@headlessui-react/pages/tabs/tabs-with-pure-tailwind.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import { Tabs, Switch } from '@headlessui/react'
+
+import { classNames } from '../../src/utils/class-names'
+
+export default function Home() {
+  let tabs = [
+    { name: 'My Account', content: 'Tab content for my account' },
+    { name: 'Company', content: 'Tab content for company', disabled: true },
+    { name: 'Team Members', content: 'Tab content for team members' },
+    { name: 'Billing', content: 'Tab content for billing' },
+  ]
+
+  let [manual, setManual] = useState(true)
+
+  return (
+    <div className="flex flex-col items-start w-screen h-full p-12 bg-gray-50 space-y-12">
+      <Switch.Group as="div" className="flex items-center space-x-4">
+        <Switch.Label>Manual keyboard activation</Switch.Label>
+
+        <Switch
+          as="button"
+          checked={manual}
+          onChange={setManual}
+          className={({ checked }) =>
+            classNames(
+              'relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200',
+              checked ? 'bg-indigo-600' : 'bg-gray-200'
+            )
+          }
+        >
+          {({ checked }) => (
+            <span
+              className={classNames(
+                'inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200',
+                checked ? 'translate-x-5' : 'translate-x-0'
+              )}
+            />
+          )}
+        </Switch>
+      </Switch.Group>
+
+      <Tabs className="flex flex-col max-w-3xl w-full" as="div">
+        <Tabs.List
+          className="relative z-0 rounded-lg shadow flex divide-x divide-gray-200"
+          lazy={manual}
+        >
+          {tabs.map((tab, tabIdx) => (
+            <Tabs.Tab
+              key={tab.name}
+              disabled={tab.disabled}
+              className={({ selected }) =>
+                classNames(
+                  selected ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700',
+                  tabIdx === 0 ? 'rounded-l-lg' : '',
+                  tabIdx === tabs.length - 1 ? 'rounded-r-lg' : '',
+                  tab.disabled && 'opacity-50',
+                  'group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10'
+                )
+              }
+            >
+              {({ selected }) => (
+                <>
+                  <span>{tab.name}</span>
+                  {tab.disabled && <small className="inline-block px-4 text-xs">(disabled)</small>}
+                  <span
+                    aria-hidden="true"
+                    className={classNames(
+                      selected ? 'bg-indigo-500' : 'bg-transparent',
+                      'absolute inset-x-0 bottom-0 h-0.5'
+                    )}
+                  />
+                </>
+              )}
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+
+        <Tabs.Panels className="mt-4">
+          {tabs.map(tab => (
+            <Tabs.Panel className="bg-white rounded-lg p-4 shadow" key={tab.name}>
+              {tab.content}
+            </Tabs.Panel>
+          ))}
+        </Tabs.Panels>
+      </Tabs>
+    </div>
+  )
+}