diff --git a/.storybook/main.ts b/.storybook/main.ts
index 1713da185..c1f62222e 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,8 +11,8 @@ const config: StorybookConfig = {
       titlePrefix: "Components",
     },
     {
-      directory: "../lib/primitives",
-      titlePrefix: "Primitives",
+      directory: "../src/examples",
+      titlePrefix: "Examples",
     },
   ],
   staticDirs: ["../public"],
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 907965e1f..de9941b94 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,7 +9,7 @@
   },
   "tailwindCSS.experimental.classRegex": [
     [
-      "cva\\(([^)]*)\\)",
+      "cva\\(\\s*\"[^\"]*\"\\s*,\\s*({(?:[^{}]|\\{(?:[^{}]|\\{[^{}]*\\})*\\})*})\\s*\\)",
       "[\"'`]([^\"'`]*).*?[\"'`]"
     ],
   ]
diff --git a/lib/components/Forms/Input/index.stories.tsx b/lib/components/Forms/Input/index.stories.tsx
index 20425bac2..df2048fcd 100644
--- a/lib/components/Forms/Input/index.stories.tsx
+++ b/lib/components/Forms/Input/index.stories.tsx
@@ -16,7 +16,6 @@ const meta = {
   argTypes: {
     type: {
       control: { type: "radio" },
-      options: ["text", "email", "password", "number", "file"],
     },
     value: {
       control: { type: "text" },
@@ -32,3 +31,27 @@ export const Primary: Story = {
     placeholder: "Placeholder text here",
   },
 }
+
+export const File: Story = {
+  args: {
+    type: "file",
+    disabled: false,
+    placeholder: "Placeholder text here",
+  },
+}
+
+export const Password: Story = {
+  args: {
+    type: "password",
+    disabled: false,
+    placeholder: "Placeholder text here",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    type: "text",
+    disabled: true,
+    placeholder: "Placeholder text here",
+  },
+}
diff --git a/lib/components/Layout/index.tsx b/lib/components/Layout/index.tsx
index ca947f630..8133f40d7 100644
--- a/lib/components/Layout/index.tsx
+++ b/lib/components/Layout/index.tsx
@@ -1 +1,2 @@
+export * from "./Grid"
 export * from "./Stack"
diff --git a/lib/components/Navigation/Tabs/index.stories.tsx b/lib/components/Navigation/Tabs/index.stories.tsx
new file mode 100644
index 000000000..80d7582e8
--- /dev/null
+++ b/lib/components/Navigation/Tabs/index.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "."
+
+const meta = {
+  component: Tabs,
+  tags: ["autodocs"],
+  args: {
+    children: (
+      <>
+        <TabsList>
+          <TabsTrigger value="one">One</TabsTrigger>
+          <TabsTrigger value="two">Two</TabsTrigger>
+        </TabsList>
+        <TabsContent value="one">Content of section one</TabsContent>
+        <TabsContent value="two">Content of section two</TabsContent>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultValue: "one",
+  },
+}
diff --git a/lib/components/Navigation/Tabs/index.tsx b/lib/components/Navigation/Tabs/index.tsx
new file mode 100644
index 000000000..fb81dfcbe
--- /dev/null
+++ b/lib/components/Navigation/Tabs/index.tsx
@@ -0,0 +1 @@
+export * from "@/shadcn/tabs"
diff --git a/lib/components/Navigation/index.tsx b/lib/components/Navigation/index.tsx
new file mode 100644
index 000000000..592637ba8
--- /dev/null
+++ b/lib/components/Navigation/index.tsx
@@ -0,0 +1 @@
+export * from "./Tabs"
diff --git a/lib/components/index.ts b/lib/components/index.ts
index e48323667..75104aef1 100644
--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@@ -3,4 +3,5 @@ export * from "./Blocks"
 export * from "./Forms"
 export * from "./Information"
 export * from "./Layout"
+export * from "./Navigation"
 export * from "./Overlays"
diff --git a/lib/lib/one-provider.tsx b/lib/lib/one-provider.tsx
index bd95a930c..e49e39e10 100644
--- a/lib/lib/one-provider.tsx
+++ b/lib/lib/one-provider.tsx
@@ -4,7 +4,7 @@ export const FactorialOneProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   useLayoutEffect(() => {
-    const classNames = "font-sans bg-background".split(" ")
+    const classNames = "font-sans text-foreground bg-background".split(" ")
 
     document.body.classList.add(...classNames)
 
diff --git a/lib/main.ts b/lib/main.ts
index 373877d56..592be3a2f 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -1 +1,2 @@
 export * from "./components"
+export { FactorialOneProvider } from "./lib/one-provider"
diff --git a/lib/shadcn/tabs.tsx b/lib/shadcn/tabs.tsx
new file mode 100644
index 000000000..56dee79c9
--- /dev/null
+++ b/lib/shadcn/tabs.tsx
@@ -0,0 +1,53 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }
diff --git a/package-lock.json b/package-lock.json
index 5bc5318f7..8023fd083 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@tailwindcss/container-queries": "^0.1.1",
         "class-variance-authority": "^0.7.0",
@@ -4681,6 +4682,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
+      "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
diff --git a/package.json b/package.json
index 4341af357..477f7f340 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",
diff --git a/src/examples/layout/application.tsx b/src/examples/layout/application.tsx
index 2f52d1321..a2b3e4cec 100644
--- a/src/examples/layout/application.tsx
+++ b/src/examples/layout/application.tsx
@@ -19,6 +19,7 @@ import {
 } from "lucide-react"
 import React from "react"
 
+import { Card, CardContent, CardHeader, CardTitle, Grid } from "@/components"
 import { Button } from "@/shadcn/button"
 import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/popover"
 import { ScrollArea } from "@/shadcn/scrollarea"
@@ -149,14 +150,22 @@ const Layout: React.FC = () => {
               </span>
             </div>
           </div>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3">
+          <Grid size={"lg"}>
             {[...Array(6)].map((_, i) => (
-              <div className="flex flex-col rounded-lg border p-4 font-medium transition-colors hover:cursor-pointer hover:bg-muted/50">
-                <Folder size="16" className="mb-1 text-secondary-foreground" />
-                Folder {++i}
-              </div>
+              <Card>
+                <CardHeader>
+                  <Folder
+                    size="16"
+                    className="mb-1 text-secondary-foreground"
+                  />
+                  <CardTitle>Folder {i + 1}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  Summary of the contents of the folder.
+                </CardContent>
+              </Card>
             ))}
-          </div>
+          </Grid>
         </div>
       </ScrollArea>
     </div>