diff --git a/documentation/src/App.vue b/documentation/src/App.vue
index 5b160fd..92b9b12 100644
--- a/documentation/src/App.vue
+++ b/documentation/src/App.vue
@@ -4,9 +4,9 @@ import { useRoute } from 'vue-router'
 import { RouterLink, RouterView } from 'vue-router'
 import { CollapsibleRoot } from 'radix-vue'
 import router from './router'
+import { Button } from '@sethsharp/lumuix/button'
+import { LumuixModeToggle } from '@sethsharp/lumuix/lumuix'
 import {
-  LumuixModeToggle,
-  Button,
   SidebarProvider,
   Sidebar,
   SidebarContent,
@@ -20,7 +20,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubItem,
   SidebarTrigger,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/sidebar'
 
 const route = useRoute()
 const currentRoute = computed(() => route.path)
diff --git a/documentation/src/components/Code.vue b/documentation/src/components/Code.vue
index 2bf4a36..6332ecb 100644
--- a/documentation/src/components/Code.vue
+++ b/documentation/src/components/Code.vue
@@ -3,7 +3,7 @@ import { codeToHtml } from 'shiki'
 import { onMounted, ref } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { Clipboard } from 'lucide-vue-next'
-import { Button } from '@sethsharp/lumuix'
+import { Button } from '@sethsharp/lumuix/button'
 
 const props = withDefaults(
   defineProps<{
diff --git a/documentation/src/components/RenderPreviewCode.vue b/documentation/src/components/RenderPreviewCode.vue
index 38e3646..7e44fd6 100644
--- a/documentation/src/components/RenderPreviewCode.vue
+++ b/documentation/src/components/RenderPreviewCode.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Eye, Code2 } from 'lucide-vue-next'
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@sethsharp/lumuix'
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@sethsharp/lumuix/tabs'
 import Code from '@/components/Code.vue'
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     sourceCode: string
     lang: string
diff --git a/documentation/src/layouts/ComponentLayout.vue b/documentation/src/layouts/ComponentLayout.vue
index 708b5ea..354073e 100644
--- a/documentation/src/layouts/ComponentLayout.vue
+++ b/documentation/src/layouts/ComponentLayout.vue
@@ -2,12 +2,12 @@
 import { MoveRight } from 'lucide-vue-next'
 import MainLayout from './MainLayout.vue'
 import {
-  Button,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbSeparator,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/breadcrumb'
+import { Button } from '@sethsharp/lumuix/button'
 
 defineProps<{
   title: string
diff --git a/documentation/src/views/Home.vue b/documentation/src/views/Home.vue
index 54870d4..5a737eb 100644
--- a/documentation/src/views/Home.vue
+++ b/documentation/src/views/Home.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@sethsharp/lumuix'
+import { Button } from '@sethsharp/lumuix/button'
 </script>
 
 <template>
diff --git a/documentation/src/views/code/ComboboxCode.vue b/documentation/src/views/code/ComboboxCode.vue
index 7bc9ec2..9aab5ad 100644
--- a/documentation/src/views/code/ComboboxCode.vue
+++ b/documentation/src/views/code/ComboboxCode.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Check, Search } from 'lucide-vue-next'
-import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@sethsharp/lumuix'
 import { ref, watch } from 'vue'
+import { Check, Search } from 'lucide-vue-next'
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from '@sethsharp/lumuix/combobox'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
diff --git a/documentation/src/views/code/PaginationCode.vue b/documentation/src/views/code/PaginationCode.vue
index 25b8b8c..451f4bc 100644
--- a/documentation/src/views/code/PaginationCode.vue
+++ b/documentation/src/views/code/PaginationCode.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Button } from '@sethsharp/lumuix/button'
 import {
-  Button,
   Pagination,
   PaginationEllipsis,
   PaginationFirst,
@@ -10,7 +10,7 @@ import {
   PaginationNext,
   PaginationPrev,
   PaginationDetails,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/pagination'
 import { Link } from '@inertiajs/vue3'
 
 const paginatedData = {
diff --git a/documentation/src/views/components/Accordion.vue b/documentation/src/views/components/Accordion.vue
index 7d43e2a..51dec8f 100644
--- a/documentation/src/views/components/Accordion.vue
+++ b/documentation/src/views/components/Accordion.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@sethsharp/lumuix'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@sethsharp/lumuix/accordion'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Badge.vue b/documentation/src/views/components/Badge.vue
index 772da12..6083fb6 100644
--- a/documentation/src/views/components/Badge.vue
+++ b/documentation/src/views/components/Badge.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Badge } from '@sethsharp/lumuix'
+import { Badge } from '@sethsharp/lumuix/badge'
 
 const variants = ['primary', 'secondary', 'destructive', 'warning'] as const
 const sizes = ['xs', 'sm', 'md', 'lg'] as const
diff --git a/documentation/src/views/components/Breadcrumbs.vue b/documentation/src/views/components/Breadcrumbs.vue
index 1d6975c..20ba904 100644
--- a/documentation/src/views/components/Breadcrumbs.vue
+++ b/documentation/src/views/components/Breadcrumbs.vue
@@ -7,11 +7,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+} from '@sethsharp/lumuix/breadcrumb'
+import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/dropdown-menu'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Button.vue b/documentation/src/views/components/Button.vue
index f29e9c0..cf6e6f2 100644
--- a/documentation/src/views/components/Button.vue
+++ b/documentation/src/views/components/Button.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@sethsharp/lumuix'
+import { Button } from '@sethsharp/lumuix/button'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Calendar.vue b/documentation/src/views/components/Calendar.vue
index 088adcd..bc37fb9 100644
--- a/documentation/src/views/components/Calendar.vue
+++ b/documentation/src/views/components/Calendar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type Ref, ref } from 'vue'
 import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
-import { Calendar } from '@sethsharp/lumuix'
+import { Calendar } from '@sethsharp/lumuix/calendar'
 
 const value = ref(today(getLocalTimeZone())) as Ref<DateValue>
 </script>
diff --git a/documentation/src/views/components/Card.vue b/documentation/src/views/components/Card.vue
index ed87345..8dc23ba 100644
--- a/documentation/src/views/components/Card.vue
+++ b/documentation/src/views/components/Card.vue
@@ -1,20 +1,15 @@
 <script setup lang="ts">
+import { Button } from '@sethsharp/lumuix/button'
 import {
-  Label,
-  Input,
-  Button,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-  SelectRoot,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/card'
+import { Label } from '@sethsharp/lumuix/form'
+import { Input } from '@sethsharp/lumuix/inputs'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Command.vue b/documentation/src/views/components/Command.vue
index b98af52..9565ab6 100644
--- a/documentation/src/views/components/Command.vue
+++ b/documentation/src/views/components/Command.vue
@@ -9,7 +9,7 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/command'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Dialog.vue b/documentation/src/views/components/Dialog.vue
index ab808a5..c77a95c 100644
--- a/documentation/src/views/components/Dialog.vue
+++ b/documentation/src/views/components/Dialog.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Label } from '@sethsharp/lumuix/form'
+import { Input } from '@sethsharp/lumuix/inputs'
+import { Button } from '@sethsharp/lumuix/button'
 import {
-  Label,
-  Input,
-  Button,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -10,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/dialog'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/DropdownMenu.vue b/documentation/src/views/components/DropdownMenu.vue
index 984413c..47d7366 100644
--- a/documentation/src/views/components/DropdownMenu.vue
+++ b/documentation/src/views/components/DropdownMenu.vue
@@ -15,9 +15,8 @@ import {
   UserPlus,
   Users,
 } from 'lucide-vue-next'
-
+import { Button } from '@sethsharp/lumuix/button'
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
@@ -30,7 +29,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/dropdown-menu'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Inputs.vue b/documentation/src/views/components/Inputs.vue
index 1762413..6a7c734 100644
--- a/documentation/src/views/components/Inputs.vue
+++ b/documentation/src/views/components/Inputs.vue
@@ -8,7 +8,7 @@ import {
   Input,
   TextArea,
   Toggle,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/inputs'
 
 const checkboxValue = ref(true)
 
diff --git a/documentation/src/views/components/Lumuix.vue b/documentation/src/views/components/Lumuix.vue
index e68c87c..06000ee 100644
--- a/documentation/src/views/components/Lumuix.vue
+++ b/documentation/src/views/components/Lumuix.vue
@@ -2,13 +2,13 @@
 import { computed, ref } from 'vue'
 import { Link } from '@inertiajs/vue3'
 import { House, Users, Banknote } from 'lucide-vue-next'
+import { Button } from '@sethsharp/lumuix/button'
 import {
-  Button,
   LumuixModeToggle,
   LumuixDatatable,
   LumuixModal,
   LumuixTabs,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/lumuix'
 
 const dataTableConfig = computed(() => ({
   headers: [
diff --git a/documentation/src/views/components/Popover.vue b/documentation/src/views/components/Popover.vue
index 5c027ee..cc131e3 100644
--- a/documentation/src/views/components/Popover.vue
+++ b/documentation/src/views/components/Popover.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { Popover, PopoverContent, PopoverTrigger, Button, Input, Label } from '@sethsharp/lumuix'
+import { Label } from '@sethsharp/lumuix/form'
+import { Input } from '@sethsharp/lumuix/inputs'
+import { Button } from '@sethsharp/lumuix/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@sethsharp/lumuix/popover'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/RangeCalendar.vue b/documentation/src/views/components/RangeCalendar.vue
index acb4272..e765498 100644
--- a/documentation/src/views/components/RangeCalendar.vue
+++ b/documentation/src/views/components/RangeCalendar.vue
@@ -2,7 +2,7 @@
 import { type Ref, ref } from 'vue'
 import type { DateRange } from 'radix-vue'
 import { getLocalTimeZone, today } from '@internationalized/date'
-import { RangeCalendar } from '@sethsharp/lumuix'
+import { RangeCalendar } from '@sethsharp/lumuix/range-calendar'
 
 const start = today(getLocalTimeZone())
 const end = start.add({ days: 7 })
diff --git a/documentation/src/views/components/Select.vue b/documentation/src/views/components/Select.vue
index fdc9877..f5c6d8d 100644
--- a/documentation/src/views/components/Select.vue
+++ b/documentation/src/views/components/Select.vue
@@ -7,7 +7,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/select'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Separator.vue b/documentation/src/views/components/Separator.vue
index 7b17099..0e4a331 100644
--- a/documentation/src/views/components/Separator.vue
+++ b/documentation/src/views/components/Separator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Separator } from '@sethsharp/lumuix'
+import { Separator } from '@sethsharp/lumuix/separator'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Sheet.vue b/documentation/src/views/components/Sheet.vue
index d5ae716..f2c4770 100644
--- a/documentation/src/views/components/Sheet.vue
+++ b/documentation/src/views/components/Sheet.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Label} from '@sethsharp/lumuix/form'
+import { Input } from '@sethsharp/lumuix/inputs'
+import { Button } from '@sethsharp/lumuix/button'
 import {
-  Button,
-  Input,
-  Label,
   Sheet,
   SheetClose,
   SheetContent,
@@ -11,7 +11,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/sheet'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Sidebar.vue b/documentation/src/views/components/Sidebar.vue
index 27042f3..15a8777 100644
--- a/documentation/src/views/components/Sidebar.vue
+++ b/documentation/src/views/components/Sidebar.vue
@@ -12,11 +12,13 @@ import {
   SidebarMenu,
   SidebarGroupContent,
   SidebarGroupLabel,
+} from '@sethsharp/lumuix/sidebar'
+import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/dropdown-menu'
 
 const projects = [
   {
diff --git a/documentation/src/views/components/Skeleton.vue b/documentation/src/views/components/Skeleton.vue
index 554d08d..ab79d08 100644
--- a/documentation/src/views/components/Skeleton.vue
+++ b/documentation/src/views/components/Skeleton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Skeleton } from '@sethsharp/lumuix'
+import { Skeleton } from '@sethsharp/lumuix/skeleton'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Slider.vue b/documentation/src/views/components/Slider.vue
index 442b9db..ba1e42d 100644
--- a/documentation/src/views/components/Slider.vue
+++ b/documentation/src/views/components/Slider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Slider } from '@sethsharp/lumuix'
+import { Slider } from '@sethsharp/lumuix/slider'
 
 const modelValue = ref([50])
 </script>
diff --git a/documentation/src/views/components/Table.vue b/documentation/src/views/components/Table.vue
index 9728bd8..88ab71e 100644
--- a/documentation/src/views/components/Table.vue
+++ b/documentation/src/views/components/Table.vue
@@ -7,7 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/table'
 
 const invoices = [
   {
diff --git a/documentation/src/views/components/Tabs.vue b/documentation/src/views/components/Tabs.vue
index dfa5d41..fb8760f 100644
--- a/documentation/src/views/components/Tabs.vue
+++ b/documentation/src/views/components/Tabs.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
 import {
-  Label,
-  Input,
-  Button,
   TabsRoot,
   TabsContent,
   TabsList,
   TabsTrigger,
+} from '@sethsharp/lumuix/tabs'
+import { Label } from '@sethsharp/lumuix/form'
+import { Input } from '@sethsharp/lumuix/inputs'
+import { Button } from '@sethsharp/lumuix/button'
+import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@sethsharp/lumuix'
+} from '@sethsharp/lumuix/card'
 </script>
 
 <template>
diff --git a/documentation/src/views/components/Toast.vue b/documentation/src/views/components/Toast.vue
index 26a7042..be2a32e 100644
--- a/documentation/src/views/components/Toast.vue
+++ b/documentation/src/views/components/Toast.vue
@@ -2,7 +2,8 @@
 import { h } from 'vue'
 import { CircleCheckIcon, XCircle } from 'lucide-vue-next'
 import MainLayout from '../../layouts/MainLayout.vue'
-import { Toaster, useToast, ToastAction, Button } from '@sethsharp/lumuix'
+import { Button } from '@sethsharp/lumuix/button'
+import { Toaster, useToast, ToastAction } from '@sethsharp/lumuix/toast'
 
 const { toast } = useToast()
 
diff --git a/documentation/src/views/components/ToolTip.vue b/documentation/src/views/components/ToolTip.vue
index c492b8e..8b19f25 100644
--- a/documentation/src/views/components/ToolTip.vue
+++ b/documentation/src/views/components/ToolTip.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@sethsharp/lumuix'
+import { Button } from '@sethsharp/lumuix/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@sethsharp/lumuix/tooltip'
 </script>
 
 <template>
diff --git a/ui/package.json b/ui/package.json
index 5d26f78..671082e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -2,30 +2,149 @@
   "name": "@sethsharp/lumuix",
   "version": "3.0.0-beta.0.2.1",
   "type": "module",
-  "files": [
-    "dist",
-    "src"
-  ],
+  "files": ["dist/*"],
   "repository": {
     "type": "git",
     "url": "https://github.com/SethSharp/lumuix"
   },
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly --declarationDir dist/types",
     "build:vite": "vite build",
     "build": "npm-run-all clean build:types build:vite"
   },
-  "main": "./dist/ui.umd.cjs",
-  "module": "./dist/ui.js",
   "exports": {
-    ".": {
+    "./accordion": {
+      "import": "./dist/accordion.js",
+      "require": "./dist/accordion.cjs",
+      "types": "./src/components/accordion/index.ts"
+    },
+    "./badge": {
+      "import": "./dist/badge.js",
+      "require": "./dist/badge.cjs",
+      "types": "./src/components/badge/index.ts"
+    },
+    "./breadcrumb": {
+      "import": "./dist/breadcrumb.js",
+      "require": "./dist/breadcrumb.cjs",
+      "types": "./src/components/breadcrumb/index.ts"
+    },
+    "./button": {
+      "import": "./dist/button.js",
+      "require": "./dist/button.cjs",
+      "types": "./src/components/button/index.ts"
+    },
+    "./calendar": {
+      "import": "./dist/calendar.js",
+      "require": "./dist/calendar.cjs",
+      "types": "./src/components/calendar/index.ts"
+    },
+    "./card": {
+      "import": "./dist/card.js",
+      "require": "./dist/card.cjs",
+      "types": "./src/components/card/index.ts"
+    },
+    "./combobox": {
+      "import": "./dist/combobox.js",
+      "require": "./dist/combobox.cjs",
+      "types": "./src/components/combobox/index.ts"
+    },
+    "./command": {
+      "import": "./dist/command.js",
+      "require": "./dist/command.cjs",
+      "types": "./src/components/command/index.ts"
+    },
+    "./dialog": {
+      "import": "./dist/dialog.js",
+      "require": "./dist/dialog.cjs",
+      "types": "./src/components/dialog/index.ts"
+    },
+    "./dropdown-menu": {
+      "import": "./dist/dropdown-menu.js",
+      "require": "./dist/dropdown-menu.cjs",
+      "types": "./src/components/dropdown-menu/index.ts"
+    },
+    "./form": {
+      "import": "./dist/form.js",
+      "require": "./dist/form.cjs",
+      "types": "./src/components/form/index.ts"
+    },
+    "./inputs": {
+      "import": "./dist/inputs.js",
+      "require": "./dist/inputs.cjs",
+      "types": "./src/components/inputs/index.ts"
+    },
+    "./lumuix": {
       "import": "./dist/lumuix.js",
-      "require": "./dist/lumuix.umd.cjs",
-      "types": "./dist/types/index.d.ts"
+      "require": "./dist/lumuix.cjs",
+      "types": "./src/components/lumuix/index.ts"
+    },
+    "./pagination": {
+      "import": "./dist/pagination.js",
+      "require": "./dist/pagination.cjs",
+      "types": "./src/components/pagination/index.ts"
+    },
+    "./popover": {
+      "import": "./dist/popover.js",
+      "require": "./dist/popover.cjs",
+      "types": "./src/components/popover/index.ts"
+    },
+    "./range-calendar": {
+      "import": "./dist/range-calendar.js",
+      "require": "./dist/range-calendar.cjs",
+      "types": "./src/components/range-calendar/index.ts"
+    },
+    "./select": {
+      "import": "./dist/select.js",
+      "require": "./dist/select.cjs",
+      "types": "./src/components/select/index.ts"
+    },
+    "./separator": {
+      "import": "./dist/separator.js",
+      "require": "./dist/separator.cjs",
+      "types": "./src/components/separator/index.ts"
+    },
+    "./sheet": {
+      "import": "./dist/sheet.js",
+      "require": "./dist/sheet.cjs",
+      "types": "./src/components/sheet/index.ts"
+    },
+    "./sidebar": {
+      "import": "./dist/sidebar.js",
+      "require": "./dist/sidebar.cjs",
+      "types": "./src/components/sidebar/index.ts"
+    },
+    "./skeleton": {
+      "import": "./dist/skeleton.js",
+      "require": "./dist/skeleton.cjs",
+      "types": "./src/components/skeleton/index.ts"
+    },
+    "./slider": {
+      "import": "./dist/slider.js",
+      "require": "./dist/slider.cjs",
+      "types": "./src/components/slider/index.ts"
+    },
+    "./table": {
+      "import": "./dist/table.js",
+      "require": "./dist/table.cjs",
+      "types": "./src/components/table/index.ts"
+    },
+    "./tabs": {
+      "import": "./dist/tabs.js",
+      "require": "./dist/tabs.cjs",
+      "types": "./src/components/tabs/index.ts"
+    },
+    "./toast": {
+      "import": "./dist/toast.js",
+      "require": "./dist/toast.cjs",
+      "types": "./src/components/toast/index.ts"
     },
-    "./dist/presets/slate.css": "./dist/presets/slate.css"
+    "./tooltip": {
+      "import": "./dist/tooltip.js",
+      "require": "./dist/tooltip.cjs",
+      "types": "./src/components/tooltip/index.ts"
+    }
   },
   "peerDependencies": {
     "radix-vue": "^1.9.1",
diff --git a/ui/tsconfig.node.json b/ui/tsconfig.node.json
index 52de997..f094063 100644
--- a/ui/tsconfig.node.json
+++ b/ui/tsconfig.node.json
@@ -13,7 +13,7 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "types": ["node"]
   }
 }
diff --git a/ui/vite.config.js b/ui/vite.config.js
index b37dcf3..f0fde56 100644
--- a/ui/vite.config.js
+++ b/ui/vite.config.js
@@ -19,19 +19,48 @@ export default defineConfig({
     })
   ],
   build: {
+    emptyOutDir: false,
+    outDir: "dist",
+    sourcemap: true,
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'lumuix',
-      fileName: 'lumuix',
+      entry: {
+        'accordion': './src/components/accordion/index.ts',
+        'badge': './src/components/badge/index.ts',
+        'breadcrumb': './src/components/breadcrumb/index.ts',
+        'button': './src/components/button/index.ts',
+        'calendar': './src/components/calendar/index.ts',
+        'card': './src/components/card/index.ts',
+        'combobox': './src/components/combobox/index.ts',
+        'command': './src/components/command/index.ts',
+        'dialog': './src/components/dialog/index.ts',
+        'dropdown-menu': './src/components/dropdown-menu/index.ts',
+        'form': './src/components/form/index.ts',
+        'inputs': './src/components/inputs/index.ts',
+        'lumuix': './src/components/lumuix/index.ts',
+        'pagination': './src/components/pagination/index.ts',
+        'popover': './src/components/popover/index.ts',
+        'range-calendar': './src/components/range-calendar/index.ts',
+        'select': './src/components/select/index.ts',
+        'separator': './src/components/separator/index.ts',
+        'sheet': './src/components/sheet/index.ts',
+        'sidebar': './src/components/sidebar/index.ts',
+        'skeleton': './src/components/skeleton/index.ts',
+        'slider': './src/components/slider/index.ts',
+        'table': './src/components/table/index.ts',
+        'tabs': './src/components/tabs/index.ts',
+        'toast': './src/components/toast/index.ts',
+        'tooltip': './src/components/tooltip/index.ts',
+      },
+      formats: ["es", "cjs"],
     },
     rollupOptions: {
       external: ['vue'],
     },
-    emptyOutDir: false,
   },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@/components': resolve(__dirname, 'src/components'),
     },
   },
 })
\ No newline at end of file