diff --git a/src/ui/chip/chip.stories.tsx b/src/ui/chip/chip.stories.tsx
new file mode 100644
index 0000000..034e010
--- /dev/null
+++ b/src/ui/chip/chip.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Chip } from './chip.tsx';
+
+const meta: Meta = {
+  title: 'ui/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    state: {
+      options: ['default', 'active', 'tag'],
+      control: {
+        type: 'radio',
+      },
+    },
+    shape: {
+      options: ['pill', 'rect'],
+      control: {
+        type: 'radio',
+      },
+    },
+    color: {
+      options: ['default', 'grey', 'blue'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Chip (default, pill, default)',
+    state: 'default',
+    shape: 'pill',
+    color: 'default',
+  },
+  render: (args) => <Chip {...args}>chip</Chip>,
+};
+
+export const Second: Story = {
+  args: {
+    label: 'Chip (active, pill, default)',
+    state: 'active',
+    shape: 'pill',
+    color: 'default',
+  },
+  render: (args) => <Chip {...args}>chip</Chip>,
+};
+
+export const Third: Story = {
+  args: {
+    label: 'Chip (default, pill, default)',
+    state: 'default',
+    shape: 'rect',
+    color: 'default',
+  },
+  render: (args) => <Chip {...args}>chip</Chip>,
+};
+
+export const Fourth: Story = {
+  args: {
+    label: 'Chip (default, pill, default)',
+    state: 'active',
+    shape: 'rect',
+    color: 'default',
+  },
+  render: (args) => <Chip {...args}>chip</Chip>,
+};
+
+export const Fifth: Story = {
+  args: {
+    label: 'Chip (default, pill, default)',
+    state: 'tag',
+    shape: 'pill',
+    color: 'grey',
+  },
+  render: (args) => <Chip {...args}>chip</Chip>,
+};
+
+export const Sixth: Story = {
+  args: {
+    label: 'Chip (default, pill, default)',
+    state: 'tag',
+    shape: 'pill',
+    color: 'blue',
+  },
+  render: (args) => <Chip {...args}>chip</Chip>,
+};