Initial storybook components.

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import { withRouter } from 'storybook-addon-remix-react-router';
 import type { Preview } from '@storybook/react-vite'
+import '../app/app.css'
 
 const preview: Preview = {
   decorators: [withRouter], // This wraps all stories in a Router context

app/components/ui/button.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "./button";
+
+const meta: Meta<typeof Button> = {
+  title: "UI/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "outline", "secondary", "ghost", "link"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon", "icon-sm", "icon-lg"],
+    },
+    disabled: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    children: "Delete",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: "link",
+    children: "Link",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled",
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Button variant="default">Default</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button size="sm">Small</Button>
+      <Button size="default">Default</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  ),
+};

app/components/ui/checkbox.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Checkbox } from "./checkbox";
+import { Label } from "./label";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "UI/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  argTypes: {
+    checked: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    disabled: true,
+    defaultChecked: true,
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="with-label" {...args} />
+      <Label htmlFor="with-label">Accept terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const WithLabelDisabled: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="with-label-disabled" disabled />
+      <Label htmlFor="with-label-disabled" className="opacity-50">
+        Accept terms and conditions
+      </Label>
+    </div>
+  ),
+};