diff --git a/packages/ui-form/package.json b/packages/ui-form/package.json
new file mode 100644
index 0000000..8072a5a
--- /dev/null
+++ b/packages/ui-form/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@halvaradop/ui-form",
+  "version": "0.1.0",
+  "private": false,
+  "description": "A customizable form component for @halvaradop/ui library with Tailwind CSS styling.",
+  "type": "module",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/halvaradop/ui.git"
+  },
+  "keywords": [
+    "button",
+    "react",
+    "component",
+    "tailwindcss",
+    "react",
+    "ui",
+    "library"
+  ],
+  "author": "Hernan Alvarado <hernanvid123@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/halvaradop/ui/issues"
+  },
+  "homepage": "https://github.com/halvaradop/ui#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "devDependencies": {
+    "@halvaradop/ui-core": "workspace:*"
+  }
+}
diff --git a/packages/ui-form/src/form.stories.tsx b/packages/ui-form/src/form.stories.tsx
new file mode 100644
index 0000000..fbe4aba
--- /dev/null
+++ b/packages/ui-form/src/form.stories.tsx
@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Form } from "./index.js"
+import { Input } from "../../ui-input/src/index.js"
+
+const meta: Meta = {
+	title: "ui-form",
+	tags: ["autodocs"],
+	component: Form,
+	parameters: {
+		layout: "centered",
+	},
+} satisfies Meta<typeof Form>
+
+type Story = StoryObj<typeof meta>
+
+export const Base: Story = {
+	render: () => (
+		<Form>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Outline: Story = {
+	args: {
+		variant: "outline",
+	},
+	render: ({ variant }) => (
+		<Form variant={variant}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Filled: Story = {
+	args: {
+		variant: "filled",
+	},
+	render: ({ variant }) => (
+		<Form variant={variant}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Small: Story = {
+	args: {
+		size: "sm",
+		variant: "outline",
+	},
+	render: ({ variant, size }) => (
+		<Form variant={variant} size={size}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Medium: Story = {
+	args: {
+		size: "md",
+		variant: "outline",
+	},
+	render: ({ variant, size }) => (
+		<Form variant={variant} size={size}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export const Large: Story = {
+	args: {
+		size: "lg",
+		variant: "outline",
+	},
+	render: ({ variant, size }) => (
+		<Form variant={variant} size={size}>
+			<Input />
+			<Input />
+		</Form>
+	),
+}
+
+export default meta
diff --git a/packages/ui-form/src/index.tsx b/packages/ui-form/src/index.tsx
new file mode 100644
index 0000000..b2290f5
--- /dev/null
+++ b/packages/ui-form/src/index.tsx
@@ -0,0 +1,33 @@
+import { ComponentProps, forwardRef } from "react"
+import type { ArgsFunction } from "@halvaradop/ts-utility-types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+export type FormProps<T extends ArgsFunction> = VariantProps<T> & ComponentProps<"form">
+
+export const formVariants = cva("mx-auto flex items-center flex-col relative", {
+	variants: {
+		variant: {
+			base: "items-start",
+			outline: "border border-gray-300 shadow",
+			filled: "border border-gray-300 shadow-inner",
+		},
+		size: {
+			sm: "small w-11/12 max-w-sm pt-6 pb-4 px-3 gap-y-3 rounded-md",
+			base: "base w-11/12 max-w-md pt-10 pb-6 px-4 gap-y-4 rounded-xl",
+			md: "md w-11/12 max-w-lg pt-12 pb-8 px-5 gap-y-5 rounded-xl",
+			lg: "lg w-11/12 max-w-xl pt-14 pb-10 px-6 gap-y-6 rounded-2xl",
+		},
+	},
+	defaultVariants: {
+		variant: "base",
+		size: "base",
+	},
+})
+
+export const Form = forwardRef<HTMLFormElement, FormProps<typeof formVariants>>(({ className, variant, size, children, ...props }, ref) => {
+	return (
+		<form className={formVariants({ className, variant, size })} ref={ref} {...props}>
+			{children}
+		</form>
+	)
+})
diff --git a/packages/ui-form/tsconfig.json b/packages/ui-form/tsconfig.json
new file mode 100644
index 0000000..4738e10
--- /dev/null
+++ b/packages/ui-form/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@halvaradop/ui-core/tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/ui-form/tsup.config.ts b/packages/ui-form/tsup.config.ts
new file mode 100644
index 0000000..75ee2d2
--- /dev/null
+++ b/packages/ui-form/tsup.config.ts
@@ -0,0 +1,4 @@
+import { defineConfig } from "tsup"
+import { tsupConfig } from "@halvaradop/ui-core/tsup.config.base"
+
+export default defineConfig(tsupConfig)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c8a52c..66985a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,6 +102,12 @@ importers:
         specifier: ^2.5.2
         version: 2.5.3
 
+  packages/ui-form:
+    devDependencies:
+      '@halvaradop/ui-core':
+        specifier: workspace:*
+        version: link:../ui-core
+
   packages/ui-input:
     devDependencies:
       '@halvaradop/ui-core':