diff --git a/storybook/src/stories/Components.stories.tsx b/storybook/src/stories/Components.stories.tsx
new file mode 100644
index 000000000..e7c461f11
--- /dev/null
+++ b/storybook/src/stories/Components.stories.tsx
@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import * as Components from '../components/registry'
+
+/**
+ * Component Registry showcases all available components
+ * that can be used in Lua packages.
+ */
+const meta: Meta = {
+ title: 'Components/Registry',
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj
+
+/**
+ * Box is the basic building block for layouts
+ */
+export const Box: Story = {
+ render: () => (
+
+ Box content
+
+ ),
+}
+
+/**
+ * Stack arranges children vertically
+ */
+export const Stack: Story = {
+ render: () => (
+
+ Item 1
+ Item 2
+ Item 3
+
+ ),
+}
+
+/**
+ * Flex arranges children horizontally
+ */
+export const Flex: Story = {
+ render: () => (
+
+ Item 1
+ Item 2
+ Item 3
+
+ ),
+}
+
+/**
+ * Grid creates a responsive grid layout
+ */
+export const Grid: Story = {
+ render: () => (
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+ ),
+}
+
+/**
+ * Card with header, content, and actions
+ */
+export const Card: Story = {
+ render: () => (
+
+
+ Card Title
+
+
+
+ This is the card content. Cards are used to group related information.
+
+
+
+ Cancel
+ Submit
+
+
+ ),
+}
+
+/**
+ * Typography variants for text styling
+ */
+export const Typography: Story = {
+ render: () => (
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+ Body 1 - Regular paragraph text
+ Body 2 - Smaller paragraph text
+ Caption - Small helper text
+ Overline - Category labels
+
+ ),
+}
+
+/**
+ * Button variants and sizes
+ */
+export const Buttons: Story = {
+ render: () => (
+
+
+ Contained
+ Outlined
+ Text
+
+
+ Small
+ Medium
+ Large
+
+
+ ),
+}
+
+/**
+ * Icons with different sizes
+ */
+export const Icons: Story = {
+ render: () => (
+
+
+
+ Small
+
+
+
+ Medium
+
+
+
+ Large
+
+
+ ),
+}
+
+/**
+ * Alert severity levels
+ */
+export const Alerts: Story = {
+ render: () => (
+
+ Info alert message
+ Success alert message
+ Warning alert message
+ Error alert message
+
+ ),
+}
+
+/**
+ * Badge and Chip components
+ */
+export const BadgesAndChips: Story = {
+ render: () => (
+
+ Default
+
+
+
+ ),
+}
+
+/**
+ * App layout components
+ */
+export const AppLayout: Story = {
+ render: () => (
+
+
+
+
+
+
+ ),
+}
+
+/**
+ * Tabs component
+ */
+export const TabsComponent: Story = {
+ render: () => (
+ First tab content },
+ { value: 'tab2', label: 'Second Tab', content: Second tab content },
+ { value: 'tab3', label: 'Third Tab', content: Third tab content },
+ ]}
+ />
+ ),
+}