diff --git a/package.json b/package.json
index fef3323..d1e1e00 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.18.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a14fb6c..dae5cad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,14 +10,16 @@ importers:
     dependencies:
       '@hookform/resolvers':
         specifier: ^3.9.0
-
-        version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
+        version: 3.9.0(react-hook-form@7.52.2(react@18.3.1))
       '@next-auth/prisma-adapter':
         specifier: ^1.0.7
-        version: 1.0.7(@prisma/client@5.16.1(prisma@5.16.1))(next-auth@4.24.7(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 1.0.7(@prisma/client@5.18.0(prisma@5.18.0))(next-auth@4.24.7(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
       '@prisma/client':
         specifier: ^5.18.0
         version: 5.18.0(prisma@5.18.0)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.1
         version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -519,6 +521,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.1.1':
+    resolution: {integrity: sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.0':
     resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
     peerDependencies:
@@ -2714,12 +2729,6 @@ snapshots:
 
   '@floating-ui/utils@0.2.7': {}
 
-  '@hapi/hoek@9.3.0': {}
-
-  '@hapi/topo@5.1.0':
-    dependencies:
-      '@hapi/hoek': 9.3.0
-
   '@hookform/resolvers@3.9.0(react-hook-form@7.52.2(react@18.3.1))':
     dependencies:
       react-hook-form: 7.52.2(react@18.3.1)
@@ -2762,9 +2771,9 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@next-auth/prisma-adapter@1.0.7(@prisma/client@5.16.1(prisma@5.16.1))(next-auth@4.24.7(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
+  '@next-auth/prisma-adapter@1.0.7(@prisma/client@5.18.0(prisma@5.18.0))(next-auth@4.24.7(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1))':
     dependencies:
-      '@prisma/client': 5.16.1(prisma@5.16.1)
+      '@prisma/client': 5.18.0(prisma@5.18.0)
       next-auth: 4.24.7(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
   '@next/env@14.2.4': {}
@@ -2855,6 +2864,22 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-checkbox@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
diff --git a/src/app/(admin)/estoque/_components/products/productsCard.tsx b/src/app/(admin)/estoque/_components/products/productsCard.tsx
index 8a59e29..41b9eb9 100644
--- a/src/app/(admin)/estoque/_components/products/productsCard.tsx
+++ b/src/app/(admin)/estoque/_components/products/productsCard.tsx
@@ -1,4 +1,4 @@
-import { CldImage } from "@/components/app/cldImage";
+import CldImage from "@/components/app/cldImage";
 import { CardComponent } from "@/components/cardComponent";
 import { cn } from "@/lib/utils";
 import React from "react";
diff --git a/src/app/(admin)/historico/page.tsx b/src/app/(admin)/historico/page.tsx
index cf3c9a6..1d43f6d 100644
--- a/src/app/(admin)/historico/page.tsx
+++ b/src/app/(admin)/historico/page.tsx
@@ -1,5 +1,5 @@
 import { DataTable } from "@/app/_components/data-table";
-import { UsersAction, columns } from "./users-actions-columns";
+import { type UsersAction, columns } from "./users-actions-columns";
 
 async function getData(): Promise<UsersAction[]> {
   return [
diff --git a/src/app/(admin)/historico/users-actions-columns.tsx b/src/app/(admin)/historico/users-actions-columns.tsx
index 5f6bd7a..b826895 100644
--- a/src/app/(admin)/historico/users-actions-columns.tsx
+++ b/src/app/(admin)/historico/users-actions-columns.tsx
@@ -1,6 +1,5 @@
 "use client";
-
-import { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
diff --git a/src/app/_components/data-table-pagination.tsx b/src/app/_components/data-table-pagination.tsx
index 3bf0928..453d866 100644
--- a/src/app/_components/data-table-pagination.tsx
+++ b/src/app/_components/data-table-pagination.tsx
@@ -4,7 +4,7 @@ import {
   DoubleArrowLeftIcon,
   DoubleArrowRightIcon,
 } from "@radix-ui/react-icons";
-import { Table } from "@tanstack/react-table";
+import type { Table } from "@tanstack/react-table";
 
 import { Button } from "@/components//ui/button";
 import {
diff --git a/src/app/_components/data-table.tsx b/src/app/_components/data-table.tsx
index cb1ef3e..6983efa 100644
--- a/src/app/_components/data-table.tsx
+++ b/src/app/_components/data-table.tsx
@@ -31,7 +31,7 @@ import {
 } from "@/components/ui/table";
 import { DataTablePagination } from "./data-table-pagination";
 
-const columnTranslations = {
+const columnTranslations: Record<string, string> = {
   name: "Nome",
   action: "Ação",
   product: "Nome do Produto",
@@ -95,8 +95,9 @@ export function DataTable<TData, TValue>({
               .getAllColumns()
               .filter((column) => column.getCanHide())
               .map((column) => {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                 const translatedName =
-                  columnTranslations[column.id] || column.id;
+                  columnTranslations[column.id] ?? column.id;
                 return (
                   <DropdownMenuCheckboxItem
                     key={column.id}
diff --git a/src/app/_components/navBarEstoque.tsx b/src/app/_components/navBarEstoque.tsx
index bc4b686..47991ac 100644
--- a/src/app/_components/navBarEstoque.tsx
+++ b/src/app/_components/navBarEstoque.tsx
@@ -1,10 +1,7 @@
-"use client"
-import { SetStateAction, useState } from "react";
+"use client";
+import { type SetStateAction, useState } from "react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Filtro } from "./filtro";
-import { Input } from "@/components/ui/input";
-import { Search } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { SearchBar } from "./searchBar";
 import { BtnRegister } from "./btnRegister";
 
@@ -42,9 +39,9 @@ export function NavBarEstoque() {
           </TabsTrigger>
         </TabsList>
         <div className="flex">
-          <Filtro value={"ddd"} children={"ffff"} />
+          <Filtro value={"ddd"}>ffff</Filtro>
           <div className="mb-6 ml-7 flex w-full items-center justify-between">
-            <SearchBar placeholder={tabValue}/>
+            <SearchBar placeholder={tabValue} />
             <BtnRegister>{tabValue}</BtnRegister>
           </div>
         </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fea693e..067aaa3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,4 +6,4 @@ export default async function Home() {
       <NavBarEstoque />
     </main>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/formComponent/example.tsx b/src/components/formComponent/example.tsx
new file mode 100644
index 0000000..046fecb
--- /dev/null
+++ b/src/components/formComponent/example.tsx
@@ -0,0 +1,109 @@
+"use client";
+import { Form } from ".";
+import { useState } from "react";
+
+export const FormsExample = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [checked1, setChecked1] = useState(false);
+  const [checked2, setChecked2] = useState(false);
+
+  const onCancel = () => {
+    setName("");
+    setEmail("");
+    setPassword("");
+    setConfirmPassword("");
+    setChecked1(false);
+    setChecked2(false);
+  };
+
+  const onSave = (data: {
+    name: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    cheked1: string;
+    cheked2: string;
+  }) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Form
+        onCancel={onCancel}
+        onSave={onSave}
+        className="gap-[30px] px-[55px] pb-[40px] pt-[90px]"
+      >
+        <Form.Title>Criar Usuário</Form.Title>
+        <Form.Content>
+          <Form.Field>
+            <Form.Label>Digite o nome do funcionário</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="nome"
+              value={name}
+              setValue={setName}
+              type="text"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field>
+            <Form.Label>Digite o email de acesso</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="email"
+              value={email}
+              setValue={setEmail}
+              type="email"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field>
+            <Form.Label>Digite a senha</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="senha"
+              value={password}
+              setValue={setPassword}
+              type="password"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field>
+            <Form.Label>Confirme a senha</Form.Label>
+            <Form.Input
+              className="w-[400px]"
+              placeholder="senha"
+              value={confirmPassword}
+              setValue={setConfirmPassword}
+              type="password"
+            ></Form.Input>
+          </Form.Field>
+
+          <Form.Field className="gap-[18px] rounded-[5px] border-[2px] border-[#D9D9D9] px-[14px] pb-[20px] pt-[16px]">
+            <Form.Label className="text-[20px] font-semibold">
+              Este usuário vai poder:
+            </Form.Label>
+            <Form.BoxSelect checked={checked1} setChecked={setChecked1}>
+              Texto1
+            </Form.BoxSelect>
+
+            <Form.BoxSelect checked={checked2} setChecked={setChecked2}>
+              Texto2
+            </Form.BoxSelect>
+          </Form.Field>
+        </Form.Content>
+        <Form.Button
+          type="submit"
+          onClick={() => console.log("criar usuario")}
+          className="border-none bg-[#34A853]"
+        >
+          Criar Usuário
+        </Form.Button>
+      </Form>
+    </div>
+  );
+};
diff --git a/src/components/formComponent/example2.tsx b/src/components/formComponent/example2.tsx
new file mode 100644
index 0000000..390818a
--- /dev/null
+++ b/src/components/formComponent/example2.tsx
@@ -0,0 +1,121 @@
+"use client";
+import { Form } from ".";
+import { useState } from "react";
+
+export const FormsExample2 = () => {
+  const [supplier, setSupplier] = useState<string>("");
+  const [category, setCategory] = useState<string>("");
+  const [name, setName] = useState<string>("");
+  const [manufactureDate, setManufactureDate] = useState<string>("");
+  const [currentQuantity, setCurrentQuantity] = useState<string>("0");
+  const [idealQuantity, setIdealQuantity] = useState<string>("0");
+
+  const onCancel = () => {
+    setSupplier("");
+    setCategory("");
+    setName("");
+    setManufactureDate("");
+    setCurrentQuantity("");
+    setIdealQuantity("");
+  };
+
+  const onSave = (data: {
+    supplier: string;
+    category: string;
+    name: string;
+    manufactureDate: string;
+    currentQuantity: string;
+    idealQuantity: string;
+  }) => {
+    console.log(data);
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center ">
+      <Form
+        className="items-center justify-center gap-[12px] px-[40px] py-[20px]"
+        onCancel={onCancel}
+        onSave={onSave}
+      >
+        <Form.Image
+          onImageInput={(_image) => console.log("editou foto")}
+          publicId="cld-sample-5"
+        ></Form.Image>
+        <Form.Title>Nome do Produto - Código do Produto</Form.Title>
+        <Form.Content className="grid grid-flow-row grid-cols-2 items-center justify-around gap-[30px]">
+          <div className="flex w-full flex-col gap-[15px]">
+            <Form.Field>
+              <Form.Label>Fornecedor</Form.Label>
+              <Form.Input
+                placeholder="Selecionar..."
+                value={supplier}
+                setValue={setSupplier}
+              ></Form.Input>
+            </Form.Field>
+
+            <Form.Field>
+              <Form.Label>Nome</Form.Label>
+              <Form.Input
+                value={name}
+                setValue={setName}
+                type="text"
+              ></Form.Input>
+            </Form.Field>
+
+            <Form.Field>
+              <Form.Label>Data de Fabricação</Form.Label>
+              <Form.Input
+                value={manufactureDate}
+                setValue={(value) => setManufactureDate(value)}
+                type="date"
+              ></Form.Input>
+            </Form.Field>
+
+            <Form.Button
+              type="reset"
+              className="w-full border-none bg-[#EB4335]"
+            >
+              Cancelar
+            </Form.Button>
+          </div>
+
+          <div className="flex w-full flex-col gap-[15px]">
+            <Form.Field>
+              <Form.Label>Categoria:</Form.Label>
+              <Form.Input
+                placeholder="Selecionar..."
+                value={category}
+                setValue={setCategory}
+              ></Form.Input>
+            </Form.Field>
+
+            <Form.Field>
+              <Form.Label>Quantidade ideal:</Form.Label>
+              <Form.Input
+                value={idealQuantity}
+                setValue={setIdealQuantity}
+                type="number"
+              ></Form.Input>
+            </Form.Field>
+
+            <Form.Field>
+              <Form.Label>Situação:</Form.Label>
+              <Form.Input
+                value={currentQuantity}
+                setValue={setCurrentQuantity}
+                type="number"
+              ></Form.Input>
+            </Form.Field>
+
+            <Form.Button
+              type="submit"
+              className="w-full border-none bg-[#34A853]"
+            >
+              Salvar
+            </Form.Button>
+          </div>
+        </Form.Content>
+      </Form>
+    </div>
+  );
+};
diff --git a/src/components/formComponent/index.tsx b/src/components/formComponent/index.tsx
new file mode 100644
index 0000000..761f88b
--- /dev/null
+++ b/src/components/formComponent/index.tsx
@@ -0,0 +1,181 @@
+import { cn } from "@/lib/utils";
+import React, { type HTMLInputTypeAttribute } from "react";
+import { Checkbox } from "../ui/checkbox";
+import CldImage from "../app/cldImage";
+import type { CldImageProps } from "next-cloudinary";
+import { Edit } from "lucide-react";
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+type FormProps = {
+  className?: string;
+  children: React.ReactNode[];
+  onCancel: () => void;
+  onSave: (data: any) => void;
+};
+
+export const Form = (props: FormProps) => {
+  const style = cn(
+    "flex flex-col justify-around border-[#E0E0E0] border-[2px] rounded-[20px]",
+    props.className,
+  );
+  return (
+    <form onSubmit={props.onSave} onReset={props.onCancel} className={style}>
+      {props.children}
+    </form>
+  );
+};
+
+type FormTitleProps = {
+  className?: string;
+  children: string;
+};
+
+Form.Title = function FormTitle(props: FormTitleProps) {
+  const style = cn("font-inter font-semibold text-[24px]", props.className);
+  return <h1 className={style}>{props.children}</h1>;
+};
+
+type FormContentProps = {
+  className?: string;
+  children: React.ReactNode[];
+};
+
+Form.Content = function FormContent(props: FormContentProps) {
+  const style = cn("flex flex-col w-full gap-[15px]", props.className);
+  return <div className={style}>{props.children}</div>;
+};
+
+type FormFieldProps = {
+  className?: string;
+  children: React.ReactNode[];
+};
+
+Form.Field = function FormField(props: FormFieldProps) {
+  const style = cn(
+    "flex flex-col justify-start items-start w-full gap-[10px] ",
+    props.className,
+  );
+  return <div className={style}>{props.children}</div>;
+};
+
+type FormLabelProps = {
+  className?: string;
+  children: string;
+};
+
+Form.Label = function FormLabel(props: FormLabelProps) {
+  const style = cn(
+    "justify-start font-inter font-regular text-[16px]",
+    props.className,
+  );
+  return <p className={style}>{props.children}</p>;
+};
+
+type FormInputProps = {
+  className?: string;
+  placeholder?: string;
+  value: string;
+  setValue: (value: string) => void;
+  type?: HTMLInputTypeAttribute;
+};
+
+Form.Input = function FormInput(props: FormInputProps) {
+  const style = cn(
+    "w-full px-[10px] py-[3px] rounded-[8px] border-[2px] border-[#E0E0E0] font-inter font-medium text-[20px] placeholder-text-[#828282]",
+    props.className,
+  );
+  return (
+    <input
+      placeholder={props.placeholder}
+      value={props.value}
+      onChange={(event) => props.setValue(event.target.value)}
+      type={props.type}
+      className={style}
+    />
+  );
+};
+
+type FormBoxSelectProps = {
+  className?: string;
+  children: string;
+  checked: boolean;
+  setChecked: (value: boolean) => void;
+};
+
+Form.BoxSelect = function FormBoxSelect(props: FormBoxSelectProps) {
+  const style = cn(
+    "font-inter font-regular text-[15px] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+    props.className,
+  );
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox
+        className="size-[20px] rounded-none border-[3px] border-[#000000]"
+        id={props.children}
+        checked={props.checked}
+        onCheckedChange={(checked) => {
+          if (typeof checked === "boolean") props.setChecked(checked);
+        }}
+      />
+      <label htmlFor={props.children} className={style}>
+        {props.children}
+      </label>
+    </div>
+  );
+};
+
+type FormButtonProps = {
+  className?: string;
+  children: string;
+  onClick?: (data: any) => void;
+  type?: "button" | "submit" | "reset" | undefined;
+};
+
+Form.Button = function FormButton(props: FormButtonProps) {
+  const style = cn(
+    "rounded-[8px] border-[2px] border-[#D9D9D9] py-[10px] items-center justify-center font-inter font-medium text-[16px] text-white bg-primary",
+    props.className,
+  );
+  return (
+    <button className={style} onClick={props.onClick} type={props.type}>
+      {props.children}
+    </button>
+  );
+};
+
+type FormImageProps = {
+  className?: string;
+  publicId: string;
+  onImageInput: (image: any) => void;
+  imageProps?: CldImageProps;
+};
+
+Form.Image = function FormImage(props: FormImageProps) {
+  const style = cn(
+    "w-fit h-fit rounded-[8px] border-[2px] border-[#D9D9D9] flex items-start justify-center relative",
+    props.className,
+  );
+  return (
+    <div className={style}>
+      <label className="absolute top-[10px] flex cursor-pointer items-center justify-center gap-[4px] rounded-[8px] bg-[#EEEEEE] p-[10px]">
+        <Edit size={19}></Edit>
+        <p className="font-inter text-[16px] font-medium">Editar Foto</p>
+        <input
+          type="file"
+          className="hidden"
+          onInput={(file) => props.onImageInput(file)}
+        ></input>
+      </label>
+
+      <CldImage
+        src={props.publicId}
+        alt="image"
+        crop={"auto"}
+        width={400}
+        height={400}
+        radius={8}
+        {...props.imageProps}
+      />
+    </div>
+  );
+};
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }