diff --git a/packages/storybook/src/tailwind-ui/Switch.stories.tsx b/packages/storybook/src/tailwind-ui/Switch.stories.tsx
new file mode 100644
index 000000000..68b3d6e9c
--- /dev/null
+++ b/packages/storybook/src/tailwind-ui/Switch.stories.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import Switch from '../../../tailwind-ui/src/components/Switch';
+
+export default {
+  title: 'Components/TailwindUI/Switch',
+  component: Switch
+};
+
+export const Default = () => {
+  const [value, setValue] = useState(false);
+
+  return (
+    <Switch
+      label='Enable 1337 mode.'
+      onChange={setValue}
+      value={value}
+    />
+  );
+};
+
+export const WithDescription = () => {
+  const [value, setValue] = useState(false);
+
+  return (
+    <Switch
+      description='1337 mode is a super cool alternate version of Fair Data!'
+      label='Enable 1337 mode.'
+      onChange={setValue}
+      value={value}
+    />
+  );
+};
+
+export const RightAligned = () => {
+  const [value, setValue] = useState(false);
+
+  return (
+    <Switch
+      description='1337 mode is a super cool alternate version of Fair Data!'
+      label='Enable 1337 mode.'
+      onChange={setValue}
+      side='right'
+      value={value}
+    />
+  );
+};
+
+export const CustomStyles = () => {
+  const [value, setValue] = useState(false);
+
+  return (
+    <Switch
+      classes={{
+        root: 'text-gray-200! bg-green-950! h-10',
+        label: 'font-mono!',
+        switch: 'data-checked:bg-green-400!'
+      }}
+      label='Enable 1337 mode.'
+      onChange={setValue}
+      value={value}
+    />
+  );
+};
\ No newline at end of file
diff --git a/packages/tailwind-ui/src/components/Switch.tsx b/packages/tailwind-ui/src/components/Switch.tsx
new file mode 100644
index 000000000..8809e6c85
--- /dev/null
+++ b/packages/tailwind-ui/src/components/Switch.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Field, Label, Switch as HeadlessSwitch, Description } from '@headlessui/react';
+
+interface Props {
+  classes?: {
+    description?: string,
+    label?: string,
+    root?: string,
+    switch?: string,
+  }
+  description?: string
+  onChange: (arg: boolean) => any
+  label: string
+  side?: 'left' | 'right'
+  value: boolean
+}
+
+const Switch: React.FC<Props> = (props) => {
+  const side = props.side || 'left';
+
+  return (
+    <Field className={clsx(
+      'flex items-center gap-6 text-sm font-sans px-2',
+      props.classes?.root
+    )}>
+      {side === 'right' && (
+        <SwitchText {...props} />
+      )}
+      <HeadlessSwitch
+        className={clsx(
+          'shrink-0 group inline-flex h-5 w-8 items-center rounded-full bg-gray-200 transition data-checked:bg-primary outline-2 outline-offset-2 outline-transparent focus:outline-primary',
+          props.classes?.switch
+        )}
+        checked={props.value}
+        onChange={props.onChange}
+      >
+        <span className='size-3.5 translate-x-1 rounded-full bg-white transition group-data-checked:translate-x-4' />
+      </HeadlessSwitch>
+      {side === 'left' && (
+        <SwitchText {...props} />
+      )}
+    </Field>
+  );
+};
+
+const SwitchText = (props: Props) => (
+  <div>
+    <Label
+      className={clsx(
+        'font-medium',
+        props.classes?.label
+      )}
+    >
+      {props.label}
+    </Label>
+    {props.description && (
+      <Description
+        className={clsx(
+          'text-zinc-500',
+          props.classes?.description
+        )}
+      >
+        {props.description}
+      </Description>
+    )}
+  </div>
+);
+
+export default Switch;
diff --git a/packages/tailwind-ui/src/index.ts b/packages/tailwind-ui/src/index.ts
index 555c90da9..a7415c288 100644
--- a/packages/tailwind-ui/src/index.ts
+++ b/packages/tailwind-ui/src/index.ts
@@ -4,3 +4,4 @@ export { default as Dropdown } from './components/Dropdown';
 export { default as Input } from './components/Input';
 export { default as Listbox } from './components/Listbox';
 export { default as Navbar } from './components/Navbar';
+export { default as Switch } from './components/Switch';