From d331c56e814d80aa92b216ac0512b3e5f2c71472 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Thu, 16 Oct 2025 11:49:31 +0700
Subject: [PATCH 1/4] fix: `shadcn` component directory structure

- move `shadcn` components to `v2` folder and export the directory
- flatten `primary` button variant
- fix: `aria-menu` background
- rename back the deprecated react-aria components by removing the leading `Aria[component-name]` keyword
---
 .../erp/genseki/auth/setup/setup.client.tsx   |  10 +-
 .../erp/genseki/collections/posts.client.tsx  |   2 +-
 .../ui-playground/src/app/playground/page.tsx | 473 +++++++++---------
 .../app/playground/shadcn/button-section.tsx  |   9 +-
 .../playground/shadcn/combobox-section.tsx    |   4 +-
 .../app/playground/shadcn/input-section.tsx   |   4 +-
 .../app/playground/shadcn/link-section.tsx    |   3 +-
 packages/react/package.json                   |   9 +
 .../_components/input-email-section.tsx       |  10 +-
 .../views/login/login.client.tsx              |  12 +-
 .../reset-password/reset-password.client.tsx  |   6 +-
 .../components/compound/auto-field/index.tsx  |  68 ++-
 .../components/compound/collection-card.tsx   |   6 +-
 .../collection-sidebar/nav/app-topbar-nav.tsx |   4 +-
 .../editor/components/redo-undo-buttons.tsx   |  10 +-
 .../editor/components/upload-image-button.tsx |   6 +-
 .../components/compound/file-upload-field.tsx |  54 +-
 .../compound/reorder-group/index.tsx          |   6 +-
 .../components/compound/submit-button.tsx     |   2 +-
 .../components/primitives/breadcrumbs.tsx     |   4 +-
 .../components/primitives/button-group.tsx    |  99 +---
 .../react/components/primitives/button.tsx    | 102 +---
 .../react/components/primitives/calendar.tsx  |  10 +-
 .../components/primitives/color-picker.tsx    |  22 +-
 .../react/components/primitives/combobox.tsx  | 358 ++-----------
 .../components/primitives/date-picker.tsx     |  16 +-
 .../react/components/primitives/dialog.tsx    | 235 ++-------
 .../src/react/components/primitives/form.tsx  |   9 +-
 .../src/react/components/primitives/index.ts  |   3 +-
 .../src/react/components/primitives/link.tsx  |  26 +-
 .../src/react/components/primitives/menu.tsx  |   8 +-
 .../src/react/components/primitives/modal.tsx |  72 +--
 .../components/primitives/multiple-select.tsx |   6 +-
 .../react/components/primitives/popover.tsx   | 138 ++---
 .../react/components/primitives/select.tsx    |   8 +-
 .../react/components/primitives/separator.tsx |  43 +-
 .../src/react/components/primitives/sheet.tsx | 233 ++-------
 .../react/components/primitives/sidebar.tsx   |  20 +-
 .../react/components/primitives/text-area.tsx |  10 +-
 .../components/primitives/text-field.tsx      |  60 +--
 .../react/components/primitives/toolbar.tsx   |   4 +-
 packages/react/src/react/pages/401.tsx        |   6 +-
 packages/react/src/react/pages/403.tsx        |   6 +-
 packages/react/src/react/pages/404.tsx        |   6 +-
 .../views/collections/list/toolbar/create.tsx |   2 +-
 .../views/collections/list/toolbar/delete.tsx |  19 +-
 .../views/collections/list/toolbar/filter.tsx |   2 +-
 .../views/collections/list/toolbar/index.tsx  |   3 +-
 .../views/collections/list/toolbar/search.tsx |   3 +-
 packages/react/tsconfig.json                  |   2 +-
 .../v2/components/primitives/button-group.tsx |  81 +++
 .../react/v2/components/primitives/button.tsx |  72 +++
 .../v2/components/primitives/combobox.tsx     | 294 +++++++++++
 .../components/primitives/command.tsx         |   2 +-
 .../react/v2/components/primitives/dialog.tsx | 127 +++++
 .../react/v2/components/primitives/index.ts   |  12 +
 .../components/primitives/input-group.tsx     |   4 +-
 .../react/v2/components/primitives/input.tsx  |  28 ++
 .../components/primitives/label.tsx           |   2 +-
 .../react/v2/components/primitives/link.tsx   |  19 +
 .../v2/components/primitives/popover.tsx      |  45 ++
 .../v2/components/primitives/separator.tsx    |  32 ++
 .../react/v2/components/primitives/sheet.tsx  | 124 +++++
 packages/react/v2/index.ts                    |   1 +
 64 files changed, 1522 insertions(+), 1554 deletions(-)
 create mode 100644 packages/react/v2/components/primitives/button-group.tsx
 create mode 100644 packages/react/v2/components/primitives/button.tsx
 create mode 100644 packages/react/v2/components/primitives/combobox.tsx
 rename packages/react/{src/react => v2}/components/primitives/command.tsx (98%)
 create mode 100644 packages/react/v2/components/primitives/dialog.tsx
 create mode 100644 packages/react/v2/components/primitives/index.ts
 rename packages/react/{src/react => v2}/components/primitives/input-group.tsx (98%)
 create mode 100644 packages/react/v2/components/primitives/input.tsx
 rename packages/react/{src/react => v2}/components/primitives/label.tsx (92%)
 create mode 100644 packages/react/v2/components/primitives/link.tsx
 create mode 100644 packages/react/v2/components/primitives/popover.tsx
 create mode 100644 packages/react/v2/components/primitives/separator.tsx
 create mode 100644 packages/react/v2/components/primitives/sheet.tsx
 create mode 100644 packages/react/v2/index.ts

diff --git a/examples/erp/genseki/auth/setup/setup.client.tsx b/examples/erp/genseki/auth/setup/setup.client.tsx
index fb5b78aa..6b6b9a23 100644
--- a/examples/erp/genseki/auth/setup/setup.client.tsx
+++ b/examples/erp/genseki/auth/setup/setup.client.tsx
@@ -7,13 +7,13 @@ import { useRouter } from 'next/navigation'
 import z from 'zod'
 
 import {
-  AriaTextField,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
   SubmitButton,
+  TextField,
   toast,
 } from '@genseki/react'
 
@@ -74,7 +74,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <AriaTextField
+                <TextField
                   {...field}
                   placeholder="full name..."
                   label="Full Name"
@@ -91,7 +91,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <AriaTextField
+                <TextField
                   {...field}
                   type="email"
                   placeholder="email..."
@@ -109,7 +109,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <AriaTextField
+                <TextField
                   {...field}
                   type="password"
                   placeholder="password..."
@@ -128,7 +128,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <AriaTextField
+                <TextField
                   {...field}
                   type="password"
                   placeholder="confirm password..."
diff --git a/examples/erp/genseki/collections/posts.client.tsx b/examples/erp/genseki/collections/posts.client.tsx
index 3e8b7283..2eed4836 100644
--- a/examples/erp/genseki/collections/posts.client.tsx
+++ b/examples/erp/genseki/collections/posts.client.tsx
@@ -18,7 +18,6 @@ import type { CollectionLayoutProps, InferCreateFields } from '@genseki/react'
 import {
   actionsColumn,
   BackColorExtension,
-  Button,
   CollectionListToolbar,
   createDeleteActionItem,
   createEditActionItem,
@@ -43,6 +42,7 @@ import {
   useNavigation,
   useTableStatesContext,
 } from '@genseki/react'
+import { Button } from '@genseki/react/v2'
 
 import { type fields } from './posts'
 
diff --git a/examples/ui-playground/src/app/playground/page.tsx b/examples/ui-playground/src/app/playground/page.tsx
index 699b0740..6718c229 100644
--- a/examples/ui-playground/src/app/playground/page.tsx
+++ b/examples/ui-playground/src/app/playground/page.tsx
@@ -24,35 +24,33 @@ import { useTheme } from 'next-themes'
 
 import {
   Annotation,
-  AriaButton,
-  AriaButtonGroup,
-  AriaButtonGroupItem,
-  AriaLink,
-  AriaModal,
-  AriaModalBody,
-  AriaModalClose,
-  AriaModalContent,
-  AriaModalDescription,
-  AriaModalFooter,
-  AriaModalHeader,
-  AriaModalTitle,
-  AriaModalTrigger,
-  AriaPopover,
-  AriaPopoverBody,
-  AriaPopoverClose,
-  AriaPopoverContent,
-  AriaPopoverDescription,
-  AriaPopoverFooter,
-  AriaPopoverHeader,
-  AriaPopoverTitle,
-  AriaTextarea,
-  AriaTextField,
   Avatar,
   Breadcrumbs,
   BreadcrumbsItem,
+  Button,
+  ButtonGroup,
+  ButtonGroupItem,
   Card,
+  Link,
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger,
   PageSizeSelect,
   Pagination,
+  Popover,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTitle,
   ProgressBar,
   Radio,
   RadioGroup,
@@ -70,6 +68,8 @@ import {
   Tag,
   TagGroup,
   TagList,
+  Textarea,
+  TextField,
   TimeField,
   ToggleGroup,
   Toolbar,
@@ -83,7 +83,6 @@ import { RichTextEditor } from '@genseki/react'
 import { BaseIcon } from '@genseki/react'
 import { Typography } from '@genseki/react'
 import { Badge } from '@genseki/react'
-import { Button } from '@genseki/react'
 import { Calendar } from '@genseki/react'
 import { Checkbox, CheckboxGroup } from '@genseki/react'
 import { ColorField } from '@genseki/react'
@@ -314,13 +313,13 @@ export default function UIPlayground() {
   return (
     <div className="bg-white pb-24 relative dark:bg-black">
       <div className="fixed top-6 right-6 z-50">
-        <AriaButton
+        <Button
           variant={'secondary'}
           size="md"
           onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
         >
           {theme === 'dark' ? 'Light' : 'Dark'}
-        </AriaButton>
+        </Button>
       </div>
       <Wrapper title="Theme playground">
         <PlaygroundCard title="Theme playground" categoryTitle="Theme playground">
@@ -466,10 +465,10 @@ export default function UIPlayground() {
             <Checkbox>Spell Check</Checkbox>
             <ToolbarGroup className="ml-auto">
               <Menu>
-                <AriaButton aria-label="Other options" variant="ghost" size="md">
+                <Button aria-label="Other options" variant="ghost" size="md">
                   Options
                   <BaseIcon icon={CaretDownIcon} size="md" weight="regular" />
-                </AriaButton>
+                </Button>
                 <MenuContent showArrow placement="bottom right">
                   <MenuItem>
                     <IconUndo />
@@ -675,86 +674,84 @@ export default function UIPlayground() {
       </Wrapper>
       <Wrapper title="Modal">
         <PlaygroundCard title="Dialog" categoryTitle="Modal">
-          <AriaModal>
-            <AriaModalTrigger size="md" variant="outline">
+          <Modal>
+            <ModalTrigger size="md" variant="outline">
               Confirm
-            </AriaModalTrigger>
-            <AriaModalContent
+            </ModalTrigger>
+            <ModalContent
               isBlurred
               role="alertdialog"
               classNames={{ content: 'w-fit min-w-[16rem]' }}
             >
-              <AriaModalHeader className="[&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-12">
-                <AriaModalTitle level={3}>Delete file</AriaModalTitle>
-                <AriaModalDescription>
+              <ModalHeader className="[&[data-slot=dialog-header]:has(+[data-slot=dialog-footer])]:pb-12">
+                <ModalTitle level={3}>Delete file</ModalTitle>
+                <ModalDescription>
                   This will permanently delete the selected file. Continue?
-                </AriaModalDescription>
-              </AriaModalHeader>
-              <AriaModalFooter className="flex justify-between">
-                <AriaModalClose variant="outline" size="sm" className="w-1/2">
+                </ModalDescription>
+              </ModalHeader>
+              <ModalFooter className="flex justify-between">
+                <ModalClose variant="outline" size="sm" className="w-1/2">
                   Cancel
-                </AriaModalClose>
-                <AriaModalClose variant="destruction" size="sm" className="w-1/2">
+                </ModalClose>
+                <ModalClose variant="destruction" size="sm" className="w-1/2">
                   Delete
                   <BaseIcon icon={TrashIcon} size="sm" />
-                </AriaModalClose>
-              </AriaModalFooter>
-            </AriaModalContent>
-          </AriaModal>
+                </ModalClose>
+              </ModalFooter>
+            </ModalContent>
+          </Modal>
         </PlaygroundCard>
         <PlaygroundCard title="Modal confirm" categoryTitle="Modal">
-          <AriaModal>
-            <AriaModalTrigger size="md" variant="outline">
+          <Modal>
+            <ModalTrigger size="md" variant="outline">
               Turn on 2FA
-            </AriaModalTrigger>
-            <AriaModalContent>
-              <AriaModalHeader>
-                <AriaModalTitle>Nice! Let&apos;s beef up your account.</AriaModalTitle>
-                <AriaModalDescription>
+            </ModalTrigger>
+            <ModalContent>
+              <ModalHeader>
+                <ModalTitle>Nice! Let&apos;s beef up your account.</ModalTitle>
+                <ModalDescription>
                   2FA beefs up your account&apos;s defense. Pop in your password to keep going.
-                </AriaModalDescription>
-              </AriaModalHeader>
+                </ModalDescription>
+              </ModalHeader>
               <form>
-                <AriaModalBody>
-                  <AriaTextField
+                <ModalBody>
+                  <TextField
                     isRequired
                     autoFocus
                     label="Password"
                     type="password"
                     placeholder="Enter your password"
                   />
-                </AriaModalBody>
-                <AriaModalFooter>
-                  <AriaModalClose variant="naked" size="sm">
+                </ModalBody>
+                <ModalFooter>
+                  <ModalClose variant="naked" size="sm">
                     Cancel
-                  </AriaModalClose>
-                  <AriaButton size="sm" variant="primary" type="submit">
+                  </ModalClose>
+                  <Button size="sm" variant="primary" type="submit">
                     Turn on 2FA
-                  </AriaButton>
-                </AriaModalFooter>
+                  </Button>
+                </ModalFooter>
               </form>
-            </AriaModalContent>
-          </AriaModal>
+            </ModalContent>
+          </Modal>
         </PlaygroundCard>
       </Wrapper>
       <Wrapper title="Popover">
         <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4">
           <PlaygroundCard title="Popover (Form)" categoryTitle="Popover">
-            <AriaPopover>
-              <AriaButton variant="primary" size="md">
+            <Popover>
+              <Button variant="primary" size="md">
                 Login
-              </AriaButton>
-              <AriaPopoverContent className="sm:min-w-96">
-                <AriaPopoverHeader>
-                  <AriaPopoverTitle>Login</AriaPopoverTitle>
-                  <AriaPopoverDescription>
-                    Enter your credentials to sign in.
-                  </AriaPopoverDescription>
-                </AriaPopoverHeader>
+              </Button>
+              <PopoverContent className="sm:min-w-96">
+                <PopoverHeader>
+                  <PopoverTitle>Login</PopoverTitle>
+                  <PopoverDescription>Enter your credentials to sign in.</PopoverDescription>
+                </PopoverHeader>
                 <form onSubmit={() => {}} className="w-[400px]">
-                  <AriaPopoverBody>
+                  <PopoverBody>
                     <div className="space-y-4">
-                      <AriaTextField
+                      <TextField
                         autoFocus
                         isRequired
                         size="sm"
@@ -762,7 +759,7 @@ export default function UIPlayground() {
                         label="Email"
                         placeholder="Enter your email"
                       />
-                      <AriaTextField
+                      <TextField
                         isRequired
                         isRevealable
                         size="sm"
@@ -772,9 +769,9 @@ export default function UIPlayground() {
                       />
                       <div className="my-4 flex items-center justify-between">
                         <Checkbox name="remember-me">Remember me</Checkbox>
-                        <AriaLink className="text-sm" href="#">
+                        <Link className="text-sm" href="#">
                           Forgot password?
-                        </AriaLink>
+                        </Link>
                       </div>
                       <div>
                         <CheckboxGroup
@@ -789,58 +786,56 @@ export default function UIPlayground() {
                         </CheckboxGroup>
                       </div>
                     </div>
-                  </AriaPopoverBody>
-                  <AriaPopoverFooter>
-                    <AriaPopoverClose variant="outline" size="sm">
+                  </PopoverBody>
+                  <PopoverFooter>
+                    <PopoverClose variant="outline" size="sm">
                       Cancel
-                    </AriaPopoverClose>
-                    <AriaButton type="submit" variant="tertiary" size="sm">
+                    </PopoverClose>
+                    <Button type="submit" variant="tertiary" size="sm">
                       Login
-                    </AriaButton>
-                  </AriaPopoverFooter>
+                    </Button>
+                  </PopoverFooter>
                 </form>
-              </AriaPopoverContent>
-            </AriaPopover>
+              </PopoverContent>
+            </Popover>
           </PlaygroundCard>
           <PlaygroundCard title="Popover (normal-1)" categoryTitle="Popover">
-            <AriaPopover>
-              <AriaButton size="sm" variant="outline">
+            <Popover>
+              <Button size="sm" variant="outline">
                 Forgot Password
-              </AriaButton>
-              <AriaPopoverContent className="sm:max-w-72">
-                <AriaPopoverHeader>
-                  <AriaPopoverTitle>Email</AriaPopoverTitle>
-                  <AriaPopoverDescription>
-                    We&apos;ll send you an email to log in.
-                  </AriaPopoverDescription>
-                </AriaPopoverHeader>
-              </AriaPopoverContent>
-            </AriaPopover>
+              </Button>
+              <PopoverContent className="sm:max-w-72">
+                <PopoverHeader>
+                  <PopoverTitle>Email</PopoverTitle>
+                  <PopoverDescription>We&apos;ll send you an email to log in.</PopoverDescription>
+                </PopoverHeader>
+              </PopoverContent>
+            </Popover>
           </PlaygroundCard>
           <PlaygroundCard title="Popover (normal-2)" categoryTitle="Popover">
-            <AriaPopover>
-              <AriaButton size="sm" variant="outline">
+            <Popover>
+              <Button size="sm" variant="outline">
                 Open popover
-              </AriaButton>
-              <AriaPopoverContent className="sm:w-[16rem]">
-                <AriaPopoverHeader>
-                  <AriaPopoverTitle level={4}>Popover Title</AriaPopoverTitle>
-                  <AriaPopoverDescription>Lorem ipsum dolor sit amet</AriaPopoverDescription>
-                </AriaPopoverHeader>
-                <AriaPopoverBody>
+              </Button>
+              <PopoverContent className="sm:w-[16rem]">
+                <PopoverHeader>
+                  <PopoverTitle level={4}>Popover Title</PopoverTitle>
+                  <PopoverDescription>Lorem ipsum dolor sit amet</PopoverDescription>
+                </PopoverHeader>
+                <PopoverBody>
                   Popover Body | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur
                   adipisicing elit. Quos, temporibus.
-                </AriaPopoverBody>
-                <AriaPopoverFooter>
-                  <AriaPopoverClose size="sm" variant="outline">
+                </PopoverBody>
+                <PopoverFooter>
+                  <PopoverClose size="sm" variant="outline">
                     Close
-                  </AriaPopoverClose>
-                  <AriaPopoverClose size="sm" variant="secondary">
+                  </PopoverClose>
+                  <PopoverClose size="sm" variant="secondary">
                     Confirm
-                  </AriaPopoverClose>
-                </AriaPopoverFooter>
-              </AriaPopoverContent>
-            </AriaPopover>
+                  </PopoverClose>
+                </PopoverFooter>
+              </PopoverContent>
+            </Popover>
           </PlaygroundCard>
         </div>
       </Wrapper>
@@ -1085,7 +1080,7 @@ export default function UIPlayground() {
           <PlaygroundCard title="Medium size (md)" categoryTitle="Button">
             <div className="flex flex-col space-y-4">
               <Switch onChange={() => {}} />
-              <AriaTextField
+              <TextField
                 isRequired={false}
                 label="Package owner"
                 description="This is a helper text"
@@ -1093,7 +1088,7 @@ export default function UIPlayground() {
                 isDisabled
                 placeholder="Data"
               />
-              <AriaTextField
+              <TextField
                 isRequired
                 type="text"
                 label="Something label and small textfield"
@@ -1102,7 +1097,7 @@ export default function UIPlayground() {
                 suffix={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 size="xs"
               />
-              <AriaTextField
+              <TextField
                 isRequired
                 type="password"
                 label="Some large textfield"
@@ -1110,7 +1105,7 @@ export default function UIPlayground() {
                 description="This is a helper text"
                 size="lg"
               />
-              <AriaTextField
+              <TextField
                 isRequired
                 type="password"
                 label="Package name"
@@ -1118,7 +1113,7 @@ export default function UIPlayground() {
                 description="This is a helper text"
                 size="md"
               />
-              <AriaTextField
+              <TextField
                 isRequired
                 label="Package name"
                 type="text"
@@ -1126,7 +1121,7 @@ export default function UIPlayground() {
                 size="md"
                 prefix={<BaseIcon icon={PlusCircleIcon} size="md" />}
               />
-              <AriaTextField
+              <TextField
                 isRequired
                 label="Package name"
                 type="text"
@@ -1134,8 +1129,8 @@ export default function UIPlayground() {
                 size="md"
                 suffix={<BaseIcon icon={PlusCircleIcon} size="md" />}
               />
-              <AriaTextField type="text" size="md" />
-              <AriaTextField
+              <TextField type="text" size="md" />
+              <TextField
                 type="text"
                 size="sm"
                 prefix={
@@ -1153,7 +1148,7 @@ export default function UIPlayground() {
                   </div>
                 }
               />
-              <AriaTextField
+              <TextField
                 type="text"
                 description="lorem"
                 size="xs"
@@ -1161,7 +1156,7 @@ export default function UIPlayground() {
                 suffix={'Right?'}
                 isDisabled
               />
-              <AriaTextField type="text" description="copy" size="md" isShowCopyButton isShowHttp />
+              <TextField type="text" description="copy" size="md" isShowCopyButton isShowHttp />
             </div>
           </PlaygroundCard>
         </div>
@@ -1169,14 +1164,14 @@ export default function UIPlayground() {
       <Wrapper title="Textarea">
         <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4">
           <PlaygroundCard title="Medium size (md)" categoryTitle="Textarea">
-            <AriaTextarea
+            <Textarea
               label="Package name"
               description="This is a helper text"
               placeholder="Data"
               className="w-full"
               isRequired
             />
-            <AriaTextarea
+            <Textarea
               label="Package name"
               description="This is a helper text"
               placeholder="Data"
@@ -1191,15 +1186,15 @@ export default function UIPlayground() {
         <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4">
           <PlaygroundCard title="Medium size (md)" categoryTitle="Button">
             <div className="flex w-full flex-col items-start gap-y-3">
-              <AriaButton
+              <Button
                 variant="primary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 size="md"
               >
                 Primary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 variant="secondary"
                 isDisabled
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1207,52 +1202,52 @@ export default function UIPlayground() {
                 size="md"
               >
                 Secondary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 variant="tertiary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 size="md"
               >
                 Tertiary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 variant="naked"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 size="md"
               >
                 Naked
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 variant="outline"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 size="md"
               >
                 Outline
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 variant="ghost"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 size="md"
               >
                 Ghost
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 variant="destruction"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
                 size="md"
               >
                 Destruction
-              </AriaButton>
+              </Button>
             </div>
           </PlaygroundCard>
           <PlaygroundCard title="Medium size (md) (disabled)" categoryTitle="Button">
             <div className="flex w-full flex-col items-start gap-y-3">
-              <AriaButton
+              <Button
                 isDisabled
                 variant="primary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1260,8 +1255,8 @@ export default function UIPlayground() {
                 size="md"
               >
                 Primary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 isDisabled
                 variant="secondary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1269,8 +1264,8 @@ export default function UIPlayground() {
                 size="md"
               >
                 Secondary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 isDisabled
                 variant="tertiary"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1278,8 +1273,8 @@ export default function UIPlayground() {
                 size="md"
               >
                 Tertiary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 isDisabled
                 variant="naked"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1287,8 +1282,8 @@ export default function UIPlayground() {
                 size="md"
               >
                 Naked
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 isDisabled
                 variant="outline"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1296,8 +1291,8 @@ export default function UIPlayground() {
                 size="md"
               >
                 Outline
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 isDisabled
                 variant="ghost"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1305,8 +1300,8 @@ export default function UIPlayground() {
                 size="md"
               >
                 Ghost
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 isDisabled
                 variant="destruction"
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="md" />}
@@ -1314,127 +1309,127 @@ export default function UIPlayground() {
                 size="md"
               >
                 Destruction
-              </AriaButton>
+              </Button>
             </div>
           </PlaygroundCard>
           <PlaygroundCard title="Small size (sm)" categoryTitle="Button">
             <div className="flex flex-col items-start gap-y-3">
-              <AriaButton
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="primary"
                 size="sm"
               >
                 Primary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="secondary"
                 size="sm"
               >
                 Secondary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="tertiary"
                 size="sm"
               >
                 Tertiary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="naked"
                 size="sm"
               >
                 Naked
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="outline"
                 size="sm"
               >
                 Outline
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="ghost"
                 size="sm"
               >
                 Ghost
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="destruction"
                 size="sm"
               >
                 Destruction
-              </AriaButton>
+              </Button>
             </div>
           </PlaygroundCard>
           <PlaygroundCard title="Extra small size (xs)" categoryTitle="Button">
             <div className="flex flex-col items-start gap-y-3">
-              <AriaButton
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="primary"
                 size="xs"
               >
                 Primary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="secondary"
                 size="xs"
               >
                 Secondary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="tertiary"
                 size="xs"
               >
                 Tertiary
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="naked"
                 size="xs"
               >
                 Naked
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="outline"
                 size="xs"
               >
                 Outline
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="ghost"
                 size="xs"
               >
                 Ghost
-              </AriaButton>
-              <AriaButton
+              </Button>
+              <Button
                 leadingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 trailingIcon={<BaseIcon icon={PlusCircleIcon} size="sm" />}
                 variant="destruction"
                 size="xs"
               >
                 Destruction
-              </AriaButton>
+              </Button>
             </div>
           </PlaygroundCard>
         </div>
@@ -1443,77 +1438,77 @@ export default function UIPlayground() {
         <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4">
           <PlaygroundCard title="Medium size (md)" categoryTitle="Button">
             <div className="flex w-full flex-col items-start gap-y-3">
-              <AriaButton variant="primary" size="md">
+              <Button variant="primary" size="md">
                 <BaseIcon icon={PlusCircleIcon} size="md" />
-              </AriaButton>
-              <AriaButton variant="secondary" size="md">
+              </Button>
+              <Button variant="secondary" size="md">
                 <BaseIcon icon={PlusCircleIcon} size="md" />
-              </AriaButton>
-              <AriaButton variant="tertiary" size="md">
+              </Button>
+              <Button variant="tertiary" size="md">
                 <BaseIcon icon={PlusCircleIcon} size="md" />
-              </AriaButton>
-              <AriaButton variant="naked" size="md">
+              </Button>
+              <Button variant="naked" size="md">
                 <BaseIcon icon={PlusCircleIcon} size="md" />
-              </AriaButton>
-              <AriaButton variant="outline" size="md">
+              </Button>
+              <Button variant="outline" size="md">
                 <BaseIcon icon={PlusCircleIcon} size="md" />
-              </AriaButton>
-              <AriaButton variant="ghost" size="md">
+              </Button>
+              <Button variant="ghost" size="md">
                 <BaseIcon icon={PlusCircleIcon} size="md" />
-              </AriaButton>
-              <AriaButton variant="destruction" size="md">
+              </Button>
+              <Button variant="destruction" size="md">
                 <BaseIcon icon={PlusCircleIcon} size="md" />
-              </AriaButton>
+              </Button>
             </div>
           </PlaygroundCard>
           <PlaygroundCard title="Medium size (sm)" categoryTitle="Button">
             <div className="flex w-full flex-col items-start gap-y-3">
-              <AriaButton variant="primary" size="sm">
+              <Button variant="primary" size="sm">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="secondary" size="sm">
+              </Button>
+              <Button variant="secondary" size="sm">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="tertiary" size="sm">
+              </Button>
+              <Button variant="tertiary" size="sm">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="naked" size="sm">
+              </Button>
+              <Button variant="naked" size="sm">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="outline" size="sm">
+              </Button>
+              <Button variant="outline" size="sm">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="ghost" size="sm">
+              </Button>
+              <Button variant="ghost" size="sm">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="destruction" size="sm">
+              </Button>
+              <Button variant="destruction" size="sm">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
+              </Button>
             </div>
           </PlaygroundCard>
           <PlaygroundCard title="Extra small size (xs)" categoryTitle="Button">
             <div className="flex w-full flex-col items-start gap-y-3">
-              <AriaButton variant="primary" size="xs">
+              <Button variant="primary" size="xs">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="secondary" size="xs">
+              </Button>
+              <Button variant="secondary" size="xs">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="tertiary" size="xs">
+              </Button>
+              <Button variant="tertiary" size="xs">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="naked" size="xs">
+              </Button>
+              <Button variant="naked" size="xs">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="outline" size="xs">
+              </Button>
+              <Button variant="outline" size="xs">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="ghost" size="xs">
+              </Button>
+              <Button variant="ghost" size="xs">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
-              <AriaButton variant="destruction" size="xs">
+              </Button>
+              <Button variant="destruction" size="xs">
                 <BaseIcon icon={PlusCircleIcon} size="sm" />
-              </AriaButton>
+              </Button>
             </div>
           </PlaygroundCard>
         </div>
@@ -1557,12 +1552,12 @@ export default function UIPlayground() {
       <Wrapper title="Button group">
         <PlaygroundCard title="Medium size (md)" categoryTitle="Button group">
           <div className="flex items-center gap-x-4">
-            <AriaButtonGroup>
-              <AriaButtonGroupItem id="1d">1d</AriaButtonGroupItem>
-              <AriaButtonGroupItem id="1w">1w</AriaButtonGroupItem>
-              <AriaButtonGroupItem id="1m">1m</AriaButtonGroupItem>
-              <AriaButtonGroupItem id="1y">1y</AriaButtonGroupItem>
-            </AriaButtonGroup>
+            <ButtonGroup>
+              <ButtonGroupItem id="1d">1d</ButtonGroupItem>
+              <ButtonGroupItem id="1w">1w</ButtonGroupItem>
+              <ButtonGroupItem id="1m">1m</ButtonGroupItem>
+              <ButtonGroupItem id="1y">1y</ButtonGroupItem>
+            </ButtonGroup>
           </div>
         </PlaygroundCard>
       </Wrapper>
@@ -1839,15 +1834,15 @@ export default function UIPlayground() {
 
       <Wrapper title="Form">
         <form className="flex flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
-          <AriaTextField label="Name" placeholder="Enter your name" isRequired />
-          <AriaTextarea
+          <TextField label="Name" placeholder="Enter your name" isRequired />
+          <Textarea
             label="Description"
             placeholder="Enter your description"
             errorMessage="Description is required"
           />
-          <AriaButton type="submit" variant="primary" size="sm">
+          <Button type="submit" variant="primary" size="sm">
             Submit
-          </AriaButton>
+          </Button>
         </form>
       </Wrapper>
     </div>
diff --git a/examples/ui-playground/src/app/playground/shadcn/button-section.tsx b/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
index 84aeafb3..b090fc1b 100644
--- a/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/button-section.tsx
@@ -15,13 +15,8 @@ import {
   SortDescendingIcon,
 } from '@phosphor-icons/react'
 
-import {
-  Button,
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  Typography,
-} from '@genseki/react'
+import { Typography } from '@genseki/react'
+import { Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@genseki/react/v2'
 
 import { PlaygroundCard } from '~/src/components/card'
 
diff --git a/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx b/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
index 8e33f641..b7015d98 100644
--- a/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { CheckIcon } from '@phosphor-icons/react'
 
+import { Typography } from '@genseki/react'
 import {
   Button,
   ComboboxCommandEmpty,
@@ -13,8 +14,7 @@ import {
   ComboboxProvider,
   ComboboxTrigger,
   ComboboxTriggerMultiValue,
-} from '@genseki/react'
-import { Typography } from '@genseki/react'
+} from '@genseki/react/v2'
 
 import { PlaygroundCard } from '~/src/components/card'
 
diff --git a/examples/ui-playground/src/app/playground/shadcn/input-section.tsx b/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
index 07a16931..bdbbc016 100644
--- a/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/input-section.tsx
@@ -12,6 +12,7 @@ import {
   XIcon,
 } from '@phosphor-icons/react'
 
+import { Typography } from '@genseki/react'
 import {
   Input,
   InputGroup,
@@ -20,8 +21,7 @@ import {
   InputGroupControl,
   InputGroupText,
   Label,
-  Typography,
-} from '@genseki/react'
+} from '@genseki/react/v2'
 
 import { PlaygroundCard } from '~/src/components/card'
 
diff --git a/examples/ui-playground/src/app/playground/shadcn/link-section.tsx b/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
index ade3be8d..8bf58a58 100644
--- a/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
+++ b/examples/ui-playground/src/app/playground/shadcn/link-section.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 
 import Link from 'next/link'
 
-import { linkVariants, Typography } from '@genseki/react'
+import { Typography } from '@genseki/react'
+import { linkVariants } from '@genseki/react/v2'
 
 import { PlaygroundCard } from '../../../components/card'
 
diff --git a/packages/react/package.json b/packages/react/package.json
index 8a146c43..967c24df 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -12,6 +12,11 @@
       "require": "./src/index.ts",
       "types": "./src/index.ts"
     },
+    "./v2": {
+      "import": "./v2/index.ts",
+      "require": "./v2/index.ts",
+      "types": "./v2/index.ts"
+    },
     "./tailwind.css": "./src/react/styles/tailwind.css"
   },
   "publishConfig": {
@@ -20,6 +25,10 @@
         "import": "./dist/src/index.js",
         "types": "./dist/src/index.d.ts"
       },
+      "./v2": {
+        "import": "./dist/v2/index.js",
+        "types": "./dist/v2/index.d.ts"
+      },
       "./tailwind.css": "./dist/src/react/styles/tailwind.css"
     }
   },
diff --git a/packages/react/src/auth/plugins/email-and-password/views/forgot-password/_components/input-email-section.tsx b/packages/react/src/auth/plugins/email-and-password/views/forgot-password/_components/input-email-section.tsx
index 9d0a5b86..a835e375 100644
--- a/packages/react/src/auth/plugins/email-and-password/views/forgot-password/_components/input-email-section.tsx
+++ b/packages/react/src/auth/plugins/email-and-password/views/forgot-password/_components/input-email-section.tsx
@@ -6,13 +6,13 @@ import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { z } from 'zod'
 
 import {
-  AriaButton,
-  AriaTextField,
+  Button,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
+  TextField,
 } from '@genseki/react'
 
 const schema = z.object({
@@ -56,13 +56,13 @@ export function InputEmailSection({ onNext }: InputEmailSectionProps) {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <AriaTextField {...field} placeholder="email" />
+                <TextField {...field} placeholder="email" />
               </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
-        <AriaButton
+        <Button
           variant="primary"
           type="submit"
           className="w-full"
@@ -70,7 +70,7 @@ export function InputEmailSection({ onNext }: InputEmailSectionProps) {
           onPress={() => form.clearErrors('email')}
         >
           Send OTP
-        </AriaButton>
+        </Button>
       </form>
     </Form>
   )
diff --git a/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx b/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx
index 97ae66a2..37c6e709 100644
--- a/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx
+++ b/packages/react/src/auth/plugins/email-and-password/views/login/login.client.tsx
@@ -15,8 +15,8 @@ import {
   FormItem,
   FormMessage,
 } from '../../../../../react/components/primitives/form'
-import { AriaLink } from '../../../../../react/components/primitives/link'
-import { AriaTextField } from '../../../../../react/components/primitives/text-field'
+import { Link } from '../../../../../react/components/primitives/link'
+import { TextField } from '../../../../../react/components/primitives/text-field'
 import { useNavigation } from '../../../../../react/providers/navigation'
 import { useServerFunction } from '../../../../../react/providers/root'
 
@@ -92,7 +92,7 @@ export function LoginClientForm() {
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <AriaTextField
+                  <TextField
                     {...field}
                     name="email"
                     type="email"
@@ -111,7 +111,7 @@ export function LoginClientForm() {
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <AriaTextField
+                  <TextField
                     {...field}
                     name="password"
                     type="password"
@@ -125,9 +125,9 @@ export function LoginClientForm() {
               </FormItem>
             )}
           />
-          <AriaLink href="./forgot-password" intent="primary" className="text-sm ml-auto">
+          <Link href="./forgot-password" intent="primary" className="text-sm ml-auto">
             Forgot Password?
-          </AriaLink>
+          </Link>
           <SubmitButton pending={isLoading}>Login</SubmitButton>
         </form>
       </Form>
diff --git a/packages/react/src/auth/plugins/email-and-password/views/reset-password/reset-password.client.tsx b/packages/react/src/auth/plugins/email-and-password/views/reset-password/reset-password.client.tsx
index b0d39760..b191300a 100644
--- a/packages/react/src/auth/plugins/email-and-password/views/reset-password/reset-password.client.tsx
+++ b/packages/react/src/auth/plugins/email-and-password/views/reset-password/reset-password.client.tsx
@@ -7,13 +7,13 @@ import { toast } from 'sonner'
 import { z } from 'zod'
 
 import {
-  AriaTextField,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
   SubmitButton,
+  TextField,
   Typography,
   useNavigation,
   useServerFunction,
@@ -103,7 +103,7 @@ export function ResetPasswordClientForm({ token }: ResetPasswordClientFormProps)
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <AriaTextField
+                    <TextField
                       {...field}
                       type="password"
                       placeholder="password..."
@@ -122,7 +122,7 @@ export function ResetPasswordClientForm({ token }: ResetPasswordClientFormProps)
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <AriaTextField
+                    <TextField
                       {...field}
                       type="password"
                       placeholder="confirmPassword..."
diff --git a/packages/react/src/react/components/compound/auto-field/index.tsx b/packages/react/src/react/components/compound/auto-field/index.tsx
index c406b5fd..cb80d2e3 100644
--- a/packages/react/src/react/components/compound/auto-field/index.tsx
+++ b/packages/react/src/react/components/compound/auto-field/index.tsx
@@ -8,26 +8,22 @@ import { useQuery } from '@tanstack/react-query'
 import type { Content } from '@tiptap/react'
 
 import {
-  AriaButton,
-  AriaCombobox,
-  type AriaComboboxItem,
-  AriaComboboxLabel,
-  AriaComboboxList,
-  AriaComboboxOption,
-  type AriaComboboxProps,
-  AriaComboboxSearchInput,
-  AriaComboboxTrigger,
-  AriaTextField,
-  type AriaTextFieldProps,
+  Combobox,
+  type ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxOption,
+  type ComboboxProps,
+  ComboboxSearchInput,
+  ComboboxTrigger,
   BaseIcon,
-  Button,
+  Button as AriaButton,
   Checkbox,
   type CheckboxProps,
   DatePicker,
   type DatePickerProps,
   FormField,
   FormItemController,
-  Input,
   InputGroup,
   InputGroupControl,
   NumberField,
@@ -41,11 +37,14 @@ import {
   SelectTrigger,
   Switch,
   type SwitchProps,
+  TextField,
+  type TextFieldProps,
   TimeField,
   type TimeFieldProps,
   Typography,
   useFormItemController,
 } from '@genseki/react'
+import { Button, Input, Label } from '@genseki/react/v2'
 
 import type {
   FieldOptionsCallbackReturn,
@@ -59,7 +58,6 @@ import { useDebounce } from '../../../hooks/use-debounce'
 import { useStorageAdapter } from '../../../providers/root'
 import { cn } from '../../../utils/cn'
 import { convertDateStringToCalendarDate, convertDateStringToTimeValue } from '../../../utils/date'
-import { Label } from '../../primitives/label'
 import { FileUploadField, type FileUploadFieldProps } from '../file-upload-field'
 
 export function AutoFileUploadField(props: FileUploadFieldProps) {
@@ -123,23 +121,13 @@ export function AutoTextField(
       }
     />
   )
-
-  // return (
-  //   <AriaTextField
-  //     type="text"
-  //     {...props}
-  //     {...field}
-  //     errorMessage={error?.message}
-  //     className={cn('w-full', props.className)}
-  //   />
-  // )
 }
 
-export function AutoPasswordField(props: AriaTextFieldProps) {
+export function AutoPasswordField(props: TextFieldProps) {
   const { field, error } = useFormItemController()
 
   return (
-    <AriaTextField
+    <TextField
       {...props}
       {...field}
       type="password"
@@ -150,11 +138,11 @@ export function AutoPasswordField(props: AriaTextFieldProps) {
   )
 }
 
-export function AutoEmailField(props: AriaTextFieldProps) {
+export function AutoEmailField(props: TextFieldProps) {
   const { field, error } = useFormItemController()
 
   return (
-    <AriaTextField
+    <TextField
       type="email"
       prefix={<BaseIcon icon={EnvelopeIcon} size="sm" />}
       {...props}
@@ -325,7 +313,7 @@ export function AutoSelectField(props: AutoSelectField) {
 }
 
 export interface AutoComboboxFieldProps
-  extends Omit<AriaComboboxProps, 'items' | 'onSearch' | 'isLoading' | 'value' | 'onChange'> {
+  extends Omit<ComboboxProps, 'items' | 'onSearch' | 'isLoading' | 'value' | 'onChange'> {
   name?: string
 
   optionsName: string
@@ -379,7 +367,7 @@ export function AutoComboboxField(props: AutoComboboxFieldProps) {
     },
   })
 
-  const items: AriaComboboxItem[] = useMemo(
+  const items: ComboboxItem[] = useMemo(
     () => (query.data?.body.options ?? []).map((o) => ({ label: o.label, value: String(o.value) })),
     [query.data]
   )
@@ -399,7 +387,7 @@ export function AutoComboboxField(props: AutoComboboxFieldProps) {
   }
 
   return (
-    <AriaCombobox
+    <Combobox
       label={label}
       className={cn('w-full', className)}
       description={description}
@@ -418,11 +406,11 @@ export function AutoComboboxField(props: AutoComboboxFieldProps) {
         onOpenChange?.(isOpen)
       }}
     >
-      <AriaComboboxTrigger>
-        <AriaComboboxSearchInput placeholder={placeholder} />
-      </AriaComboboxTrigger>
+      <ComboboxTrigger>
+        <ComboboxSearchInput placeholder={placeholder} />
+      </ComboboxTrigger>
 
-      <AriaComboboxList>
+      <ComboboxList>
         {!query.isFetching && items.length === 0 && (
           <li className="px-4 py-6 text-sm text-muted-fg">No results</li>
         )}
@@ -430,18 +418,18 @@ export function AutoComboboxField(props: AutoComboboxFieldProps) {
           items.map((item, idx) => {
             const isSelected = item.value === field.value
             return (
-              <AriaComboboxOption
+              <ComboboxOption
                 key={item.value}
                 value={item.value}
                 isSelected={isSelected}
                 onSelect={() => submitSelection(idx)}
               >
-                <AriaComboboxLabel>{item.label}</AriaComboboxLabel>
-              </AriaComboboxOption>
+                <ComboboxLabel>{item.label}</ComboboxLabel>
+              </ComboboxOption>
             )
           })}
-      </AriaComboboxList>
-    </AriaCombobox>
+      </ComboboxList>
+    </Combobox>
   )
 }
 
diff --git a/packages/react/src/react/components/compound/collection-card.tsx b/packages/react/src/react/components/compound/collection-card.tsx
index 9b1c427e..6b964879 100644
--- a/packages/react/src/react/components/compound/collection-card.tsx
+++ b/packages/react/src/react/components/compound/collection-card.tsx
@@ -2,7 +2,7 @@ import { CaretRightIcon, CubeIcon, FolderIcon } from '@phosphor-icons/react/dist
 
 import { Badge } from '../../icons/badge'
 import { BaseIcon } from '../primitives/base-icon'
-import { AriaLink } from '../primitives/link'
+import { Link } from '../primitives/link'
 import { Typography } from '../primitives/typography'
 
 interface CollectionCardProps {
@@ -51,7 +51,7 @@ export const CollectionCard = ({
           {description}
         </Typography>
       </div>
-      <AriaLink
+      <Link
         href={url}
         className="[&>*]:text-primary group flex w-full justify-end rounded-[calc(var(--spacing)*4)] p-5 text-end transition-all [background-image:linear-gradient(120deg,_--alpha(var(--color-primary)/5%)_35%,--alpha(var(--color-primary)/10%)_40%,--alpha(var(--color-primary)/0%)_80%,--alpha(var(--color-primary)/5%))] hover:[background-position:40px_0]"
       >
@@ -64,7 +64,7 @@ export const CollectionCard = ({
           weight="regular"
           className="transition-transform group-hover:translate-x-2"
         />
-      </AriaLink>
+      </Link>
     </div>
   )
 }
diff --git a/packages/react/src/react/components/compound/collection-sidebar/nav/app-topbar-nav.tsx b/packages/react/src/react/components/compound/collection-sidebar/nav/app-topbar-nav.tsx
index 2f01cadf..81f19e94 100644
--- a/packages/react/src/react/components/compound/collection-sidebar/nav/app-topbar-nav.tsx
+++ b/packages/react/src/react/components/compound/collection-sidebar/nav/app-topbar-nav.tsx
@@ -1,13 +1,13 @@
 import { AppSidebarBreadCrumbs } from './app-sidebar-bread-crumbs'
 
-import { AriaSeparator, SidebarNav, SidebarTrigger } from '../../../primitives'
+import { Separator, SidebarNav, SidebarTrigger } from '../../../primitives'
 
 export function AppTopbarNav() {
   return (
     <SidebarNav className="relative z-10 h-[76px] border-b pr-12">
       <div className="flex items-center gap-x-4">
         <SidebarTrigger size="sm" variant="ghost" className="-mx-2" />
-        <AriaSeparator className="h-6" orientation="vertical" />
+        <Separator className="h-6" orientation="vertical" />
         <AppSidebarBreadCrumbs />
       </div>
     </SidebarNav>
diff --git a/packages/react/src/react/components/compound/editor/components/redo-undo-buttons.tsx b/packages/react/src/react/components/compound/editor/components/redo-undo-buttons.tsx
index a5a61e4f..37697aa6 100644
--- a/packages/react/src/react/components/compound/editor/components/redo-undo-buttons.tsx
+++ b/packages/react/src/react/components/compound/editor/components/redo-undo-buttons.tsx
@@ -3,7 +3,7 @@ import { ArrowClockwiseIcon, ArrowCounterClockwiseIcon } from '@phosphor-icons/r
 import { useCurrentEditor } from '@tiptap/react'
 
 import { BaseIcon } from '../../../primitives/base-icon'
-import { AriaButton } from '../../../primitives/button'
+import { Button } from '../../../primitives/button'
 
 export const UndoButton = () => {
   const { editor } = useCurrentEditor()
@@ -11,7 +11,7 @@ export const UndoButton = () => {
   if (!editor) throw new Error('Editor provider is missing')
 
   return (
-    <AriaButton
+    <Button
       variant="ghost"
       size="md"
       isDisabled={!editor.can().undo()}
@@ -22,7 +22,7 @@ export const UndoButton = () => {
       aria-label="Undo"
     >
       <BaseIcon icon={ArrowCounterClockwiseIcon} weight="regular" />
-    </AriaButton>
+    </Button>
   )
 }
 
@@ -32,7 +32,7 @@ export const RedoButton = () => {
   if (!editor) throw new Error('Editor provider is missing')
 
   return (
-    <AriaButton
+    <Button
       variant="ghost"
       size="md"
       isDisabled={!editor.can().redo()}
@@ -43,6 +43,6 @@ export const RedoButton = () => {
       aria-label="Redo"
     >
       <BaseIcon icon={ArrowClockwiseIcon} weight="regular" />
-    </AriaButton>
+    </Button>
   )
 }
diff --git a/packages/react/src/react/components/compound/editor/components/upload-image-button.tsx b/packages/react/src/react/components/compound/editor/components/upload-image-button.tsx
index 1870117d..47aa7344 100644
--- a/packages/react/src/react/components/compound/editor/components/upload-image-button.tsx
+++ b/packages/react/src/react/components/compound/editor/components/upload-image-button.tsx
@@ -3,7 +3,7 @@ import { ImageIcon } from '@phosphor-icons/react'
 import { useCurrentEditor } from '@tiptap/react'
 
 import { BaseIcon } from '../../../primitives/base-icon'
-import { AriaButton } from '../../../primitives/button'
+import { Button } from '../../../primitives/button'
 
 export const UploadImageButton = () => {
   const { editor } = useCurrentEditor()
@@ -11,7 +11,7 @@ export const UploadImageButton = () => {
   if (!editor) throw new Error('Editor provider is missing')
 
   return (
-    <AriaButton
+    <Button
       size="sm"
       variant="ghost"
       className="self-center p-6"
@@ -20,6 +20,6 @@ export const UploadImageButton = () => {
       }}
     >
       <BaseIcon icon={ImageIcon} size="sm" weight="regular" />
-    </AriaButton>
+    </Button>
   )
 }
diff --git a/packages/react/src/react/components/compound/file-upload-field.tsx b/packages/react/src/react/components/compound/file-upload-field.tsx
index cb70a306..685d01be 100644
--- a/packages/react/src/react/components/compound/file-upload-field.tsx
+++ b/packages/react/src/react/components/compound/file-upload-field.tsx
@@ -16,16 +16,16 @@ import { mimeTypeValidate } from '../../../core/utils'
 import { useStorageAdapter } from '../../providers/root'
 import { isImageKey } from '../../utils/is-image-key'
 import {
-  AriaButton,
+  Button,
   AriaDescription,
   AriaLabel,
-  AriaModal,
-  AriaModalClose,
-  AriaModalContent,
-  AriaModalDescription,
-  AriaModalFooter,
-  AriaModalHeader,
-  AriaModalTitle,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
   BaseIcon,
   ProgressBar,
   Typography,
@@ -441,7 +441,7 @@ export const FileUploadField = (props: FileUploadFieldProps) => {
                 className="border border-bluegray-400 bg-white rounded-lg"
               >
                 <div className="flex flex-col items-center gap-6">
-                  <AriaButton
+                  <Button
                     leadingIcon={<BaseIcon icon={PaperclipIcon} size="md" />}
                     variant="outline"
                     size="sm"
@@ -451,7 +451,7 @@ export const FileUploadField = (props: FileUploadFieldProps) => {
                     }}
                   >
                     Upload a file
-                  </AriaButton>
+                  </Button>
                   <div className="flex flex-col items-center gap-y-4 mt-4">
                     <Typography type="body" weight="medium" className="text-muted-fg text-center">
                       {props.placeholder || (
@@ -571,32 +571,32 @@ const FileDisplayer = (props: {
           )}
 
           <div className="flex gap-6 items-center">
-            <AriaModal>
-              <AriaButton variant="destruction" size="xs" isDisabled={isDeleting}>
+            <Modal>
+              <Button variant="destruction" size="xs" isDisabled={isDeleting}>
                 {isDeleting ? 'Deleting...' : 'Remove'}
-              </AriaButton>
-              <AriaModalContent isBlurred role="alertdialog">
-                <AriaModalHeader className="">
-                  <AriaModalTitle level={3}>Delete file</AriaModalTitle>
-                  <AriaModalDescription>
+              </Button>
+              <ModalContent isBlurred role="alertdialog">
+                <ModalHeader className="">
+                  <ModalTitle level={3}>Delete file</ModalTitle>
+                  <ModalDescription>
                     This will permanently delete the selected file
-                  </AriaModalDescription>
-                </AriaModalHeader>
-                <AriaModalFooter className="flex justify-between">
-                  <AriaModalClose variant="outline" size="sm">
+                  </ModalDescription>
+                </ModalHeader>
+                <ModalFooter className="flex justify-between">
+                  <ModalClose variant="outline" size="sm">
                     Cancel
-                  </AriaModalClose>
-                  <AriaModalClose
+                  </ModalClose>
+                  <ModalClose
                     variant="destruction"
                     size="sm"
                     onClick={() => props.onRemove(props.fileKey)}
                     isDisabled={isDeleting}
                   >
                     {isDeleting ? 'Deleting...' : 'Delete'}
-                  </AriaModalClose>
-                </AriaModalFooter>
-              </AriaModalContent>
-            </AriaModal>
+                  </ModalClose>
+                </ModalFooter>
+              </ModalContent>
+            </Modal>
           </div>
         </div>
       </div>
diff --git a/packages/react/src/react/components/compound/reorder-group/index.tsx b/packages/react/src/react/components/compound/reorder-group/index.tsx
index b6b54249..5361e1d7 100644
--- a/packages/react/src/react/components/compound/reorder-group/index.tsx
+++ b/packages/react/src/react/components/compound/reorder-group/index.tsx
@@ -15,7 +15,7 @@ import { CSS } from '@dnd-kit/utilities'
 import { IconChevronLgDown } from '@intentui/icons'
 import { DotsSixIcon } from '@phosphor-icons/react'
 
-import { AriaButton, BaseIcon, Typography } from '../../primitives'
+import { Button, BaseIcon, Typography } from '../../primitives'
 
 interface ReorderGroupProps {
   title?: string
@@ -119,14 +119,14 @@ const SortableItem = ({ id, children, title, order }: SortableItemProps) => {
             </Typography>
           </div>
 
-          <AriaButton variant="ghost" size="sm" onClick={() => setIsShowContent((prev) => !prev)}>
+          <Button variant="ghost" size="sm" onClick={() => setIsShowContent((prev) => !prev)}>
             <IconChevronLgDown
               className={`size-6 transition-transform duration-300 ${
                 isShowContent ? '-rotate-180' : ''
               }`}
               fontSize={16}
             />
-          </AriaButton>
+          </Button>
         </div>
 
         {isShowContent && children}
diff --git a/packages/react/src/react/components/compound/submit-button.tsx b/packages/react/src/react/components/compound/submit-button.tsx
index bcc11df2..575e7420 100644
--- a/packages/react/src/react/components/compound/submit-button.tsx
+++ b/packages/react/src/react/components/compound/submit-button.tsx
@@ -2,7 +2,7 @@
 
 import { useFormStatus } from 'react-dom'
 
-import { Button } from '../primitives/button'
+import { Button } from '@genseki/react/v2'
 
 interface SubmitButtonProps {
   children: React.ReactNode
diff --git a/packages/react/src/react/components/primitives/breadcrumbs.tsx b/packages/react/src/react/components/primitives/breadcrumbs.tsx
index 4ff25216..50b5a425 100644
--- a/packages/react/src/react/components/primitives/breadcrumbs.tsx
+++ b/packages/react/src/react/components/primitives/breadcrumbs.tsx
@@ -6,7 +6,7 @@ import { Breadcrumb, Breadcrumbs as BreadcrumbsPrimitive } from 'react-aria-comp
 import { IconChevronLgRight } from '@intentui/icons'
 import { twMerge } from 'tailwind-merge'
 
-import { AriaLink } from './link'
+import { Link } from './link'
 import { composeTailwindRenderProps } from './primitive'
 
 interface BreadcrumbsContextProps {
@@ -54,7 +54,7 @@ const BreadcrumbsItem = ({
     >
       {({ isCurrent }) => (
         <>
-          <AriaLink href={href} {...props} />
+          <Link href={href} {...props} />
           {trailing}
           {!isCurrent && separator !== false && <Separator separator={separatorValue} />}
         </>
diff --git a/packages/react/src/react/components/primitives/button-group.tsx b/packages/react/src/react/components/primitives/button-group.tsx
index c4cf10ee..f3316bd5 100644
--- a/packages/react/src/react/components/primitives/button-group.tsx
+++ b/packages/react/src/react/components/primitives/button-group.tsx
@@ -9,19 +9,10 @@ import {
   type ToggleButtonProps,
 } from 'react-aria-components'
 
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'
 import { tv } from 'tailwind-variants'
 
 import { composeTailwindRenderProps } from './primitive'
-import { Separator } from './separator'
-
-import { cn } from '../../utils/cn'
-
-/**
- * React Aria component
- */
 
 /**
  * @deprecated
@@ -54,20 +45,20 @@ const useAriaButtonGroupContext = () => use(AriaButtonGroupContext)
 /**
  * @deprecated
  */
-interface AriaButtonGroupProps extends ToggleButtonGroupProps {
+interface ButtonGroupProps extends ToggleButtonGroupProps {
   size?: AriaButtonSize
 }
 
 /**
  * @deprecated
  */
-const AriaButtonGroup = ({
+const ButtonGroup = ({
   size = 'md',
   orientation = 'horizontal',
   selectionMode = 'single',
   className,
   ...props
-}: AriaButtonGroupProps) => {
+}: ButtonGroupProps) => {
   return (
     <AriaButtonGroupContext.Provider value={{ size, selectionMode, orientation }}>
       <ToggleButtonGroup
@@ -87,7 +78,7 @@ const AriaButtonGroup = ({
 /**
  * @deprecated
  */
-interface AriaButtonGroupItemProps extends ToggleButtonProps {}
+interface ButtonGroupItemProps extends ToggleButtonProps {}
 
 /**
  * @deprecated
@@ -137,7 +128,7 @@ const AriaButtonGroupItemStyles = tv({
 /**
  * @deprecated
  */
-const AriaButtonGroupItem = ({ className, ...props }: AriaButtonGroupItemProps) => {
+const ButtonGroupItem = ({ className, ...props }: ButtonGroupItemProps) => {
   const { size, selectionMode, orientation } = useAriaButtonGroupContext()
 
   return (
@@ -159,82 +150,4 @@ const AriaButtonGroupItem = ({ className, ...props }: AriaButtonGroupItemProps)
   )
 }
 
-export type { AriaButtonGroupItemProps, AriaButtonGroupProps }
-export { AriaButtonGroup, AriaButtonGroupItem }
-
-/**
- * Shadcn component
- */
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-4",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
-        vertical:
-          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
-      },
-    },
-    defaultVariants: {
-      orientation: 'horizontal',
-    },
-  }
-)
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentPropsWithRef<'div'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : 'div'
-
-  return (
-    <Comp
-      className={cn(
-        "bg-muted flex items-center gap-4 rounded-md border px-8 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8",
-        className
-      )}
-      {...(props as React.HTMLAttributes<HTMLElement>)}
-    />
-  )
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = 'vertical',
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }
+export { ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps }
diff --git a/packages/react/src/react/components/primitives/button.tsx b/packages/react/src/react/components/primitives/button.tsx
index 43f2a1ba..8d83521f 100644
--- a/packages/react/src/react/components/primitives/button.tsx
+++ b/packages/react/src/react/components/primitives/button.tsx
@@ -8,24 +8,16 @@ import {
 } from 'react-aria-components'
 
 import { Spinner, SpinnerIcon } from '@phosphor-icons/react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
 import { tv, type VariantProps as TwVariantProps } from 'tailwind-variants'
 
 import { BaseIcon } from './base-icon'
 
 import { cn } from '../../utils/cn'
 
-/**
- *
- * React Aria component
- *
- */
-
 /**
  * @deprecated
  */
-const ariaButtonVariants = tv({
+const ButtonVariants = tv({
   base: 'cursor-pointer flex items-center justify-center transition-all duration-200',
   variants: {
     variant: {
@@ -88,15 +80,15 @@ const ariaButtonVariants = tv({
 /**
  * @deprecated
  */
-type AriaButtonVariants = TwVariantProps<typeof ariaButtonVariants>
+type ButtonVariants = TwVariantProps<typeof ButtonVariants>
 
 /**
  * @deprecated
  */
-interface AriaButtonProps
+interface ButtonProps
   extends ButtonPrimitiveProps,
-    Required<Omit<AriaButtonVariants, 'isDisabled'>>,
-    Pick<AriaButtonVariants, 'isDisabled'> {
+    Required<Omit<ButtonVariants, 'isDisabled'>>,
+    Pick<ButtonVariants, 'isDisabled'> {
   leadingIcon?: React.ReactElement
   trailingIcon?: React.ReactElement
 }
@@ -104,7 +96,7 @@ interface AriaButtonProps
 /**
  * @deprecated
  */
-const AriaButton = React.forwardRef<HTMLButtonElement, AriaButtonProps>(
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, ...props }, ref) => {
     const { isDisabled, isPending = false } = props
 
@@ -116,7 +108,7 @@ const AriaButton = React.forwardRef<HTMLButtonElement, AriaButtonProps>(
         isDisabled={isDisabled || isPending}
         className={(value) =>
           cn(
-            ariaButtonVariants({
+            ButtonVariants({
               variant,
               size,
               isDisabled,
@@ -144,10 +136,10 @@ const AriaButton = React.forwardRef<HTMLButtonElement, AriaButtonProps>(
 /**
  * @deprecated
  */
-interface AriaButtonLinkProps
+interface ButtonLinkProps
   extends LinkPrimitiveProps,
-    Required<Omit<AriaButtonVariants, 'isDisabled'>>,
-    Pick<AriaButtonVariants, 'isDisabled'> {
+    Required<Omit<ButtonVariants, 'isDisabled'>>,
+    Pick<ButtonVariants, 'isDisabled'> {
   leadingIcon?: React.ReactElement
   trailingIcon?: React.ReactElement
   isPending?: boolean
@@ -156,7 +148,7 @@ interface AriaButtonLinkProps
 /**
  * @deprecated
  */
-const AriaButtonLink = React.forwardRef<HTMLAnchorElement, AriaButtonLinkProps>(function ButtonLink(
+const AriaButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(function ButtonLink(
   { className, variant, size, isDisabled = false, isPending = false, children, ...props },
   ref
 ) {
@@ -167,7 +159,7 @@ const AriaButtonLink = React.forwardRef<HTMLAnchorElement, AriaButtonLinkProps>(
       isDisabled={isDisabled || isPending}
       className={(value) =>
         cn(
-          ariaButtonVariants({
+          ButtonVariants({
             variant,
             size,
             isDisabled,
@@ -192,72 +184,4 @@ const AriaButtonLink = React.forwardRef<HTMLAnchorElement, AriaButtonLinkProps>(
   )
 })
 
-export { AriaButton, AriaButtonLink, type AriaButtonLinkProps, type AriaButtonProps }
-
-/**
- *
- * Shadcn component
- *
- */
-
-const buttonVariants = cva(
-  [
-    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring ring-offset-1 focus-visible:ring-ring/50 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-    'disabled:opacity-80 cursor-pointer',
-  ],
-  {
-    variants: {
-      variant: {
-        primary:
-          ' bg-surface-button-primary shadow-[inset_0px_-12px_12px_-6px_var(--color-surface-button-primary-hover)] text-text-inverse hover:bg-surface-button-primary-hover active:bg-surface-button-primary disabled:bg-surface-button-primary-disabled disabled:shadow-none disabled:text-text-disabled disabled:border disabled:border-border-button-primary-disabled',
-        secondary:
-          ' bg-surface-button-secondary text-text-brand hover:bg-surface-button-secondary-hover active:bg-surface-button-secondary disabled:bg-surface-button-secondary-disabled disabled:shadow-none disabled:text-text-disabled',
-        tertiary:
-          ' bg-surface-button-tertiary border border-border-button-tertiary text-text-brand hover:bg-surface-button-tertiary-hover active:bg-surface-button-tertiary hover:border-border-button-tertiary-hover disabled:bg-surface-button-tertiary-disabled disabled:border-border-button-tertiary-disabled disabled:text-text-disabled',
-        naked:
-          'shadow-sm ring-offset-0 text-text-secondary hover:bg-surface-button-naked-hover active:bg-transparent disabled:bg-surface-button-naked-disabled  disabled:text-text-disabled',
-        outline:
-          ' border border-border-button-outline text-text-secondary bg-surface-button-outline shadow-xs hover:bg-surface-button-outline-hover active:bg-surface-button-outline hover:border-border-button-outline-hover disabled:bg-surface-button-outline-disabled disabled:text-text-disabled disabled:border disabled:border-border-button-outline-disabled dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        ghost:
-          ' bg-surface-button-ghost hover:bg-surface-button-ghost-hover active:bg-surface-button-ghost text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-      },
-      size: {
-        default: 'h-18 px-8 py-4 has-[>svg]:px-6',
-        sm: 'h-16 rounded-md gap-3 px-6 has-[>svg]:px-5',
-        lg: 'h-20 rounded-md px-12 has-[>svg]:px-8',
-        icon: 'size-18',
-        'icon-sm': 'size-16',
-        'icon-lg': 'size-20',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'default',
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
+export { AriaButtonLink, Button, type ButtonLinkProps, type ButtonProps }
diff --git a/packages/react/src/react/components/primitives/calendar.tsx b/packages/react/src/react/components/primitives/calendar.tsx
index cb8da4d7..d56d622e 100644
--- a/packages/react/src/react/components/primitives/calendar.tsx
+++ b/packages/react/src/react/components/primitives/calendar.tsx
@@ -23,7 +23,7 @@ import { twMerge } from 'tailwind-merge'
 
 import { type CalendarDate, getLocalTimeZone, today } from '@internationalized/date'
 
-import { AriaButton } from './button'
+import { Button } from './button'
 import { Select, SelectLabel, SelectList, SelectOption, SelectTrigger } from './select'
 
 import { BaseIcon } from '../../components/primitives/base-icon'
@@ -98,7 +98,7 @@ const CalendarHeader = ({
         )}
       />
       <div className="flex items-center gap-1">
-        <AriaButton
+        <Button
           size="square-petite"
           className="size-14 **:data-[slot=icon]:text-fg p-0"
           variant="ghost"
@@ -109,8 +109,8 @@ const CalendarHeader = ({
           ) : (
             <BaseIcon weight="regular" size="sm" icon={CaretLeftIcon} />
           )}
-        </AriaButton>
-        <AriaButton
+        </Button>
+        <Button
           size="square-petite"
           className="size-14 **:data-[slot=icon]:text-fg p-0"
           variant="ghost"
@@ -121,7 +121,7 @@ const CalendarHeader = ({
           ) : (
             <BaseIcon weight="regular" size="sm" icon={CaretRightIcon} />
           )}
-        </AriaButton>
+        </Button>
       </div>
     </header>
   )
diff --git a/packages/react/src/react/components/primitives/color-picker.tsx b/packages/react/src/react/components/primitives/color-picker.tsx
index c7279bcc..5b5cd4bb 100644
--- a/packages/react/src/react/components/primitives/color-picker.tsx
+++ b/packages/react/src/react/components/primitives/color-picker.tsx
@@ -11,20 +11,20 @@ import { EyedropperIcon } from '@phosphor-icons/react'
 import { parseColor } from '@react-stately/color'
 import { twMerge } from 'tailwind-merge'
 
-import { AriaButton } from './button'
+import { Button } from './button'
 import { ColorArea } from './color-area'
 import { ColorField } from './color-field'
 import { ColorSlider } from './color-slider'
 import { ColorSwatch } from './color-swatch'
 import { AriaDescription } from './field'
-import { AriaPopover, AriaPopoverContent, type AriaPopoverContentProps } from './popover'
+import { Popover, PopoverContent, type PopoverContentProps } from './popover'
 
 import { BaseIcon } from '../../components/primitives/base-icon'
 import { cn } from '../../utils/cn'
 
 interface ColorPickerProps
   extends ColorPickerPrimitiveProps,
-    Pick<AriaPopoverContentProps, 'placement'> {
+    Pick<PopoverContentProps, 'placement'> {
   label?: React.ReactNode
   className?: string
   children?: React.ReactNode
@@ -52,12 +52,12 @@ const ColorPicker = ({
   return (
     <div className={twMerge('flex flex-col items-start gap-y-4', className)}>
       <ColorPickerPrimitive {...props}>
-        <AriaPopover
+        <Popover
           onOpenChange={(open) => {
             onPopupOpenChange?.(open)
           }}
         >
-          <AriaButton
+          <Button
             isDisabled={isDisabled}
             size="md"
             variant="ghost"
@@ -68,8 +68,8 @@ const ColorPicker = ({
           >
             <ColorSwatch className="size-14" />
             {label && label}
-          </AriaButton>
-          <AriaPopoverContent
+          </Button>
+          <PopoverContent
             className="overflow-auto **:data-[slot=color-area]:w-full **:data-[slot=color-slider]:w-full sm:min-w-min sm:max-w-96 sm:**:data-[slot=color-area]:size-96 *:[[role=dialog]]:p-4 sm:*:[[role=dialog]]:p-2"
             showArrow={showArrow}
             placement={placement}
@@ -93,8 +93,8 @@ const ColorPicker = ({
                 </>
               )}
             </div>
-          </AriaPopoverContent>
-        </AriaPopover>
+          </PopoverContent>
+        </Popover>
       </ColorPickerPrimitive>
       {description && <AriaDescription>{description}</AriaDescription>}
     </div>
@@ -115,7 +115,7 @@ const EyeDropper = () => {
   }
 
   return (
-    <AriaButton
+    <Button
       aria-label="Eye dropper"
       size="md"
       variant="outline"
@@ -130,7 +130,7 @@ const EyeDropper = () => {
       }}
     >
       <BaseIcon icon={EyedropperIcon} size="sm" weight="duotone" />
-    </AriaButton>
+    </Button>
   )
 }
 
diff --git a/packages/react/src/react/components/primitives/combobox.tsx b/packages/react/src/react/components/primitives/combobox.tsx
index 24840f9e..2b87620e 100644
--- a/packages/react/src/react/components/primitives/combobox.tsx
+++ b/packages/react/src/react/components/primitives/combobox.tsx
@@ -4,33 +4,18 @@ import * as React from 'react'
 
 import {
   CaretDownIcon,
-  CaretUpDownIcon,
   CheckIcon,
   MagnifyingGlassIcon,
   SpinnerIcon,
   XCircleIcon,
-  XIcon,
 } from '@phosphor-icons/react'
-import { useControllableState } from '@radix-ui/react-use-controllable-state'
 import { tv } from 'tailwind-variants'
 
-import { Badge } from './badge'
 import { BaseIcon } from './base-icon'
-import { Button } from './button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from './command'
 import { AriaDescription, AriaFieldError } from './field'
-import { Label } from './label'
-import { Popover, PopoverContent, PopoverTrigger } from './popover'
 import { focusStyles } from './primitive'
 
-import { createRequiredContext } from '../../hooks/create-required-context'
+import { Label } from '../../../../v2'
 import { cn } from '../../utils/cn'
 
 /**
@@ -42,19 +27,19 @@ import { cn } from '../../utils/cn'
 /**
  * @deprecated
  */
-type AriaComboboxItem = { label: string; value: string }
+type ComboboxItem = { label: string; value: string }
 
 /**
  * @deprecated
  */
-interface AriaComboboxContextValue {
+interface ComboboxContextValue {
   open: boolean
   setOpen: (open: boolean) => void
   search: string
   setSearch: (search: string) => void
   value: string | null
   onChange: (value: string | null) => void
-  items: AriaComboboxItem[]
+  items: ComboboxItem[]
   isPending?: boolean
   isDisabled?: boolean
   isRequired?: boolean
@@ -67,13 +52,13 @@ interface AriaComboboxContextValue {
 /**
  * @deprecated
  */
-const AriaComboboxContext = React.createContext<AriaComboboxContextValue | null>(null)
+const ComboboxContext = React.createContext<ComboboxContextValue | null>(null)
 
 /**
  * @deprecated
  */
-const useAriaComboboxContext = () => {
-  const context = React.useContext(AriaComboboxContext)
+const useComboboxContext = () => {
+  const context = React.useContext(ComboboxContext)
   if (!context) {
     throw new Error('Combobox components must be used within Combobox')
   }
@@ -83,11 +68,11 @@ const useAriaComboboxContext = () => {
 /**
  * @deprecated
  */
-interface AriaComboboxProps {
+interface ComboboxProps {
   value: string | null
   onChange: (value: string | null) => void
 
-  items: AriaComboboxItem[]
+  items: ComboboxItem[]
   isPending?: boolean
 
   onSearch?: (q: string) => void
@@ -122,7 +107,7 @@ const ariaTriggerStyles = tv({
 /**
  * @deprecated
  */
-interface AriaComboboxTriggerProps {
+interface ComboboxTriggerProps {
   children: React.ReactNode
   className?: string
   isPending?: boolean
@@ -131,8 +116,8 @@ interface AriaComboboxTriggerProps {
 /**
  * @deprecated
  */
-const AriaComboboxTrigger = ({ children, className }: AriaComboboxTriggerProps) => {
-  const { open, setOpen, isDisabled, errorMessage } = useAriaComboboxContext()
+const ComboboxTrigger = ({ children, className }: ComboboxTriggerProps) => {
+  const { open, setOpen, isDisabled, errorMessage } = useComboboxContext()
 
   return (
     <div
@@ -161,7 +146,7 @@ const AriaComboboxTrigger = ({ children, className }: AriaComboboxTriggerProps)
 /**
  * @deprecated
  */
-interface AriaComboboxSearchInputProps {
+interface ComboboxSearchInputProps {
   placeholder?: string
   className?: string
 }
@@ -169,9 +154,9 @@ interface AriaComboboxSearchInputProps {
 /**
  * @deprecated
  */
-const AriaComboboxSearchInput = ({ placeholder, className }: AriaComboboxSearchInputProps) => {
+const ComboboxSearchInput = ({ placeholder, className }: ComboboxSearchInputProps) => {
   const { open, search, setSearch, value, items, isDisabled, setOpen, onChange, isPending } =
-    useAriaComboboxContext()
+    useComboboxContext()
   const inputRef = React.useRef<HTMLInputElement>(null)
   const [selectedText, setSelectedText] = React.useState('')
 
@@ -252,7 +237,7 @@ const AriaComboboxSearchInput = ({ placeholder, className }: AriaComboboxSearchI
 /**
  * @deprecated
  */
-interface AriaComboboxListProps {
+interface ComboboxListProps {
   children: React.ReactNode
   className?: string
 }
@@ -260,8 +245,8 @@ interface AriaComboboxListProps {
 /**
  * @deprecated
  */
-const AriaComboboxList = ({ children, className }: AriaComboboxListProps) => {
-  const { open, setOpen } = useAriaComboboxContext()
+const ComboboxList = ({ children, className }: ComboboxListProps) => {
+  const { open, setOpen } = useComboboxContext()
   const listRef = React.useRef<HTMLDivElement>(null)
 
   // Click outside
@@ -291,21 +276,21 @@ const AriaComboboxList = ({ children, className }: AriaComboboxListProps) => {
 /**
  * @deprecated
  */
-interface AriaComboboxLabelProps {
+interface ComboboxLabelProps {
   children: React.ReactNode
 }
 
 /**
  * @deprecated
  */
-const AriaComboboxLabel = ({ children }: AriaComboboxLabelProps) => {
+const ComboboxLabel = ({ children }: ComboboxLabelProps) => {
   return <span>{children}</span>
 }
 
 /**
  * @deprecated
  */
-interface AriaComboboxOptionProps {
+interface ComboboxOptionProps {
   isSelected?: boolean
   onSelect?: () => void
   children: React.ReactNode
@@ -315,7 +300,7 @@ interface AriaComboboxOptionProps {
 /**
  * @deprecated
  */
-const AriaComboboxOption = ({ isSelected, onSelect, children, value }: AriaComboboxOptionProps) => {
+const ComboboxOption = ({ isSelected, onSelect, children, value }: ComboboxOptionProps) => {
   const {
     items,
     onChange,
@@ -323,7 +308,7 @@ const AriaComboboxOption = ({ isSelected, onSelect, children, value }: AriaCombo
     setSearch,
     value: currentValue,
     deselectable,
-  } = useAriaComboboxContext()
+  } = useComboboxContext()
 
   const handleSelect = () => {
     if (value) {
@@ -369,7 +354,7 @@ const AriaComboboxOption = ({ isSelected, onSelect, children, value }: AriaCombo
 /**
  * @deprecated
  */
-const AriaCombobox = ({
+const Combobox = ({
   className,
   value,
   onChange,
@@ -385,7 +370,7 @@ const AriaCombobox = ({
   isRequired,
   deselectable: _deselectable = false,
   children,
-}: AriaComboboxProps) => {
+}: ComboboxProps) => {
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
   const rootRef = React.useRef<HTMLDivElement>(null)
@@ -395,7 +380,7 @@ const AriaCombobox = ({
     onOpenChange?.(next)
   }
 
-  const contextValue: AriaComboboxContextValue = {
+  const contextValue: ComboboxContextValue = {
     open,
     setOpen: handleOpen,
     search,
@@ -416,7 +401,7 @@ const AriaCombobox = ({
   }
 
   return (
-    <AriaComboboxContext.Provider value={contextValue}>
+    <ComboboxContext.Provider value={contextValue}>
       <div ref={rootRef} className={cn('flex flex-col gap-y-4 group', className)}>
         {label && (
           <Label>
@@ -429,291 +414,16 @@ const AriaCombobox = ({
           <AriaFieldError>{errorMessage}</AriaFieldError>
         </div>
       </div>
-    </AriaComboboxContext.Provider>
-  )
-}
-
-export {
-  AriaCombobox,
-  AriaComboboxLabel,
-  AriaComboboxList,
-  AriaComboboxOption,
-  AriaComboboxSearchInput,
-  AriaComboboxTrigger,
-}
-export type { AriaComboboxItem, AriaComboboxProps }
-
-/**
- *
- * Shadcn component
- *
- */
-
-interface Item {
-  value: string
-  label: string
-}
-
-interface ComboboxContextValue {
-  open: boolean
-  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
-  value: string[]
-  onValueChange: React.Dispatch<React.SetStateAction<string[]>>
-  items: Item[]
-  setItems: React.Dispatch<React.SetStateAction<Item[]>>
-  multipleItems?: boolean
-}
-
-const [_ComboboxProvider, useCombobox] =
-  createRequiredContext<ComboboxContextValue>('Combobox provider')
-
-interface ComboboxProviderProps {
-  children?: React.ReactNode
-  open?: boolean
-  onOpenChange?: React.Dispatch<React.SetStateAction<boolean>>
-  value?: string[]
-  onValueChange?: React.Dispatch<React.SetStateAction<string[]>>
-  items: Item[]
-  multipleItems?: boolean
-}
-
-function ComboboxProvider(props: ComboboxProviderProps) {
-  const [items, setItems] = React.useState<Item[]>(props.items ?? [])
-
-  // typing value
-  const [value, setValue] = useControllableState<string[]>({
-    defaultProp: [''],
-    onChange: props.onValueChange,
-    prop: props.value,
-  })
-
-  // popover state
-  const [open, setOpen] = useControllableState({
-    defaultProp: false,
-    onChange: props.onOpenChange,
-    prop: props.open,
-  })
-
-  return (
-    <_ComboboxProvider
-      value={value}
-      onValueChange={setValue}
-      open={open}
-      onOpenChange={setOpen}
-      items={items}
-      setItems={setItems}
-      multipleItems={props.multipleItems ?? false}
-    >
-      <_ComboboxPopoverProvider>{props.children}</_ComboboxPopoverProvider>
-    </_ComboboxProvider>
-  )
-}
-
-function _ComboboxPopoverProvider(props: { children?: React.ReactNode }) {
-  const ctx = useCombobox()
-  return (
-    <Popover open={ctx.open} onOpenChange={ctx.onOpenChange}>
-      {props.children}
-    </Popover>
-  )
-}
-
-function ComboboxTriggerMultiValue(props: {
-  children?: ((selectedItem: Item[] | undefined) => React.ReactElement) | React.ReactNode
-  className?: string
-}) {
-  const ctx = useCombobox()
-
-  const selectedItems = ctx.items.filter((item) => ctx.value.includes(item.value))
-
-  const onTriggerKeyDown: React.KeyboardEventHandler = (event) => {
-    if (event.key === 'ArrowDown') ctx.onOpenChange(true)
-  }
-
-  const renderItems = React.useMemo(() => {
-    return (
-      <span className="flex flex-wrap flex-1 gap-2 pr-8">
-        {selectedItems.map((selectedItem) => (
-          <Badge
-            onClick={(e) => {
-              e.stopPropagation()
-              ctx.onValueChange((prevItems) =>
-                prevItems.filter((prevItem) => prevItem !== selectedItem.value)
-              )
-            }}
-            shape="square"
-            intent="gray"
-            key={selectedItem.value}
-            className="flex "
-          >
-            {selectedItem.label}
-            <XIcon className="size-5 ml-1" />
-          </Badge>
-        ))}
-      </span>
-    )
-  }, [selectedItems])
-
-  return (
-    <PopoverTrigger
-      asChild
-      onKeyDown={onTriggerKeyDown}
-      className={cn('w-[200px] min-h-18 justify-between flex h-auto relative', props.className)}
-      aria-expanded={ctx.open}
-    >
-      {typeof props.children === 'function' ? (
-        props.children(selectedItems)
-      ) : props.children ? (
-        props.children
-      ) : (
-        <Button variant="outline" role="combobox">
-          {selectedItems.length > 0 ? renderItems : 'Please select item'}
-          <CaretUpDownIcon className="h-8 w-8 shrink-0 opacity-50 absolute right-4 inset-y-0 my-auto" />
-        </Button>
-      )}
-    </PopoverTrigger>
-  )
-}
-
-function ComboboxTrigger(props: {
-  children?: ((selectedItem: Item | undefined) => React.ReactElement) | React.ReactNode
-  className?: string
-}) {
-  const ctx = useCombobox()
-
-  if (ctx.multipleItems) {
-    throw new Error(
-      'Please use `MultipleValueComboboxTrigger` component for mange multi value selection, this will make component maintenance more easier'
-    )
-  }
-
-  const selectedItem = ctx.items.find((item) => ctx.value.includes(item.value))
-
-  const onTriggerKeyDown: React.KeyboardEventHandler = (event) => {
-    if (event.key === 'ArrowDown') ctx.onOpenChange(true)
-  }
-
-  return (
-    <PopoverTrigger
-      asChild
-      onKeyDown={onTriggerKeyDown}
-      className={cn('w-[200px] justify-between', props.className)}
-      aria-expanded={ctx.open}
-    >
-      {typeof props.children === 'function' ? (
-        props.children(selectedItem)
-      ) : props.children ? (
-        props.children
-      ) : (
-        <Button variant="outline" role="combobox">
-          {selectedItem?.label || 'Please select item'}
-          <CaretUpDownIcon className="ml-4 h-8 w-8 shrink-0 opacity-50" />
-        </Button>
-      )}
-    </PopoverTrigger>
-  )
-}
-
-function ComboboxCommandInput() {
-  return <CommandInput placeholder="Search framework..." />
-}
-
-function ComboboxContent({
-  children,
-  className,
-  ...props
-}: { children?: React.ReactNode; className?: string } & React.ComponentPropsWithRef<
-  typeof PopoverContent
->) {
-  return (
-    <Command loop className="w-fit">
-      <PopoverContent
-        className={cn('w-(--radix-popover-trigger-width) bg-background p-0', className)}
-        {...props}
-      >
-        {children}
-      </PopoverContent>
-    </Command>
-  )
-}
-
-function ComboboxCommandEmpty({
-  children,
-  className,
-  ...props
-}: { children?: React.ReactNode } & React.ComponentPropsWithRef<typeof CommandEmpty>) {
-  return (
-    <CommandEmpty className={cn('text-muted-foreground', className)} {...props}>
-      {children || 'No framework found'}
-    </CommandEmpty>
-  )
-}
-
-function ComboboxCommandList({
-  children,
-  ...props
-}: { children?: React.ReactNode } & React.ComponentPropsWithRef<typeof CommandList>) {
-  return <CommandList {...props}>{children}</CommandList>
-}
-
-function ComboboxCommandGroup({
-  children: Children,
-  ...props
-}: {
-  children: React.FC<{ items: Item[] }>
-} & Omit<React.ComponentPropsWithRef<typeof CommandGroup>, 'children'>) {
-  const ctx = useCombobox()
-  return (
-    <CommandGroup {...props}>
-      <Children items={ctx.items} />
-    </CommandGroup>
-  )
-}
-
-function ComboboxCommandItem({
-  value,
-  label,
-  ...props
-}: { children?: React.ReactNode; value: string; label: string } & React.ComponentPropsWithRef<
-  typeof CommandItem
->) {
-  const ctx = useCombobox()
-
-  const isValueExistedBefore = ctx.value.some((existedValue) => existedValue === value)
-
-  const onSelect = () => {
-    ctx.onValueChange((prevItems) => {
-      if (ctx.multipleItems) {
-        return isValueExistedBefore
-          ? prevItems.filter((prevItem) => prevItem !== value)
-          : [...prevItems, value]
-      }
-
-      return isValueExistedBefore ? [] : [value]
-    })
-
-    !ctx.multipleItems && ctx.onOpenChange(false)
-  }
-
-  return (
-    <CommandItem id={value} value={value} onSelect={onSelect} {...props}>
-      <CheckIcon
-        className={cn('mr-4 h-8 w-8', isValueExistedBefore ? 'opacity-100' : 'opacity-0')}
-      />
-      {label}
-    </CommandItem>
+    </ComboboxContext.Provider>
   )
 }
 
 export {
-  ComboboxCommandEmpty,
-  ComboboxCommandGroup,
-  ComboboxCommandInput,
-  ComboboxCommandItem,
-  ComboboxCommandList,
-  ComboboxContent,
-  ComboboxProvider,
+  Combobox,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxOption,
+  ComboboxSearchInput,
   ComboboxTrigger,
-  ComboboxTriggerMultiValue,
-  useCombobox,
 }
+export type { ComboboxItem, ComboboxProps }
diff --git a/packages/react/src/react/components/primitives/date-picker.tsx b/packages/react/src/react/components/primitives/date-picker.tsx
index f8bdf25c..575f1c80 100644
--- a/packages/react/src/react/components/primitives/date-picker.tsx
+++ b/packages/react/src/react/components/primitives/date-picker.tsx
@@ -15,11 +15,11 @@ import { twJoin } from 'tailwind-merge'
 
 import type { DateDuration } from '@internationalized/date'
 
-import { AriaButton } from './button'
+import { Button } from './button'
 import { Calendar } from './calendar'
 import { DateInput } from './date-field'
 import { AriaDescription, AriaFieldError, AriaFieldGroup, AriaLabel } from './field'
-import { AriaPopoverClose, AriaPopoverContent } from './popover'
+import { PopoverClose, PopoverContent } from './popover'
 import { composeTailwindRenderProps } from './primitive'
 import { RangeCalendar } from './range-calendar'
 
@@ -44,7 +44,7 @@ const DatePickerOverlay = ({
   ...props
 }: DatePickerOverlayProps) => {
   return (
-    <AriaPopoverContent
+    <PopoverContent
       isDismissable={false}
       showArrow={false}
       className={twJoin(
@@ -60,23 +60,23 @@ const DatePickerOverlay = ({
       )}
       {closeButton && (
         <div className="mx-auto flex w-full max-w-[inherit] justify-center py-8 sm:hidden">
-          <AriaPopoverClose variant="outline" size="md" className="w-full">
+          <PopoverClose variant="outline" size="md" className="w-full">
             Close
-          </AriaPopoverClose>
+          </PopoverClose>
         </div>
       )}
-    </AriaPopoverContent>
+    </PopoverContent>
   )
 }
 
 const DatePickerIcon = () => (
-  <AriaButton
+  <Button
     size="md"
     variant="vanish"
     className="-translate-x-2 rounded-full outline-offset-0 hover:bg-transparent pressed:bg-transparent **:data-[slot=icon]:text-muted-fg"
   >
     <BaseIcon icon={CalendarDotsIcon} weight="duotone" className="group-open:text-fg" aria-hidden />
-  </AriaButton>
+  </Button>
 )
 
 interface DatePickerProps<T extends DateValue> extends DatePickerPrimitiveProps<T> {
diff --git a/packages/react/src/react/components/primitives/dialog.tsx b/packages/react/src/react/components/primitives/dialog.tsx
index d48db9b7..6334e521 100644
--- a/packages/react/src/react/components/primitives/dialog.tsx
+++ b/packages/react/src/react/components/primitives/dialog.tsx
@@ -5,21 +5,19 @@ import { forwardRef, useEffect, useRef } from 'react'
 import type { HeadingProps as AriaHeadingProps } from 'react-aria-components'
 import {
   Button as AriaButtonPrimitive,
-  Dialog as AriaDialogPrimitive,
+  Dialog as DialogPrimitive,
   Heading,
   Text,
 } from 'react-aria-components'
 
 import { XIcon } from '@phosphor-icons/react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { twJoin, twMerge } from 'tailwind-merge'
 
-import { AriaButton, type AriaButtonProps } from './button'
+import { Button, type ButtonProps } from './button'
 import { composeTailwindRenderProps } from './primitive'
 
 import { BaseIcon } from '../../components/primitives/base-icon'
 import { useMediaQuery } from '../../hooks/use-media-query'
-import { cn } from '../../utils/cn'
 
 /**
  *
@@ -30,13 +28,13 @@ import { cn } from '../../utils/cn'
 /**
  * @deprecated
  */
-const AriaDialog = ({
+const Dialog = ({
   role = 'dialog',
   className,
   ...props
-}: React.ComponentProps<typeof AriaDialogPrimitive>) => {
+}: React.ComponentProps<typeof DialogPrimitive>) => {
   return (
-    <AriaDialogPrimitive
+    <DialogPrimitive
       role={role}
       className={twMerge(
         'peer/dialog group/dialog outline-hidden relative flex max-h-[inherit] flex-col overflow-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5',
@@ -49,18 +47,18 @@ const AriaDialog = ({
 /**
  * @deprecated
  */
-const AriaDialogTrigger = (props: AriaButtonProps) => <AriaButton {...props} />
+const DialogTrigger = (props: ButtonProps) => <Button {...props} />
 /**
  * @deprecated
  */
-type AriaDialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
   title?: string
   description?: string
 }
 /**
  * @deprecated
  */
-const AriaDialogHeader = ({ className, ...props }: AriaDialogHeaderProps) => {
+const DialogHeader = ({ className, ...props }: DialogHeaderProps) => {
   const headerRef = useRef<HTMLHeadingElement>(null)
 
   useEffect(() => {
@@ -91,12 +89,12 @@ const AriaDialogHeader = ({ className, ...props }: AriaDialogHeaderProps) => {
         className
       )}
     >
-      {props.title && <AriaDialogTitle>{props.title}</AriaDialogTitle>}
-      {props.description && <AriaDialogDescription>{props.description}</AriaDialogDescription>}
+      {props.title && <DialogTitle>{props.title}</DialogTitle>}
+      {props.description && <DialogDescription>{props.description}</DialogDescription>}
       {!props.title && typeof props.children === 'string' ? (
-        <AriaDialogTitle {...props}>
+        <DialogTitle {...props}>
           <>{props.children}</>
-        </AriaDialogTitle>
+        </DialogTitle>
       ) : (
         <>{props.children}</>
       )}
@@ -106,14 +104,14 @@ const AriaDialogHeader = ({ className, ...props }: AriaDialogHeaderProps) => {
 /**
  * @deprecated
  */
-interface AriaDialogTitleProps extends Omit<AriaHeadingProps, 'level'> {
+interface DialogTitleProps extends Omit<AriaHeadingProps, 'level'> {
   level?: 1 | 2 | 3 | 4
   ref?: React.Ref<HTMLHeadingElement>
 }
 /**
  * @deprecated
  */
-const AriaDialogTitle = forwardRef<HTMLHeadingElement, AriaDialogTitleProps>(function Title(
+const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(function Title(
   { level = 3, className, ...props },
   ref
 ) {
@@ -139,34 +137,35 @@ const AriaDialogTitle = forwardRef<HTMLHeadingElement, AriaDialogTitleProps>(fun
 /**
  * @deprecated
  */
-type AriaDialogDescriptionProps = React.ComponentProps<'div'>
+type DialogDescriptionProps = React.ComponentProps<'div'>
 /**
  * @deprecated
  */
-const AriaDialogDescription = forwardRef<HTMLElement, AriaDialogDescriptionProps>(
-  function Description({ className, ...props }, ref) {
-    return (
-      <Text
-        slot="description"
-        className={twMerge('text-muted-fg text-sm', className)}
-        ref={ref}
-        {...props}
-      >
-        <>{props.children}</>
-      </Text>
-    )
-  }
-)
+const DialogDescription = forwardRef<HTMLElement, DialogDescriptionProps>(function Description(
+  { className, ...props },
+  ref
+) {
+  return (
+    <Text
+      slot="description"
+      className={twMerge('text-muted-fg text-sm', className)}
+      ref={ref}
+      {...props}
+    >
+      <>{props.children}</>
+    </Text>
+  )
+})
 
 /**
  * @deprecated
  */
-type AriaDialogBodyProps = React.ComponentProps<'div'>
+type DialogBodyProps = React.ComponentProps<'div'>
 
 /**
  * @deprecated
  */
-const AriaDialogBody = ({ className, ref, ...props }: AriaDialogBodyProps) => (
+const DialogBody = ({ className, ref, ...props }: DialogBodyProps) => (
   <div
     data-slot="dialog-body"
     ref={ref}
@@ -180,11 +179,11 @@ const AriaDialogBody = ({ className, ref, ...props }: AriaDialogBodyProps) => (
 /**
  * @deprecated
  */
-type AriaDialogFooterProps = React.ComponentProps<'div'>
+type DialogFooterProps = React.ComponentProps<'div'>
 /**
  * @deprecated
  */
-const AriaDialogFooter = ({ className, ...props }: AriaDialogFooterProps) => {
+const DialogFooter = ({ className, ...props }: DialogFooterProps) => {
   const footerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -224,26 +223,19 @@ const AriaDialogFooter = ({ className, ...props }: AriaDialogFooterProps) => {
 /**
  * @deprecated
  */
-const AriaDialogClose = forwardRef<HTMLButtonElement, AriaButtonProps>(function Close(
+const DialogClose = forwardRef<HTMLButtonElement, ButtonProps>(function Close(
   { className, size = 'md', variant = 'vanish', ...props },
   ref
 ) {
   return (
-    <AriaButton
-      slot="close"
-      className={className}
-      ref={ref}
-      size={size}
-      variant={variant}
-      {...props}
-    />
+    <Button slot="close" className={className} ref={ref} size={size} variant={variant} {...props} />
   )
 })
 
 /**
  * @deprecated
  */
-interface AriaCloseButtonIndicatorProps extends Omit<AriaButtonProps, 'children'> {
+interface CloseButtonIndicatorProps extends Omit<ButtonProps, 'children'> {
   className?: string
   isDismissable?: boolean | undefined
 }
@@ -251,7 +243,7 @@ interface AriaCloseButtonIndicatorProps extends Omit<AriaButtonProps, 'children'
 /**
  * @deprecated
  */
-const AriaDialogCloseIndicator = ({ className, ...props }: AriaCloseButtonIndicatorProps) => {
+const DialogCloseIndicator = ({ className, ...props }: CloseButtonIndicatorProps) => {
   const isMobile = useMediaQuery('(max-width: 600px)')
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -279,7 +271,7 @@ const AriaDialogCloseIndicator = ({ className, ...props }: AriaCloseButtonIndica
 /**
  * @deprecated
  */
-const AriaDialogCloseIcon = ({ className, ...props }: AriaCloseButtonIndicatorProps) => {
+const DialogCloseIcon = ({ className, ...props }: CloseButtonIndicatorProps) => {
   const isMobile = useMediaQuery('(max-width: 600px)')
   const buttonRef = useRef<HTMLButtonElement>(null)
 
@@ -289,7 +281,7 @@ const AriaDialogCloseIcon = ({ className, ...props }: AriaCloseButtonIndicatorPr
     }
   }, [isMobile])
   return props.isDismissable ? (
-    <AriaButton
+    <Button
       ref={buttonRef}
       {...(isMobile ? { autoFocus: true } : {})}
       aria-label="Close"
@@ -301,155 +293,28 @@ const AriaDialogCloseIcon = ({ className, ...props }: AriaCloseButtonIndicatorPr
       {...props}
     >
       <BaseIcon icon={XIcon} size="sm" weight="bold" />
-    </AriaButton>
+    </Button>
   ) : null
 }
 
 export type {
-  AriaCloseButtonIndicatorProps,
-  AriaDialogBodyProps,
-  AriaDialogDescriptionProps,
-  AriaDialogFooterProps,
-  AriaDialogHeaderProps,
-  AriaDialogTitleProps,
-}
-
-export {
-  AriaDialog,
-  AriaDialogBody,
-  AriaDialogClose,
-  AriaDialogCloseIcon,
-  AriaDialogCloseIndicator,
-  AriaDialogDescription,
-  AriaDialogFooter,
-  AriaDialogHeader,
-  AriaDialogTitle,
-  AriaDialogTrigger,
-}
-
-/**
- *
- * Shadcn component
- *
- */
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-8 rounded-lg border p-12 shadow-lg duration-200 sm:max-w-lg',
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-4 focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn('flex flex-col gap-4 text-center sm:text-left', className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn('flex flex-col-reverse gap-4 sm:flex-row sm:justify-end', className)}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  )
+  CloseButtonIndicatorProps,
+  DialogBodyProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogTitleProps,
 }
 
 export {
   Dialog,
+  DialogBody,
   DialogClose,
-  DialogContent,
+  DialogCloseIcon,
+  DialogCloseIndicator,
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogOverlay,
-  DialogPortal,
   DialogTitle,
   DialogTrigger,
 }
diff --git a/packages/react/src/react/components/primitives/form.tsx b/packages/react/src/react/components/primitives/form.tsx
index 045ceb1b..b4938905 100644
--- a/packages/react/src/react/components/primitives/form.tsx
+++ b/packages/react/src/react/components/primitives/form.tsx
@@ -31,8 +31,7 @@ import {
 import { Slot } from '@radix-ui/react-slot'
 import { deepmerge } from 'deepmerge-ts'
 
-import type { AriaButtonProps } from './button'
-import { AriaButton } from './button'
+import { Button, type ButtonProps } from './button'
 
 import { cn } from '../../utils/cn'
 
@@ -301,7 +300,7 @@ function FormFieldValue<
   return props.render(value)
 }
 
-export interface FormSubmitButtonProps extends AriaButtonProps {
+export interface FormSubmitButtonProps extends ButtonProps {
   isLoading?: boolean
   isError?: boolean
   // TODO: implement icons
@@ -337,7 +336,7 @@ export const FormSubmitButton = React.forwardRef<HTMLButtonElement, FormSubmitBu
     //     ? loadingIconElement
     //     : rightIcon && <FontAwesomeIcon icon={rightIcon} />
     return (
-      <AriaButton
+      <Button
         type="submit"
         ref={ref}
         // disabled={isLoading || disabled}
@@ -347,7 +346,7 @@ export const FormSubmitButton = React.forwardRef<HTMLButtonElement, FormSubmitBu
         {/* {leftIconElement} */}
         {children}
         {/* {rightIconElement} */}
-      </AriaButton>
+      </Button>
     )
   }
 )
diff --git a/packages/react/src/react/components/primitives/index.ts b/packages/react/src/react/components/primitives/index.ts
index b10f0e06..fac291f7 100644
--- a/packages/react/src/react/components/primitives/index.ts
+++ b/packages/react/src/react/components/primitives/index.ts
@@ -1,3 +1,4 @@
+export * from '../../../../v2/components/primitives/input-group'
 export * from './annotation'
 export * from './avatar'
 export * from './badge'
@@ -23,10 +24,8 @@ export * from './drop-zone'
 export * from './dropdown'
 export * from './field'
 export * from './form'
-export * from './input-group'
 export * from './input-otp'
 export * from './keyboard'
-export * from './label'
 export * from './link'
 export * from './list-box'
 export * from './loader'
diff --git a/packages/react/src/react/components/primitives/link.tsx b/packages/react/src/react/components/primitives/link.tsx
index 7422599e..af79c74b 100644
--- a/packages/react/src/react/components/primitives/link.tsx
+++ b/packages/react/src/react/components/primitives/link.tsx
@@ -2,7 +2,6 @@
 
 import { Link as LinkPrimitive, type LinkProps as LinkPrimitiveProps } from 'react-aria-components'
 
-import { cva } from 'class-variance-authority'
 import { twJoin } from 'tailwind-merge'
 
 import { composeTailwindRenderProps } from './primitive'
@@ -10,7 +9,7 @@ import { composeTailwindRenderProps } from './primitive'
 /**
  * @deprecated
  */
-interface AriaLinkProps extends LinkPrimitiveProps {
+interface LinkProps extends LinkPrimitiveProps {
   intent?: 'primary' | 'secondary' | 'unstyled'
   ref?: React.RefObject<HTMLAnchorElement>
 }
@@ -19,7 +18,7 @@ interface AriaLinkProps extends LinkPrimitiveProps {
  * @deprecated
  * Use anchor tag instead
  */
-const AriaLink = ({ className, ref, intent = 'unstyled', ...props }: AriaLinkProps) => {
+const Link = ({ className, ref, intent = 'unstyled', ...props }: LinkProps) => {
   return (
     <LinkPrimitive
       ref={ref}
@@ -42,23 +41,4 @@ const AriaLink = ({ className, ref, intent = 'unstyled', ...props }: AriaLinkPro
   )
 }
 
-export type { AriaLinkProps }
-export { AriaLink }
-
-export const linkVariants = cva('text-sm font-medium text-primary', {
-  variants: {
-    variant: {
-      plain: null,
-      underline: 'underline-offset-4 hover:underline hover:border-0',
-    },
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-    },
-  },
-  defaultVariants: {
-    variant: 'underline',
-    size: 'sm',
-  },
-})
+export { Link, type LinkProps }
diff --git a/packages/react/src/react/components/primitives/menu.tsx b/packages/react/src/react/components/primitives/menu.tsx
index 76f949aa..04c37025 100644
--- a/packages/react/src/react/components/primitives/menu.tsx
+++ b/packages/react/src/react/components/primitives/menu.tsx
@@ -33,7 +33,7 @@ import {
   dropdownSectionStyles,
   DropdownSeparator,
 } from './dropdown'
-import { AriaPopoverContent } from './popover'
+import { PopoverContent } from './popover'
 import { composeTailwindRenderProps } from './primitive'
 
 interface MenuContextProps {
@@ -109,7 +109,7 @@ const MenuContent = <T extends object>({
   const { respectScreen: respectScreenContext } = use(MenuContext)
   const respectScreenInternal = respectScreen ?? respectScreenContext
   return (
-    <AriaPopoverContent
+    <PopoverContent
       isOpen={props.isOpen}
       onOpenChange={props.onOpenChange}
       shouldFlip={props.shouldFlip}
@@ -122,7 +122,7 @@ const MenuContent = <T extends object>({
       arrowBoundaryOffset={props.arrowBoundaryOffset}
       className={composeTailwindRenderProps(
         popoverClassName,
-        'shadow-xs outline-hidden z-50 min-w-44 rounded-lg p-0 sm:pb-0'
+        'shadow-xs outline-hidden z-50 min-w-44 rounded-lg p-0 sm:pb-0 bg-bg'
       )}
     >
       <MenuPrimitive
@@ -133,7 +133,7 @@ const MenuContent = <T extends object>({
         )}
         {...props}
       />
-    </AriaPopoverContent>
+    </PopoverContent>
   )
 }
 
diff --git a/packages/react/src/react/components/primitives/modal.tsx b/packages/react/src/react/components/primitives/modal.tsx
index 021c4dda..5d87a82d 100644
--- a/packages/react/src/react/components/primitives/modal.tsx
+++ b/packages/react/src/react/components/primitives/modal.tsx
@@ -12,30 +12,30 @@ import {
 import { tv, type VariantProps } from 'tailwind-variants'
 
 import {
-  AriaDialog,
-  AriaDialogBody,
-  AriaDialogClose,
-  AriaDialogCloseIcon,
-  AriaDialogDescription,
-  type AriaDialogDescriptionProps,
-  AriaDialogFooter,
-  AriaDialogHeader,
-  AriaDialogTitle,
-  type AriaDialogTitleProps,
-  AriaDialogTrigger,
+  Dialog,
+  DialogBody as DialogBody,
+  DialogClose as DialogClose,
+  DialogCloseIcon,
+  DialogDescription,
+  type DialogDescriptionProps,
+  DialogFooter as DialogFooter,
+  DialogHeader as DialogHeader,
+  DialogTitle,
+  type DialogTitleProps,
+  DialogTrigger as DialogTrigger,
 } from './dialog'
 
 /**
  * @deprecated
  */
-const AriaModal = (props: DialogTriggerProps) => {
+const Modal = (props: DialogTriggerProps) => {
   return <DialogTriggerPrimitive {...props} />
 }
 
 /**
  * @deprecated
  */
-const ariaModalOverlayStyles = tv({
+const ModalOverlayStyles = tv({
   base: [
     'fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full',
     'flex items-end justify-end bg-fg/15 text-center sm:block dark:bg-bg/40',
@@ -57,7 +57,7 @@ const ariaModalOverlayStyles = tv({
 /**
  * @deprecated
  */
-const ariaModalContentStyles = tv({
+const ModalContentStyles = tv({
   base: [
     'max-h-full w-full rounded-t-2xl bg-white text-left align-middle text-overlay-fg shadow-lg ring-1 ring-fg/5 border border-bluegray-300',
     'overflow-hidden sm:rounded-2xl dark:ring-border',
@@ -95,10 +95,10 @@ const ariaModalContentStyles = tv({
 /**
  * @deprecated
  */
-interface AriaModalContentProps
+interface ModalContentProps
   extends Omit<ModalOverlayProps, 'className' | 'children'>,
     Pick<DialogProps, 'aria-label' | 'aria-labelledby' | 'role' | 'children'>,
-    VariantProps<typeof ariaModalContentStyles> {
+    VariantProps<typeof ModalContentStyles> {
   closeButton?: boolean
   isBlurred?: boolean
   classNames?: {
@@ -110,7 +110,7 @@ interface AriaModalContentProps
 /**
  * @deprecated
  */
-const AriaModalContent = ({
+const ModalContent = ({
   classNames,
   isDismissable: isDismissableInternal,
   isBlurred = false,
@@ -119,7 +119,7 @@ const AriaModalContent = ({
   role = 'dialog',
   closeButton = true,
   ...props
-}: AriaModalContentProps) => {
+}: ModalContentProps) => {
   const isDismissable = isDismissableInternal ?? role !== 'alertdialog'
   const modalPrimiveiRef = useRef<HTMLDivElement>(null)
   const [shakeFlag, setShakeFlag] = useState(false)
@@ -156,7 +156,7 @@ const AriaModalContent = ({
         data-overlay
         isDismissable={isDismissable}
         className={composeRenderProps(classNames?.overlay, (className, renderProps) =>
-          ariaModalOverlayStyles({
+          ModalOverlayStyles({
             ...renderProps,
             isBlurred,
             className,
@@ -168,7 +168,7 @@ const AriaModalContent = ({
           ref={modalPrimiveiRef}
           isDismissable={isDismissable}
           className={composeRenderProps(classNames?.content, (className, renderProps) =>
-            ariaModalContentStyles({
+            ModalContentStyles({
               ...renderProps,
               size,
               className,
@@ -176,16 +176,16 @@ const AriaModalContent = ({
           )}
           {...props}
         >
-          <AriaDialog role={role}>
+          <Dialog role={role}>
             {(values) => (
               <>
                 {typeof children === 'function' ? children(values) : children}
                 {closeButton && (
-                  <AriaDialogCloseIcon size="md" variant="ghost" isDismissable={isDismissable} />
+                  <DialogCloseIcon size="md" variant="ghost" isDismissable={isDismissable} />
                 )}
               </>
             )}
-          </AriaDialog>
+          </Dialog>
         </ModalPrimitive>
       </ModalOverlay>
     </div>
@@ -195,29 +195,29 @@ const AriaModalContent = ({
 /**
  * @deprecated
  */
-const AriaModalTitle = forwardRef<HTMLHeadingElement, AriaDialogTitleProps>(
+const ModalTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   function ModalTitle(props, ref) {
-    return <AriaDialogTitle ref={ref} className="text-bluegray-800" {...props} />
+    return <DialogTitle ref={ref} className="text-bluegray-800" {...props} />
   }
 )
 
 /**
  * @deprecated
  */
-const AriaModalDescription = forwardRef<HTMLDivElement, AriaDialogDescriptionProps>(
+const ModalDescription = forwardRef<HTMLDivElement, DialogDescriptionProps>(
   function ModalDescription(props, ref) {
-    return <AriaDialogDescription ref={ref} className="text-text-secondary" {...props} />
+    return <DialogDescription ref={ref} className="text-text-secondary" {...props} />
   }
 )
 
 export {
-  AriaModal,
-  AriaDialogBody as AriaModalBody,
-  AriaDialogClose as AriaModalClose,
-  AriaModalContent,
-  AriaModalDescription,
-  AriaDialogFooter as AriaModalFooter,
-  AriaDialogHeader as AriaModalHeader,
-  AriaModalTitle,
-  AriaDialogTrigger as AriaModalTrigger,
+  Modal,
+  DialogBody as ModalBody,
+  DialogClose as ModalClose,
+  ModalContent,
+  ModalDescription,
+  DialogFooter as ModalFooter,
+  DialogHeader as ModalHeader,
+  ModalTitle,
+  DialogTrigger as ModalTrigger,
 }
diff --git a/packages/react/src/react/components/primitives/multiple-select.tsx b/packages/react/src/react/components/primitives/multiple-select.tsx
index 07f6a598..cb6dfb39 100644
--- a/packages/react/src/react/components/primitives/multiple-select.tsx
+++ b/packages/react/src/react/components/primitives/multiple-select.tsx
@@ -18,7 +18,7 @@ import { twMerge } from 'tailwind-merge'
 import { DropdownItem, DropdownLabel, DropdownSection } from './dropdown'
 import { AriaDescription, AriaFieldGroup, type AriaFieldProps, AriaInput, AriaLabel } from './field'
 import { ListBox } from './list-box'
-import { AriaPopoverContent } from './popover'
+import { PopoverContent } from './popover'
 import { composeTailwindRenderProps } from './primitive'
 import { type RestrictedIntent, Tag, TagGroup, type TagGroupProps, TagList } from './tag-group'
 
@@ -197,7 +197,7 @@ const MultipleSelect = <T extends object>({
                   />
                 </Button>
               </div>
-              <AriaPopoverContent
+              <PopoverContent
                 showArrow={false}
                 respectScreen={false}
                 triggerRef={triggerRef}
@@ -238,7 +238,7 @@ const MultipleSelect = <T extends object>({
                     </MultipleSelectItem>
                   )) ?? children}
                 </ListBox>
-              </AriaPopoverContent>
+              </PopoverContent>
             </ComboBox>
           </AriaFieldGroup>
           {props.description && <AriaDescription>{props.description}</AriaDescription>}
diff --git a/packages/react/src/react/components/primitives/popover.tsx b/packages/react/src/react/components/primitives/popover.tsx
index 120e5f17..a835d49e 100644
--- a/packages/react/src/react/components/primitives/popover.tsx
+++ b/packages/react/src/react/components/primitives/popover.tsx
@@ -9,37 +9,35 @@ import type {
 } from 'react-aria-components'
 import {
   composeRenderProps,
-  DialogTrigger as AriaDialogTrigger,
+  DialogTrigger as DialogTrigger,
   Modal,
   ModalOverlay,
   OverlayArrow,
-  Popover as AriaPopoverPrimitive,
+  Popover as PopoverPrimitive,
   PopoverContext,
   useSlottedContext,
 } from 'react-aria-components'
 
-import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { twMerge } from 'tailwind-merge'
 import { tv } from 'tailwind-variants'
 
 import type {
-  AriaDialogBodyProps,
-  AriaDialogFooterProps,
-  AriaDialogHeaderProps,
-  AriaDialogTitleProps,
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogTitleProps,
 } from './dialog'
 import {
-  AriaDialog,
-  AriaDialogBody,
-  AriaDialogClose,
-  AriaDialogDescription,
-  AriaDialogFooter,
-  AriaDialogHeader,
-  AriaDialogTitle,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from './dialog'
 
 import { useMediaQuery } from '../../hooks/use-media-query'
-import { cn } from '../../utils/cn'
 
 /**
  *
@@ -50,45 +48,45 @@ import { cn } from '../../utils/cn'
 /**
  * @deprecated
  */
-interface AriaPopoverProps extends DialogTriggerProps {}
+interface PopoverProps extends DialogTriggerProps {}
 
 /**
  * @deprecated
  */
-const AriaPopover = (props: AriaPopoverProps) => {
-  return <AriaDialogTrigger {...props} />
+const Popover = (props: PopoverProps) => {
+  return <DialogTrigger {...props} />
 }
 
 /**
  * @deprecated
  */
-const AriaPopoverTitle = React.forwardRef<HTMLHeadingElement, AriaDialogTitleProps>(
+const PopoverTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ className, ...props }, ref) => (
-    <AriaDialogTitle ref={ref} className={twMerge('sm:leading-none', className)} {...props} />
+    <DialogTitle ref={ref} className={twMerge('sm:leading-none', className)} {...props} />
   )
 )
-AriaPopoverTitle.displayName = 'PopoverTitle'
+PopoverTitle.displayName = 'PopoverTitle'
 
 /**
  * @deprecated
  */
-const AriaPopoverHeader = ({ className, ...props }: AriaDialogHeaderProps) => (
-  <AriaDialogHeader className={twMerge('sm:p-4', className)} {...props} />
+const PopoverHeader = ({ className, ...props }: DialogHeaderProps) => (
+  <DialogHeader className={twMerge('sm:p-4', className)} {...props} />
 )
 
 /**
  * @deprecated
  */
-const AriaPopoverFooter = ({ className, ...props }: AriaDialogFooterProps) => (
-  <AriaDialogFooter className={twMerge('sm:p-4', className)} {...props} />
+const PopoverFooter = ({ className, ...props }: DialogFooterProps) => (
+  <DialogFooter className={twMerge('sm:p-4', className)} {...props} />
 )
 
 /**
  * @deprecated
  */
-const AriaPopoverBody = ({ className, ref, ...props }: AriaDialogBodyProps) => (
+const PopoverBody = ({ className, ref, ...props }: DialogBodyProps) => (
   // TODO: Fix type error with ref
-  <AriaDialogBody ref={ref as any} className={twMerge('sm:px-4 sm:pt-2', className)} {...props} />
+  <DialogBody ref={ref as any} className={twMerge('sm:px-4 sm:pt-2', className)} {...props} />
 )
 
 /**
@@ -150,7 +148,7 @@ const drawer = tv({
 /**
  * @deprecated
  */
-interface AriaPopoverContentProps
+interface PopoverContentProps
   extends Omit<PopoverPrimitiveProps, 'children' | 'className'>,
     Omit<ModalOverlayProps, 'className' | 'children'>,
     Pick<DialogProps, 'aria-label' | 'aria-labelledby'> {
@@ -164,13 +162,13 @@ interface AriaPopoverContentProps
 /**
  * @deprecated
  */
-const AriaPopoverContent = ({
+const PopoverContent = ({
   respectScreen = true,
   children,
   showArrow = true,
   className,
   ...props
-}: AriaPopoverContentProps) => {
+}: PopoverContentProps) => {
   const isMobile = useMediaQuery('(max-width: 600px)')
   const popoverContext = useSlottedContext(PopoverContext)!
   const isMenuTrigger = popoverContext?.trigger === 'MenuTrigger'
@@ -190,13 +188,13 @@ const AriaPopoverContent = ({
           drawer({ ...renderProps, isMenu, className })
         )}
       >
-        <AriaDialog role="dialog" aria-label={props['aria-label'] ?? 'List item'}>
+        <Dialog role="dialog" aria-label={props['aria-label'] ?? 'List item'}>
           <>{children}</>
-        </AriaDialog>
+        </Dialog>
       </Modal>
     </ModalOverlay>
   ) : (
-    <AriaPopoverPrimitive
+    <PopoverPrimitive
       offset={effectiveOffset}
       className={composeRenderProps(className, (className, renderProps) =>
         content({
@@ -219,80 +217,38 @@ const AriaPopoverContent = ({
         </OverlayArrow>
       )}
       {!isComboBoxTrigger ? (
-        <AriaDialog role="dialog" aria-label={props['aria-label'] ?? 'List item'}>
+        <Dialog role="dialog" aria-label={props['aria-label'] ?? 'List item'}>
           <> {children}</>
-        </AriaDialog>
+        </Dialog>
       ) : (
         <> {children}</>
       )}
-    </AriaPopoverPrimitive>
+    </PopoverPrimitive>
   )
 }
 
 /**
  * @deprecated
  */
-const AriaPopoverTrigger = AriaDialogTrigger
+const PopoverTrigger = DialogTrigger
 /**
  * @deprecated
  */
-const AriaPopoverClose = AriaDialogClose
+const PopoverClose = DialogClose
 /**
  * @deprecated
  */
-const AriaPopoverDescription = AriaDialogDescription
+const PopoverDescription = DialogDescription
 
-export type { AriaPopoverContentProps, AriaPopoverProps }
+export type { PopoverContentProps, PopoverProps }
 export {
-  AriaPopover,
-  AriaPopoverBody,
-  AriaPopoverClose,
-  AriaPopoverContent,
-  AriaPopoverDescription,
-  AriaPopoverFooter,
-  AriaPopoverHeader,
-  AriaPopoverTitle,
-  AriaPopoverTrigger,
+  Popover,
+  PopoverBody,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
 }
-
-/**
- *
- * Shadcn component
- *
- */
-
-function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-144 origin-(--radix-popover-content-transform-origin) rounded-md border p-8 shadow-md outline-hidden',
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }
diff --git a/packages/react/src/react/components/primitives/select.tsx b/packages/react/src/react/components/primitives/select.tsx
index c4c8a46d..08e2f68a 100644
--- a/packages/react/src/react/components/primitives/select.tsx
+++ b/packages/react/src/react/components/primitives/select.tsx
@@ -25,7 +25,7 @@ import {
 } from './dropdown'
 import { AriaDescription, AriaFieldError, AriaLabel } from './field'
 import { ListBox } from './list-box'
-import { AriaPopoverContent, type AriaPopoverContentProps } from './popover'
+import { PopoverContent, type PopoverContentProps } from './popover'
 import { composeTailwindRenderProps, focusStyles } from './primitive'
 
 import { BaseIcon } from '../../components/primitives/base-icon'
@@ -85,7 +85,7 @@ interface SelectListProps<T extends object>
   extends Omit<ListBoxProps<T>, 'layout' | 'orientation'>,
     Pick<PopoverProps, 'placement'> {
   items?: Iterable<T>
-  popoverClassName?: AriaPopoverContentProps['className']
+  popoverClassName?: PopoverContentProps['className']
 }
 
 const SelectList = <T extends object>({
@@ -96,7 +96,7 @@ const SelectList = <T extends object>({
   ...props
 }: SelectListProps<T>) => {
   return (
-    <AriaPopoverContent
+    <PopoverContent
       showArrow={false}
       respectScreen={false}
       className={composeTailwindRenderProps(
@@ -117,7 +117,7 @@ const SelectList = <T extends object>({
       >
         {children}
       </ListBox>
-    </AriaPopoverContent>
+    </PopoverContent>
   )
 }
 
diff --git a/packages/react/src/react/components/primitives/separator.tsx b/packages/react/src/react/components/primitives/separator.tsx
index b8cc6e1a..9988ed4b 100644
--- a/packages/react/src/react/components/primitives/separator.tsx
+++ b/packages/react/src/react/components/primitives/separator.tsx
@@ -1,16 +1,9 @@
 'use client'
 
-import * as React from 'react'
-import {
-  Separator as Divider,
-  type SeparatorProps as AriaSeparatorProps,
-} from 'react-aria-components'
+import { Separator as Divider, type SeparatorProps as SeparatorProps } from 'react-aria-components'
 
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
 import { twMerge } from 'tailwind-merge'
 
-import { cn } from '../../utils/cn'
-
 /**
  * React Aria component
  */
@@ -18,11 +11,7 @@ import { cn } from '../../utils/cn'
 /**
  * @deprecated
  */
-export const AriaSeparator = ({
-  orientation = 'horizontal',
-  className,
-  ...props
-}: AriaSeparatorProps) => {
+export const Separator = ({ orientation = 'horizontal', className, ...props }: SeparatorProps) => {
   return (
     <Divider
       {...props}
@@ -35,30 +24,4 @@ export const AriaSeparator = ({
   )
 }
 
-export type { AriaSeparatorProps }
-
-/**
- * Shadcn component
- */
-
-function Separator({
-  className,
-  orientation = 'horizontal',
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
+export type { SeparatorProps }
diff --git a/packages/react/src/react/components/primitives/sheet.tsx b/packages/react/src/react/components/primitives/sheet.tsx
index dad237e3..c05f7d3a 100644
--- a/packages/react/src/react/components/primitives/sheet.tsx
+++ b/packages/react/src/react/components/primitives/sheet.tsx
@@ -2,34 +2,30 @@
 
 import * as React from 'react'
 import type {
-  DialogProps as AriaDialogProps,
-  DialogTriggerProps as AriaDialogTriggerProps,
-  ModalOverlayProps as AriaModalOverlayProps,
+  DialogProps as DialogProps,
+  DialogTriggerProps as DialogTriggerProps,
+  ModalOverlayProps as ModalOverlayProps,
 } from 'react-aria-components'
 import {
   composeRenderProps as ariaComposeRenderProps,
-  DialogTrigger as AriaDialogTrigger,
-  Modal as AriaModal,
-  ModalOverlay as AriaModalOverlay,
+  DialogTrigger as DialogTrigger,
+  Modal as Modal,
+  ModalOverlay as ModalOverlay,
 } from 'react-aria-components'
 
-import { XIcon } from '@phosphor-icons/react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
 import { tv, type VariantProps } from 'tailwind-variants'
 
 import {
-  AriaDialog,
-  AriaDialogBody,
-  AriaDialogClose,
-  AriaDialogCloseIndicator,
-  AriaDialogDescription,
-  AriaDialogFooter,
-  AriaDialogHeader,
-  AriaDialogTitle,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogCloseIndicator,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
 } from './dialog'
 
-import { cn } from '../../utils/cn'
-
 /**
  *
  * React Aria component
@@ -39,7 +35,7 @@ import { cn } from '../../utils/cn'
 /**
  * @deprecated
  */
-const ariaOverlayStyles = tv({
+const overlayStyles = tv({
   base: [
     'fixed top-0 left-0 isolate z-50 flex h-(--visual-viewport-height) w-full items-center justify-center bg-fg/15 p-4 dark:bg-bg/40',
   ],
@@ -59,12 +55,12 @@ const ariaOverlayStyles = tv({
 /**
  * @deprecated
  */
-type AriaSides = 'top' | 'bottom' | 'left' | 'right'
+type sides = 'top' | 'bottom' | 'left' | 'right'
 
 /**
  * @deprecated
  */
-const ariaGenerateCompoundVariants = (sides: Array<AriaSides>) => {
+const generateCompoundVariants = (sides: Array<sides>) => {
   return sides.map((side) => ({
     side,
     isFloat: true,
@@ -82,7 +78,7 @@ const ariaGenerateCompoundVariants = (sides: Array<AriaSides>) => {
 /**
  * @deprecated
  */
-const ariaContentStyles = tv({
+const contentStyles = tv({
   base: 'fixed z-50 grid gap-4 border-fg/5 bg-overlay text-overlay-fg shadow-lg transition ease-in-out dark:border-border',
   variants: {
     isEntering: {
@@ -104,45 +100,45 @@ const ariaContentStyles = tv({
       true: 'ring-fg/5 dark:ring-border',
     },
   },
-  compoundVariants: ariaGenerateCompoundVariants(['top', 'bottom', 'left', 'right']),
+  compoundVariants: generateCompoundVariants(['top', 'bottom', 'left', 'right']),
 })
 
 /**
  * @deprecated
  */
-interface AriaSheetProps extends AriaDialogTriggerProps {}
+interface SheetProps extends DialogTriggerProps {}
 
 /**
  * @deprecated
  */
-const AriaSheet = (props: AriaSheetProps) => {
-  return <AriaDialogTrigger {...props} />
+const Sheet = (props: SheetProps) => {
+  return <DialogTrigger {...props} />
 }
 
 /**
  * @deprecated
  */
-interface AriaSheetContentProps
-  extends Omit<React.ComponentProps<typeof AriaModal>, 'children' | 'className'>,
-    Omit<AriaModalOverlayProps, 'className'>,
-    VariantProps<typeof ariaOverlayStyles> {
-  'aria-label'?: AriaDialogProps['aria-label']
-  'aria-labelledby'?: AriaDialogProps['aria-labelledby']
-  role?: AriaDialogProps['role']
+interface SheetContentProps
+  extends Omit<React.ComponentProps<typeof Modal>, 'children' | 'className'>,
+    Omit<ModalOverlayProps, 'className'>,
+    VariantProps<typeof overlayStyles> {
+  'aria-label'?: DialogProps['aria-label']
+  'aria-labelledby'?: DialogProps['aria-labelledby']
+  role?: DialogProps['role']
   closeButton?: boolean
   isBlurred?: boolean
   isFloat?: boolean
-  side?: AriaSides
+  side?: sides
   classNames?: {
-    overlay?: AriaModalOverlayProps['className']
-    content?: AriaModalOverlayProps['className']
+    overlay?: ModalOverlayProps['className']
+    content?: ModalOverlayProps['className']
   }
 }
 
 /**
  * @deprecated
  */
-const AriaSheetContent = ({
+const SheetContent = ({
   classNames,
   isBlurred = false,
   isDismissable = true,
@@ -152,13 +148,13 @@ const AriaSheetContent = ({
   isFloat = true,
   children,
   ...props
-}: AriaSheetContentProps) => {
+}: SheetContentProps) => {
   const _isDismissable = role === 'alertdialog' ? false : isDismissable
   return (
-    <AriaModalOverlay
+    <ModalOverlay
       isDismissable={_isDismissable}
       className={ariaComposeRenderProps(classNames?.overlay, (className, renderProps) => {
-        return ariaOverlayStyles({
+        return overlayStyles({
           ...renderProps,
           isBlurred,
           className,
@@ -166,9 +162,9 @@ const AriaSheetContent = ({
       })}
       {...props}
     >
-      <AriaModal
+      <Modal
         className={ariaComposeRenderProps(classNames?.content, (className, renderProps) =>
-          ariaContentStyles({
+          contentStyles({
             ...renderProps,
             side,
             isFloat,
@@ -178,11 +174,11 @@ const AriaSheetContent = ({
         {...props}
       >
         {(values) => (
-          <AriaDialog role={role} aria-label={props['aria-label'] ?? undefined} className="h-full">
+          <Dialog role={role} aria-label={props['aria-label'] ?? undefined} className="h-full">
             <>
               {typeof children === 'function' ? children(values) : children}
               {closeButton && (
-                <AriaDialogCloseIndicator
+                <DialogCloseIndicator
                   className="right-4 top-4 p-4"
                   isDismissable={_isDismissable}
                   variant="outline"
@@ -190,171 +186,46 @@ const AriaSheetContent = ({
                 />
               )}
             </>
-          </AriaDialog>
+          </Dialog>
         )}
-      </AriaModal>
-    </AriaModalOverlay>
+      </Modal>
+    </ModalOverlay>
   )
 }
 
 /**
  * @deprecated
  */
-const AriaSheetTrigger = AriaDialogTrigger
+const SheetTrigger = DialogTrigger
 /**
  * @deprecated
  */
-const AriaSheetFooter = AriaDialogFooter
+const SheetFooter = DialogFooter
 /**
  * @deprecated
  */
-const AriaSheetHeader = AriaDialogHeader
+const SheetHeader = DialogHeader
 /**
  * @deprecated
  */
-const AriaSheetTitle = AriaDialogTitle
+const SheetTitle = DialogTitle
 /**
  * @deprecated
  */
-const AriaSheetDescription = AriaDialogDescription
+const SheetDescription = DialogDescription
 /**
  * @deprecated
  */
-const AriaSheetBody = AriaDialogBody
+const SheetBody = DialogBody
 /**
  * @deprecated
  */
-const AriaSheetClose = AriaDialogClose
-
-export type { AriaSheetContentProps, AriaSheetProps, AriaSides }
-export {
-  AriaSheet,
-  AriaSheetBody,
-  AriaSheetClose,
-  AriaSheetContent,
-  AriaSheetDescription,
-  AriaSheetFooter,
-  AriaSheetHeader,
-  AriaSheetTitle,
-  AriaSheetTrigger,
-}
-
-/**
- *
- * Shadcn component
- *
- */
-
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
-}
-
-function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-}
-
-function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SheetContent({
-  className,
-  children,
-  side = 'right',
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: 'top' | 'right' | 'bottom' | 'left'
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-8 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-4 focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-8" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="sheet-header" className={cn('flex flex-col gap-3 p-8', className)} {...props} />
-  )
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn('mt-auto flex flex-col gap-4 p-8', className)}
-      {...props}
-    />
-  )
-}
-
-function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn('text-foreground font-semibold', className)}
-      {...props}
-    />
-  )
-}
-
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  )
-}
+const SheetClose = DialogClose
 
+export type { sides as AriaSides, SheetContentProps, SheetProps }
 export {
   Sheet,
+  SheetBody,
   SheetClose,
   SheetContent,
   SheetDescription,
diff --git a/packages/react/src/react/components/primitives/sidebar.tsx b/packages/react/src/react/components/primitives/sidebar.tsx
index 70ee6a71..a2b2713f 100644
--- a/packages/react/src/react/components/primitives/sidebar.tsx
+++ b/packages/react/src/react/components/primitives/sidebar.tsx
@@ -27,9 +27,9 @@ import { twJoin, twMerge } from 'tailwind-merge'
 import { tv } from 'tailwind-variants'
 
 import { Badge } from './badge'
-import { AriaButton } from './button'
+import { Button } from './button'
 import { composeTailwindRenderProps } from './primitive'
-import { AriaSheet, AriaSheetBody, AriaSheetContent } from './sheet'
+import { Sheet, SheetBody, SheetContent } from './sheet'
 import { Tooltip, TooltipContent } from './tooltip'
 
 import { BaseIcon } from '../../components/primitives/base-icon'
@@ -231,8 +231,8 @@ const Sidebar = ({
 
   if (isMobile) {
     return (
-      <AriaSheet isOpen={isOpenOnMobile} onOpenChange={setIsOpenOnMobile} {...props}>
-        <AriaSheetContent
+      <Sheet isOpen={isOpenOnMobile} onOpenChange={setIsOpenOnMobile} {...props}>
+        <SheetContent
           closeButton={closeButton}
           aria-label="Sidebar"
           data-sidebar-intent="default"
@@ -242,9 +242,9 @@ const Sidebar = ({
           isFloat={intent === 'float'}
           side={side}
         >
-          <AriaSheetBody className="px-0 sm:px-0">{props.children}</AriaSheetBody>
-        </AriaSheetContent>
-      </AriaSheet>
+          <SheetBody className="px-0 sm:px-0">{props.children}</SheetBody>
+        </SheetContent>
+      </Sheet>
     )
   }
 
@@ -699,10 +699,10 @@ const SidebarTrigger = ({
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof AriaButton>) => {
+}: React.ComponentProps<typeof Button>) => {
   const { toggleSidebar } = useSidebar()
   return (
-    <AriaButton
+    <Button
       aria-label={props['aria-label'] || 'Toggle Sidebar'}
       data-sidebar-trigger="true"
       size={size}
@@ -720,7 +720,7 @@ const SidebarTrigger = ({
           <span className="sr-only">Toggle Sidebar</span>
         </>
       )}
-    </AriaButton>
+    </Button>
   )
 }
 
diff --git a/packages/react/src/react/components/primitives/text-area.tsx b/packages/react/src/react/components/primitives/text-area.tsx
index 404cc424..0db29487 100644
--- a/packages/react/src/react/components/primitives/text-area.tsx
+++ b/packages/react/src/react/components/primitives/text-area.tsx
@@ -16,21 +16,21 @@ import { composeTailwindRenderProps } from './primitive'
 /**
  * @deprecated
  */
-interface AriaTextareaProps extends Omit<TextFieldProps, 'className'>, AriaFieldProps {
+interface TextareaProps extends Omit<TextFieldProps, 'className'>, AriaFieldProps {
   className?: string | ((v: TextFieldProps) => string)
 }
 
 /**
  * @deprecated
  */
-const AriaTextarea = ({
+const Textarea = ({
   className,
   placeholder,
   label,
   description,
   errorMessage,
   ...props
-}: AriaTextareaProps) => {
+}: TextareaProps) => {
   return (
     <TextField
       {...props}
@@ -64,5 +64,5 @@ const AriaTextarea = ({
   )
 }
 
-export type { AriaTextareaProps }
-export { AriaTextarea }
+export type { TextareaProps }
+export { Textarea }
diff --git a/packages/react/src/react/components/primitives/text-field.tsx b/packages/react/src/react/components/primitives/text-field.tsx
index c9237632..28bafa00 100644
--- a/packages/react/src/react/components/primitives/text-field.tsx
+++ b/packages/react/src/react/components/primitives/text-field.tsx
@@ -12,7 +12,7 @@ import { useFormStatus } from 'react-dom'
 import { CopyIcon, EyeClosedIcon, EyeIcon } from '@phosphor-icons/react'
 import { tv, type VariantProps } from 'tailwind-variants'
 
-import { AriaButton } from './button'
+import { Button } from './button'
 import type { AriaFieldProps } from './field'
 import {
   AriaDescription as AriaDescription,
@@ -27,9 +27,9 @@ import { BaseIcon } from '../../components/primitives/base-icon'
 import { Typography } from '../../components/primitives/typography'
 import { cn } from '../../utils/cn'
 
-type AriaInputType = Exclude<ReactAriaInputPrimitiveProps['type'], 'password'>
+type InputType = Exclude<ReactAriaInputPrimitiveProps['type'], 'password'>
 
-interface AriaBaseTextFieldProps extends TextFieldPrimitiveProps, AriaFieldProps {
+interface BaseTextFieldProps extends TextFieldPrimitiveProps, AriaFieldProps {
   prefix?: React.ReactNode
   suffix?: React.ReactNode
   isPending?: boolean
@@ -38,14 +38,14 @@ interface AriaBaseTextFieldProps extends TextFieldPrimitiveProps, AriaFieldProps
   isShowCopyButton?: boolean
 }
 
-interface AriaRevealableTextFieldProps extends AriaBaseTextFieldProps {
+interface RevealableTextFieldProps extends BaseTextFieldProps {
   isRevealable: true
   type: 'password'
 }
 
-interface AriaNonRevealableTextFieldProps extends AriaBaseTextFieldProps {
+interface NonRevealableTextFieldProps extends BaseTextFieldProps {
   isRevealable?: never
-  type?: AriaInputType
+  type?: InputType
 }
 
 const fieldgroupVariants = tv({
@@ -64,13 +64,13 @@ const fieldgroupVariants = tv({
 /**
  * @deprecated use InputProps
  */
-type AriaTextFieldProps = (AriaRevealableTextFieldProps | AriaNonRevealableTextFieldProps) &
+type TextFieldProps = (RevealableTextFieldProps | NonRevealableTextFieldProps) &
   VariantProps<typeof fieldgroupVariants>
 
 /**
  * @deprecated use Input
  */
-const AriaTextField = ({
+const TextField = ({
   placeholder,
   label,
   description,
@@ -82,7 +82,7 @@ const AriaTextField = ({
   isRevealable,
   type,
   ...props
-}: AriaTextFieldProps) => {
+}: TextFieldProps) => {
   const formStatus = useFormStatus()
   const disabled = formStatus.pending || props.isDisabled
 
@@ -136,7 +136,7 @@ const AriaTextField = ({
             )}
             <AriaInput placeholder={placeholder} disabled={disabled} />
             {isRevealable ? (
-              <AriaButton
+              <Button
                 variant="vanish"
                 size="md"
                 type="button"
@@ -148,7 +148,7 @@ const AriaTextField = ({
                 ) : (
                   <BaseIcon icon={EyeIcon} weight="regular" size="md" />
                 )}
-              </AriaButton>
+              </Button>
             ) : isPending ? (
               <Loader variant="spin" />
             ) : suffix ? (
@@ -167,7 +167,7 @@ const AriaTextField = ({
             ) : null}
             {props.isShowCopyButton && (
               <div className="border-l border-border ml-1 flex items-center gap-2">
-                <AriaButton
+                <Button
                   variant="vanish"
                   size="md"
                   type="button"
@@ -178,7 +178,7 @@ const AriaTextField = ({
                 >
                   <BaseIcon icon={CopyIcon} size="md" weight="regular" />
                   Copy
-                </AriaButton>
+                </Button>
               </div>
             )}
           </AriaFieldGroup>
@@ -192,36 +192,4 @@ const AriaTextField = ({
   )
 }
 
-export { AriaTextField, type AriaTextFieldProps }
-
-/**
- *
- * Shadcn component
- *
- */
-
-function Input({
-  className,
-  type,
-  isError,
-  ...props
-}: React.ComponentProps<'input'> & { isError?: boolean }) {
-  return (
-    <input
-      type={type}
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-14 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className
-      )}
-      data-slot="input"
-      aria-invalid={isError}
-      {...props}
-    />
-  )
-}
-
-type InputProps = React.ComponentPropsWithRef<typeof Input>
-
-export { Input, type InputProps }
+export { TextField, type TextFieldProps }
diff --git a/packages/react/src/react/components/primitives/toolbar.tsx b/packages/react/src/react/components/primitives/toolbar.tsx
index 3cf8a7ac..8d832eb0 100644
--- a/packages/react/src/react/components/primitives/toolbar.tsx
+++ b/packages/react/src/react/components/primitives/toolbar.tsx
@@ -7,7 +7,7 @@ import { composeRenderProps, Group, Toolbar as ToolbarPrimitive } from 'react-ar
 import { twMerge } from 'tailwind-merge'
 
 import { composeTailwindRenderProps } from './primitive'
-import { AriaSeparator } from './separator'
+import { Separator } from './separator'
 import { Toggle, type ToggleProps } from './toggle'
 
 const ToolbarContext = createContext<{ orientation?: ToolbarProps['orientation'] }>({
@@ -67,7 +67,7 @@ const ToolbarSeparator = ({ className, ...props }: ToolbarSeparatorProps) => {
   const { orientation } = useContext(ToolbarContext)
   const effectiveOrientation = orientation === 'vertical' ? 'horizontal' : 'vertical'
   return (
-    <AriaSeparator
+    <Separator
       orientation={effectiveOrientation}
       className={twMerge(effectiveOrientation === 'vertical' ? 'mx-1.5' : 'my-1.5 w-9', className)}
       {...props}
diff --git a/packages/react/src/react/pages/401.tsx b/packages/react/src/react/pages/401.tsx
index d20c4c8f..e1ed848a 100644
--- a/packages/react/src/react/pages/401.tsx
+++ b/packages/react/src/react/pages/401.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { AriaLink } from '../components'
+import { Link } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -45,10 +45,10 @@ export const NotAuthorizedPage = ({
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <AriaLink intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
+      <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
         <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
-      </AriaLink>
+      </Link>
     </div>
   )
 }
diff --git a/packages/react/src/react/pages/403.tsx b/packages/react/src/react/pages/403.tsx
index ba0de1a3..cb9f1b09 100644
--- a/packages/react/src/react/pages/403.tsx
+++ b/packages/react/src/react/pages/403.tsx
@@ -1,6 +1,6 @@
 import { ArrowRightIcon, LockKeyIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { AriaLink } from '../components'
+import { Link } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -22,10 +22,10 @@ export const UnauthorizedPage = () => {
         You are not authorized to access this page. Please check your permission and try again.
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <AriaLink intent="primary" href="/" className="mt-12 flex items-end gap-x-2">
+      <Link intent="primary" href="/" className="mt-12 flex items-end gap-x-2">
         Back to home
         <BaseIcon size="sm" icon={ArrowRightIcon} className="text-text-brand" weight="bold" />
-      </AriaLink>
+      </Link>
     </div>
   )
 }
diff --git a/packages/react/src/react/pages/404.tsx b/packages/react/src/react/pages/404.tsx
index f1d57c24..c5450b5e 100644
--- a/packages/react/src/react/pages/404.tsx
+++ b/packages/react/src/react/pages/404.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr'
 
-import { AriaLink } from '../components'
+import { Link } from '../components'
 import { BaseIcon } from '../components/primitives/base-icon'
 import { Typography } from '../components/primitives/typography'
 
@@ -45,10 +45,10 @@ export const NotfoundPage = ({
         {description}
       </Typography>
       <div className="bg-border mt-6 h-px w-full" />
-      <AriaLink intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
+      <Link intent="primary" href={redirectURL} className="mt-12 flex items-end gap-x-2">
         <BaseIcon size="sm" icon={ArrowLeftIcon} className="text-text-brand" weight="bold" />
         {redirectSentence}
-      </AriaLink>
+      </Link>
     </div>
   )
 }
diff --git a/packages/react/src/react/views/collections/list/toolbar/create.tsx b/packages/react/src/react/views/collections/list/toolbar/create.tsx
index e79f6ee6..80030e36 100644
--- a/packages/react/src/react/views/collections/list/toolbar/create.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/create.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button } from '../../../../components'
+import { Button } from '@genseki/react/v2'
 
 export interface MinimalCollectionListCreateProps {
   isLoading?: boolean
diff --git a/packages/react/src/react/views/collections/list/toolbar/delete.tsx b/packages/react/src/react/views/collections/list/toolbar/delete.tsx
index eedd550f..d3e2eb6e 100644
--- a/packages/react/src/react/views/collections/list/toolbar/delete.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/delete.tsx
@@ -1,8 +1,10 @@
 'use client'
+import type { ComponentPropsWithRef } from 'react'
+
 import { TrashIcon } from '@phosphor-icons/react'
 import type { Promisable } from 'type-fest'
 
-import { AriaButton, type AriaButtonProps, BaseIcon } from '../../../../components'
+import { Button } from '@genseki/react/v2'
 
 export interface MinimalCollectionListDeleteProps {
   isLoading?: boolean
@@ -11,20 +13,13 @@ export interface MinimalCollectionListDeleteProps {
 
 export interface CollectionListDeleteProps
   extends MinimalCollectionListDeleteProps,
-    Partial<AriaButtonProps> {}
+    Partial<ComponentPropsWithRef<typeof Button>> {}
 
 export function CollectionListDelete(props: CollectionListDeleteProps) {
   return (
-    <AriaButton
-      aria-label="Delete"
-      leadingIcon={<BaseIcon icon={TrashIcon} size="md" />}
-      onClick={props.onDelete}
-      isPending={props.isLoading}
-      variant="destruction"
-      size="md"
-      {...props}
-    >
+    <Button onClick={props.onDelete} disabled={props.isLoading} variant="destructive" {...props}>
+      <TrashIcon />
       Delete
-    </AriaButton>
+    </Button>
   )
 }
diff --git a/packages/react/src/react/views/collections/list/toolbar/filter.tsx b/packages/react/src/react/views/collections/list/toolbar/filter.tsx
index e0fcd8f5..62431ca0 100644
--- a/packages/react/src/react/views/collections/list/toolbar/filter.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/filter.tsx
@@ -2,8 +2,8 @@
 
 import { FunnelIcon } from '@phosphor-icons/react'
 
+import { Button } from '@genseki/react/v2'
 import type { InputGroupButton } from '../../../../components'
-import { Button } from '../../../../components'
 
 export interface MinimalCollectionListFilterProps {
   isLoading?: boolean
diff --git a/packages/react/src/react/views/collections/list/toolbar/index.tsx b/packages/react/src/react/views/collections/list/toolbar/index.tsx
index 663f020d..8351ad7c 100644
--- a/packages/react/src/react/views/collections/list/toolbar/index.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/index.tsx
@@ -8,8 +8,9 @@ import { CollectionListDelete } from './delete'
 import { CollectionListFilter } from './filter'
 import { CollectionListSearch } from './search'
 
+import { Button } from '@genseki/react/v2'
 import type { CollectionToolbarActions } from '../../../../../core/collection'
-import { Button, toast } from '../../../..'
+import { toast } from '../../../..'
 import { useTableStatesContext } from '../../../../providers/table'
 import { useCollectionList } from '../context'
 import { useCollectionDeleteMutation } from '../hooks/use-collection-delete'
diff --git a/packages/react/src/react/views/collections/list/toolbar/search.tsx b/packages/react/src/react/views/collections/list/toolbar/search.tsx
index 60ea2008..041c62cc 100644
--- a/packages/react/src/react/views/collections/list/toolbar/search.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/search.tsx
@@ -4,7 +4,8 @@ import React from 'react'
 import { MagnifyingGlassIcon } from '@phosphor-icons/react'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
 
-import { Input, InputGroup, InputGroupAddon, InputGroupControl } from '../../../../components'
+import { Input } from '../../../../../../v2'
+import { InputGroup, InputGroupAddon, InputGroupControl } from '../../../../components'
 import { useDebounce } from '../../../../hooks/use-debounce'
 import { useSearch } from '../../../../hooks/use-search'
 
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 1e142d96..ac83569f 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -8,6 +8,6 @@
     "types": ["node"],
     "noEmit": true
   },
-  "include": ["src"],
+  "include": ["src", "v2"],
   "exclude": ["dist", "node_modules"]
 }
diff --git a/packages/react/v2/components/primitives/button-group.tsx b/packages/react/v2/components/primitives/button-group.tsx
new file mode 100644
index 00000000..11abe03a
--- /dev/null
+++ b/packages/react/v2/components/primitives/button-group.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { Separator } from './separator'
+
+import { cn } from '../../../src/react/utils/cn'
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-4",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+        vertical:
+          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentPropsWithRef<'div'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-4 rounded-md border px-8 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...(props as React.HTMLAttributes<HTMLElement>)}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }
diff --git a/packages/react/v2/components/primitives/button.tsx b/packages/react/v2/components/primitives/button.tsx
new file mode 100644
index 00000000..002d4fd7
--- /dev/null
+++ b/packages/react/v2/components/primitives/button.tsx
@@ -0,0 +1,72 @@
+'use client'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../../../src/react/utils/cn'
+/**
+ *
+ * Shadcn component
+ *
+ */
+
+const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-4 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring ring-offset-1 focus-visible:ring-ring/50 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    'disabled:opacity-80 cursor-pointer',
+  ],
+  {
+    variants: {
+      variant: {
+        primary:
+          ' bg-surface-button-primary text-text-inverse hover:bg-surface-button-primary-hover active:bg-surface-button-primary disabled:bg-surface-button-primary-disabled disabled:text-text-disabled disabled:border disabled:border-border-button-primary-disabled',
+        secondary:
+          ' bg-surface-button-secondary text-text-brand hover:bg-surface-button-secondary-hover active:bg-surface-button-secondary disabled:bg-surface-button-secondary-disabled disabled:text-text-disabled',
+        tertiary:
+          ' bg-surface-button-tertiary border border-border-button-tertiary text-text-brand hover:bg-surface-button-tertiary-hover active:bg-surface-button-tertiary hover:border-border-button-tertiary-hover disabled:bg-surface-button-tertiary-disabled disabled:border-border-button-tertiary-disabled disabled:text-text-disabled',
+        naked:
+          'shadow-sm ring-offset-0 text-text-secondary hover:bg-surface-button-naked-hover active:bg-transparent disabled:bg-surface-button-naked-disabled  disabled:text-text-disabled',
+        outline:
+          ' border border-border-button-outline text-text-secondary bg-surface-button-outline shadow-xs hover:bg-surface-button-outline-hover active:bg-surface-button-outline hover:border-border-button-outline-hover disabled:bg-surface-button-outline-disabled disabled:text-text-disabled disabled:border disabled:border-border-button-outline-disabled dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        ghost:
+          ' bg-surface-button-ghost hover:bg-surface-button-ghost-hover active:bg-surface-button-ghost text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+      },
+      size: {
+        default: 'h-18 px-8 py-4 has-[>svg]:px-6',
+        sm: 'h-16 rounded-md gap-3 px-6 has-[>svg]:px-5',
+        lg: 'h-20 rounded-md px-12 has-[>svg]:px-8',
+        icon: 'size-18',
+        'icon-sm': 'size-16',
+        'icon-lg': 'size-20',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/packages/react/v2/components/primitives/combobox.tsx b/packages/react/v2/components/primitives/combobox.tsx
new file mode 100644
index 00000000..17c03936
--- /dev/null
+++ b/packages/react/v2/components/primitives/combobox.tsx
@@ -0,0 +1,294 @@
+'use client'
+import React from 'react'
+
+import { CaretUpDownIcon, CheckIcon, XIcon } from '@phosphor-icons/react'
+import { useControllableState } from '@radix-ui/react-use-controllable-state'
+
+import { Button } from './button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+import { Badge } from '../../../src'
+import { createRequiredContext } from '../../../src/react/hooks/create-required-context'
+import { cn } from '../../../src/react/utils/cn'
+/**
+ *
+ * Shadcn component
+ *
+ */
+
+interface Item {
+  value: string
+  label: string
+}
+
+interface ComboboxContextValue {
+  open: boolean
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
+  value: string[]
+  onValueChange: React.Dispatch<React.SetStateAction<string[]>>
+  items: Item[]
+  setItems: React.Dispatch<React.SetStateAction<Item[]>>
+  multipleItems?: boolean
+}
+
+const [_ComboboxProvider, useCombobox] =
+  createRequiredContext<ComboboxContextValue>('Combobox provider')
+
+interface ComboboxProviderProps {
+  children?: React.ReactNode
+  open?: boolean
+  onOpenChange?: React.Dispatch<React.SetStateAction<boolean>>
+  value?: string[]
+  onValueChange?: React.Dispatch<React.SetStateAction<string[]>>
+  items: Item[]
+  multipleItems?: boolean
+}
+
+function ComboboxProvider(props: ComboboxProviderProps) {
+  const [items, setItems] = React.useState<Item[]>(props.items ?? [])
+
+  // typing value
+  const [value, setValue] = useControllableState<string[]>({
+    defaultProp: [''],
+    onChange: props.onValueChange,
+    prop: props.value,
+  })
+
+  // popover state
+  const [open, setOpen] = useControllableState({
+    defaultProp: false,
+    onChange: props.onOpenChange,
+    prop: props.open,
+  })
+
+  return (
+    <_ComboboxProvider
+      value={value}
+      onValueChange={setValue}
+      open={open}
+      onOpenChange={setOpen}
+      items={items}
+      setItems={setItems}
+      multipleItems={props.multipleItems ?? false}
+    >
+      <_ComboboxPopoverProvider>{props.children}</_ComboboxPopoverProvider>
+    </_ComboboxProvider>
+  )
+}
+
+function _ComboboxPopoverProvider(props: { children?: React.ReactNode }) {
+  const ctx = useCombobox()
+  return (
+    <Popover open={ctx.open} onOpenChange={ctx.onOpenChange}>
+      {props.children}
+    </Popover>
+  )
+}
+
+function ComboboxTriggerMultiValue(props: {
+  children?: ((selectedItem: Item[] | undefined) => React.ReactElement) | React.ReactNode
+  className?: string
+}) {
+  const ctx = useCombobox()
+
+  const selectedItems = ctx.items.filter((item) => ctx.value.includes(item.value))
+
+  const onTriggerKeyDown: React.KeyboardEventHandler = (event) => {
+    if (event.key === 'ArrowDown') ctx.onOpenChange(true)
+  }
+
+  const renderItems = React.useMemo(() => {
+    return (
+      <span className="flex flex-wrap flex-1 gap-2 pr-8">
+        {selectedItems.map((selectedItem) => (
+          <Badge
+            onClick={(e) => {
+              e.stopPropagation()
+              ctx.onValueChange((prevItems) =>
+                prevItems.filter((prevItem) => prevItem !== selectedItem.value)
+              )
+            }}
+            shape="square"
+            intent="gray"
+            key={selectedItem.value}
+            className="flex "
+          >
+            {selectedItem.label}
+            <XIcon className="size-5 ml-1" />
+          </Badge>
+        ))}
+      </span>
+    )
+  }, [selectedItems])
+
+  return (
+    <PopoverTrigger
+      asChild
+      onKeyDown={onTriggerKeyDown}
+      className={cn('w-[200px] min-h-18 justify-between flex h-auto relative', props.className)}
+      aria-expanded={ctx.open}
+    >
+      {typeof props.children === 'function' ? (
+        props.children(selectedItems)
+      ) : props.children ? (
+        props.children
+      ) : (
+        <Button variant="outline" role="combobox">
+          {selectedItems.length > 0 ? renderItems : 'Please select item'}
+          <CaretUpDownIcon className="h-8 w-8 shrink-0 opacity-50 absolute right-4 inset-y-0 my-auto" />
+        </Button>
+      )}
+    </PopoverTrigger>
+  )
+}
+
+function ComboboxTrigger(props: {
+  children?: ((selectedItem: Item | undefined) => React.ReactElement) | React.ReactNode
+  className?: string
+}) {
+  const ctx = useCombobox()
+
+  if (ctx.multipleItems) {
+    throw new Error(
+      'Please use `MultipleValueComboboxTrigger` component for mange multi value selection, this will make component maintenance more easier'
+    )
+  }
+
+  const selectedItem = ctx.items.find((item) => ctx.value.includes(item.value))
+
+  const onTriggerKeyDown: React.KeyboardEventHandler = (event) => {
+    if (event.key === 'ArrowDown') ctx.onOpenChange(true)
+  }
+
+  return (
+    <PopoverTrigger
+      asChild
+      onKeyDown={onTriggerKeyDown}
+      className={cn('w-[200px] justify-between', props.className)}
+      aria-expanded={ctx.open}
+    >
+      {typeof props.children === 'function' ? (
+        props.children(selectedItem)
+      ) : props.children ? (
+        props.children
+      ) : (
+        <Button variant="outline" role="combobox">
+          {selectedItem?.label || 'Please select item'}
+          <CaretUpDownIcon className="ml-4 h-8 w-8 shrink-0 opacity-50" />
+        </Button>
+      )}
+    </PopoverTrigger>
+  )
+}
+
+function ComboboxCommandInput(props: React.ComponentPropsWithRef<typeof CommandInput>) {
+  return <CommandInput placeholder="Search item..." {...props} />
+}
+
+function ComboboxContent({
+  children,
+  className,
+  ...props
+}: { children?: React.ReactNode; className?: string } & React.ComponentPropsWithRef<
+  typeof PopoverContent
+>) {
+  return (
+    <Command loop className="w-fit">
+      <PopoverContent
+        className={cn('w-(--radix-popover-trigger-width) bg-background p-0', className)}
+        {...props}
+      >
+        {children}
+      </PopoverContent>
+    </Command>
+  )
+}
+
+function ComboboxCommandEmpty({
+  children,
+  className,
+  ...props
+}: { children?: React.ReactNode } & React.ComponentPropsWithRef<typeof CommandEmpty>) {
+  return (
+    <CommandEmpty className={cn('text-muted-foreground', className)} {...props}>
+      {children || 'No framework found'}
+    </CommandEmpty>
+  )
+}
+
+function ComboboxCommandList({
+  children,
+  ...props
+}: { children?: React.ReactNode } & React.ComponentPropsWithRef<typeof CommandList>) {
+  return <CommandList {...props}>{children}</CommandList>
+}
+
+function ComboboxCommandGroup({
+  children: Children,
+  ...props
+}: {
+  children: React.FC<{ items: Item[] }>
+} & Omit<React.ComponentPropsWithRef<typeof CommandGroup>, 'children'>) {
+  const ctx = useCombobox()
+  return (
+    <CommandGroup {...props}>
+      <Children items={ctx.items} />
+    </CommandGroup>
+  )
+}
+
+function ComboboxCommandItem({
+  value,
+  label,
+  ...props
+}: { children?: React.ReactNode; value: string; label: string } & React.ComponentPropsWithRef<
+  typeof CommandItem
+>) {
+  const ctx = useCombobox()
+
+  const isValueExistedBefore = ctx.value.some((existedValue) => existedValue === value)
+
+  const onSelect = () => {
+    ctx.onValueChange((prevItems) => {
+      if (ctx.multipleItems) {
+        return isValueExistedBefore
+          ? prevItems.filter((prevItem) => prevItem !== value)
+          : [...prevItems, value]
+      }
+
+      return isValueExistedBefore ? [] : [value]
+    })
+
+    !ctx.multipleItems && ctx.onOpenChange(false)
+  }
+
+  return (
+    <CommandItem id={value} value={value} onSelect={onSelect} {...props}>
+      <CheckIcon
+        className={cn('mr-4 h-8 w-8', isValueExistedBefore ? 'opacity-100' : 'opacity-0')}
+      />
+      {label}
+    </CommandItem>
+  )
+}
+
+export {
+  ComboboxCommandEmpty,
+  ComboboxCommandGroup,
+  ComboboxCommandInput,
+  ComboboxCommandItem,
+  ComboboxCommandList,
+  ComboboxContent,
+  ComboboxProvider,
+  ComboboxTrigger,
+  ComboboxTriggerMultiValue,
+  useCombobox,
+}
diff --git a/packages/react/src/react/components/primitives/command.tsx b/packages/react/v2/components/primitives/command.tsx
similarity index 98%
rename from packages/react/src/react/components/primitives/command.tsx
rename to packages/react/v2/components/primitives/command.tsx
index 0bff1a00..5dfd9208 100644
--- a/packages/react/src/react/components/primitives/command.tsx
+++ b/packages/react/v2/components/primitives/command.tsx
@@ -7,7 +7,7 @@ import { Command as CommandPrimitive } from 'cmdk'
 
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog'
 
-import { cn } from '../../utils/cn'
+import { cn } from '../../../src/react/utils/cn'
 
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
diff --git a/packages/react/v2/components/primitives/dialog.tsx b/packages/react/v2/components/primitives/dialog.tsx
new file mode 100644
index 00000000..f96686c4
--- /dev/null
+++ b/packages/react/v2/components/primitives/dialog.tsx
@@ -0,0 +1,127 @@
+'use client'
+import { XIcon } from '@phosphor-icons/react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+import { cn } from '../../../src/react/utils/cn'
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-8 rounded-lg border p-12 shadow-lg duration-200 sm:max-w-lg',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-4 focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-4 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn('flex flex-col-reverse gap-4 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/react/v2/components/primitives/index.ts b/packages/react/v2/components/primitives/index.ts
new file mode 100644
index 00000000..b6443f69
--- /dev/null
+++ b/packages/react/v2/components/primitives/index.ts
@@ -0,0 +1,12 @@
+export * from './button'
+export * from './button-group'
+export * from './combobox'
+export * from './command'
+export * from './dialog'
+export * from './input'
+export * from './input-group'
+export * from './label'
+export * from './link'
+export * from './popover'
+export * from './separator'
+export * from './sheet'
diff --git a/packages/react/src/react/components/primitives/input-group.tsx b/packages/react/v2/components/primitives/input-group.tsx
similarity index 98%
rename from packages/react/src/react/components/primitives/input-group.tsx
rename to packages/react/v2/components/primitives/input-group.tsx
index 58b4846b..836e9837 100644
--- a/packages/react/src/react/components/primitives/input-group.tsx
+++ b/packages/react/v2/components/primitives/input-group.tsx
@@ -6,9 +6,9 @@ import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { Button } from './button'
-import type { Input } from './text-field'
+import type { Input } from './input'
 
-import { cn } from '../../utils/cn'
+import { cn } from '../../../src/react/utils/cn'
 
 function InputGroup({
   className,
diff --git a/packages/react/v2/components/primitives/input.tsx b/packages/react/v2/components/primitives/input.tsx
new file mode 100644
index 00000000..9416252d
--- /dev/null
+++ b/packages/react/v2/components/primitives/input.tsx
@@ -0,0 +1,28 @@
+'use client'
+import { cn } from '../../../src/react/utils/cn'
+
+function Input({
+  className,
+  type,
+  isError,
+  ...props
+}: React.ComponentProps<'input'> & { isError?: boolean }) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-14 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className
+      )}
+      data-slot="input"
+      aria-invalid={isError}
+      {...props}
+    />
+  )
+}
+
+type InputProps = React.ComponentPropsWithRef<typeof Input>
+
+export { Input, type InputProps }
diff --git a/packages/react/src/react/components/primitives/label.tsx b/packages/react/v2/components/primitives/label.tsx
similarity index 92%
rename from packages/react/src/react/components/primitives/label.tsx
rename to packages/react/v2/components/primitives/label.tsx
index 2490d0d2..6dc0323b 100644
--- a/packages/react/src/react/components/primitives/label.tsx
+++ b/packages/react/v2/components/primitives/label.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 
 import * as LabelPrimitive from '@radix-ui/react-label'
 
-import { cn } from '../../utils/cn'
+import { cn } from '../../../src/react/utils/cn'
 
 function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
diff --git a/packages/react/v2/components/primitives/link.tsx b/packages/react/v2/components/primitives/link.tsx
new file mode 100644
index 00000000..c9c2a901
--- /dev/null
+++ b/packages/react/v2/components/primitives/link.tsx
@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority'
+
+export const linkVariants = cva('text-sm font-medium text-primary', {
+  variants: {
+    variant: {
+      plain: null,
+      underline: 'underline-offset-4 hover:underline hover:border-0',
+    },
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    variant: 'underline',
+    size: 'sm',
+  },
+})
diff --git a/packages/react/v2/components/primitives/popover.tsx b/packages/react/v2/components/primitives/popover.tsx
new file mode 100644
index 00000000..b0e3b95b
--- /dev/null
+++ b/packages/react/v2/components/primitives/popover.tsx
@@ -0,0 +1,45 @@
+'use client'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '../../../src/react/utils/cn'
+/**
+ *
+ * Shadcn component
+ *
+ */
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-144 origin-(--radix-popover-content-transform-origin) rounded-md border p-8 shadow-md outline-hidden',
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }
diff --git a/packages/react/v2/components/primitives/separator.tsx b/packages/react/v2/components/primitives/separator.tsx
new file mode 100644
index 00000000..1d9ec5a7
--- /dev/null
+++ b/packages/react/v2/components/primitives/separator.tsx
@@ -0,0 +1,32 @@
+'use client'
+import React from 'react'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '../../../src/react/utils/cn'
+
+/**
+ * Shadcn component
+ */
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/react/v2/components/primitives/sheet.tsx b/packages/react/v2/components/primitives/sheet.tsx
new file mode 100644
index 00000000..3222ca19
--- /dev/null
+++ b/packages/react/v2/components/primitives/sheet.tsx
@@ -0,0 +1,124 @@
+'use client'
+import { XIcon } from '@phosphor-icons/react'
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+
+import { cn } from '../../../src/react/utils/cn'
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-8 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-8 right-8 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-4 focus:ring-offset-4 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-8" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="sheet-header" className={cn('flex flex-col gap-3 p-8', className)} {...props} />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-4 p-8', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+}
diff --git a/packages/react/v2/index.ts b/packages/react/v2/index.ts
new file mode 100644
index 00000000..a10c9c87
--- /dev/null
+++ b/packages/react/v2/index.ts
@@ -0,0 +1 @@
+export * from './components/primitives'

From 35d7cc389f3039f78eceb658e8443249ebc85afd Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Thu, 16 Oct 2025 11:57:25 +0700
Subject: [PATCH 2/4] fix: typeheck issue & linting.

---
 .../auth/plugins/email-and-password/views/login/login.tsx | 3 ++-
 .../src/react/components/compound/auto-field/index.tsx    | 8 ++++----
 .../src/react/components/compound/file-upload-field.tsx   | 4 ++--
 .../src/react/components/compound/reorder-group/index.tsx | 2 +-
 .../src/react/views/collections/list/toolbar/filter.tsx   | 1 +
 .../src/react/views/collections/list/toolbar/index.tsx    | 3 ++-
 packages/react/v2/components/primitives/button.tsx        | 2 +-
 packages/react/v2/components/primitives/input-group.tsx   | 2 +-
 8 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/auth/plugins/email-and-password/views/login/login.tsx b/packages/react/src/auth/plugins/email-and-password/views/login/login.tsx
index 48382cc4..295c653c 100644
--- a/packages/react/src/auth/plugins/email-and-password/views/login/login.tsx
+++ b/packages/react/src/auth/plugins/email-and-password/views/login/login.tsx
@@ -1,6 +1,7 @@
+import { Button } from '@genseki/react/v2'
+
 import { LoginClientForm } from './login.client'
 
-import { Button } from '../../../../../react/components/primitives/button'
 import { Typography } from '../../../../../react/components/primitives/typography'
 
 interface LoginViewProps {}
diff --git a/packages/react/src/react/components/compound/auto-field/index.tsx b/packages/react/src/react/components/compound/auto-field/index.tsx
index cb80d2e3..2c67ccd9 100644
--- a/packages/react/src/react/components/compound/auto-field/index.tsx
+++ b/packages/react/src/react/components/compound/auto-field/index.tsx
@@ -8,6 +8,10 @@ import { useQuery } from '@tanstack/react-query'
 import type { Content } from '@tiptap/react'
 
 import {
+  BaseIcon,
+  Button as AriaButton,
+  Checkbox,
+  type CheckboxProps,
   Combobox,
   type ComboboxItem,
   ComboboxLabel,
@@ -16,10 +20,6 @@ import {
   type ComboboxProps,
   ComboboxSearchInput,
   ComboboxTrigger,
-  BaseIcon,
-  Button as AriaButton,
-  Checkbox,
-  type CheckboxProps,
   DatePicker,
   type DatePickerProps,
   FormField,
diff --git a/packages/react/src/react/components/compound/file-upload-field.tsx b/packages/react/src/react/components/compound/file-upload-field.tsx
index 685d01be..c85f5a99 100644
--- a/packages/react/src/react/components/compound/file-upload-field.tsx
+++ b/packages/react/src/react/components/compound/file-upload-field.tsx
@@ -16,9 +16,10 @@ import { mimeTypeValidate } from '../../../core/utils'
 import { useStorageAdapter } from '../../providers/root'
 import { isImageKey } from '../../utils/is-image-key'
 import {
-  Button,
   AriaDescription,
   AriaLabel,
+  BaseIcon,
+  Button,
   Modal,
   ModalClose,
   ModalContent,
@@ -26,7 +27,6 @@ import {
   ModalFooter,
   ModalHeader,
   ModalTitle,
-  BaseIcon,
   ProgressBar,
   Typography,
 } from '../primitives'
diff --git a/packages/react/src/react/components/compound/reorder-group/index.tsx b/packages/react/src/react/components/compound/reorder-group/index.tsx
index 5361e1d7..74d431f4 100644
--- a/packages/react/src/react/components/compound/reorder-group/index.tsx
+++ b/packages/react/src/react/components/compound/reorder-group/index.tsx
@@ -15,7 +15,7 @@ import { CSS } from '@dnd-kit/utilities'
 import { IconChevronLgDown } from '@intentui/icons'
 import { DotsSixIcon } from '@phosphor-icons/react'
 
-import { Button, BaseIcon, Typography } from '../../primitives'
+import { BaseIcon, Button, Typography } from '../../primitives'
 
 interface ReorderGroupProps {
   title?: string
diff --git a/packages/react/src/react/views/collections/list/toolbar/filter.tsx b/packages/react/src/react/views/collections/list/toolbar/filter.tsx
index 62431ca0..f574ab07 100644
--- a/packages/react/src/react/views/collections/list/toolbar/filter.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/filter.tsx
@@ -3,6 +3,7 @@
 import { FunnelIcon } from '@phosphor-icons/react'
 
 import { Button } from '@genseki/react/v2'
+
 import type { InputGroupButton } from '../../../../components'
 
 export interface MinimalCollectionListFilterProps {
diff --git a/packages/react/src/react/views/collections/list/toolbar/index.tsx b/packages/react/src/react/views/collections/list/toolbar/index.tsx
index 8351ad7c..c7adb7d6 100644
--- a/packages/react/src/react/views/collections/list/toolbar/index.tsx
+++ b/packages/react/src/react/views/collections/list/toolbar/index.tsx
@@ -3,12 +3,13 @@
 import { CaretLeftIcon } from '@phosphor-icons/react'
 import { useQueryClient } from '@tanstack/react-query'
 
+import { Button } from '@genseki/react/v2'
+
 import { CollectionListCreate } from './create'
 import { CollectionListDelete } from './delete'
 import { CollectionListFilter } from './filter'
 import { CollectionListSearch } from './search'
 
-import { Button } from '@genseki/react/v2'
 import type { CollectionToolbarActions } from '../../../../../core/collection'
 import { toast } from '../../../..'
 import { useTableStatesContext } from '../../../../providers/table'
diff --git a/packages/react/v2/components/primitives/button.tsx b/packages/react/v2/components/primitives/button.tsx
index 002d4fd7..1cc94075 100644
--- a/packages/react/v2/components/primitives/button.tsx
+++ b/packages/react/v2/components/primitives/button.tsx
@@ -64,7 +64,7 @@ function Button({
     <Comp
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
+      {...(props as any)}
     />
   )
 }
diff --git a/packages/react/v2/components/primitives/input-group.tsx b/packages/react/v2/components/primitives/input-group.tsx
index 836e9837..21b83300 100644
--- a/packages/react/v2/components/primitives/input-group.tsx
+++ b/packages/react/v2/components/primitives/input-group.tsx
@@ -140,7 +140,7 @@ function InputGroupControl({ className, ...props }: React.ComponentProps<typeof
         'flex-2 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
         className
       )}
-      {...props}
+      {...(props as any)}
     />
   )
 }

From bb5a2bd8997a2b40d895829253e66db7c5dfa3e0 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Thu, 16 Oct 2025 11:59:39 +0700
Subject: [PATCH 3/4] chore: add changeset

---
 .changeset/hot-pillows-jam.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .changeset/hot-pillows-jam.md

diff --git a/.changeset/hot-pillows-jam.md b/.changeset/hot-pillows-jam.md
new file mode 100644
index 00000000..33461463
--- /dev/null
+++ b/.changeset/hot-pillows-jam.md
@@ -0,0 +1,10 @@
+---
+'@example/ui-playground': patch
+'@genseki/react': patch
+'@example/erp': patch
+---
+
+- move `shadcn` components to `v2` folder and export the directory
+- flatten `primary` button variant
+- fix: `aria-menu` background
+- rename back the deprecated react-aria components by removing the leading `Aria[component-name]` keyword

From 02da82789063e5345fc2a723e76565d98f4555a3 Mon Sep 17 00:00:00 2001
From: supakornnetsuwan <earth_killerdark@hotmail.com>
Date: Thu, 16 Oct 2025 12:10:28 +0700
Subject: [PATCH 4/4] fix: `--color-overlay` missing variable

---
 packages/react/src/react/components/primitives/menu.tsx | 2 +-
 packages/react/src/react/styles/tailwind.css            | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/react/components/primitives/menu.tsx b/packages/react/src/react/components/primitives/menu.tsx
index 04c37025..28ef5248 100644
--- a/packages/react/src/react/components/primitives/menu.tsx
+++ b/packages/react/src/react/components/primitives/menu.tsx
@@ -122,7 +122,7 @@ const MenuContent = <T extends object>({
       arrowBoundaryOffset={props.arrowBoundaryOffset}
       className={composeTailwindRenderProps(
         popoverClassName,
-        'shadow-xs outline-hidden z-50 min-w-44 rounded-lg p-0 sm:pb-0 bg-bg'
+        'shadow-xs outline-hidden z-50 min-w-44 rounded-lg p-0 sm:pb-0'
       )}
     >
       <MenuPrimitive
diff --git a/packages/react/src/react/styles/tailwind.css b/packages/react/src/react/styles/tailwind.css
index 3c0057e9..31bf4f8c 100644
--- a/packages/react/src/react/styles/tailwind.css
+++ b/packages/react/src/react/styles/tailwind.css
@@ -282,6 +282,7 @@
   --color-accent: var(--color-bluegray-50);
   --color-accent-fg: var(--color-bluegray-900);
 
+  --color-overlay: var(--color-white);
   --color-overlay-fg: var(--color-bluegray-900);
 
   --color-muted: var(--color-bluegray-100);