fykom · fykom · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026 · Jul 23, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .kiro
 .vscode
-.agents/
+.agents/
+.gemini
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -53,6 +53,30 @@ A new file will be created in the `.changeset` directory. Commit this file with
    - For components: `pnpm dev:kombase`
    - For documentation: `pnpm dev:docs`
 
+## Source Code Location
+
+All component source code lives in the `registry/` directory, organized by category:
+
+- `registry/ui/` — UI primitives (button, input, dialog, etc.)
+- `registry/components/` — Complex components (data-table, tour, stepper, etc.)
+- `registry/form/` — Form wrappers with react-hook-form integration
+- `registry/hooks/` — Custom React hooks
+- `registry/lib/` — Utility functions and helpers
+
+**This is the single source of truth.** When editing components, always edit files in `registry/`, not `packages/src/`.
+
+The `packages/src/` directory is maintained temporarily for npm backward compatibility and will be removed after full registry cutover.
+
+### Building the Registry
+
+To build the registry output (generates JSON files for shadcn CLI):
+
+```bash
+pnpm build:registry
+```
+
+Output is written to `docs/public/r/`.
+
 ## Documentation
 
 Our documentation is built with [Fumadocs](https://fumadocs.dev/). If you are updating components, please also update the corresponding documentation in the `docs` package.

diff --git a/commitlint.config.js → commitlint.config.mjs b/commitlint.config.js → commitlint.config.mjs
diff --git a/docs/app/content/components/action-bar.mdx b/docs/app/content/components/action-bar.mdx
@@ -4,6 +4,12 @@ description: A floating toolbar that appears conditionally, typically used for b
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/action-bar
+```
+
 <ComponentTabs name="action-bar-demo" align="center" className="p-4" />
 
 ## Overview
@@ -20,7 +26,7 @@ import {
   ActionBarItem,
   ActionBarSelection,
   ActionBarSeparator,
-} from "kombase";
+} from "@/components/action-bar";
 ```
 
 ## Anatomy

diff --git a/docs/app/content/components/avatar-group.mdx b/docs/app/content/components/avatar-group.mdx
@@ -4,6 +4,12 @@ description: A container component for grouping overlapping avatars or custom ic
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/avatar-group
+```
+
 ## Examples
 
 ### Truncation

diff --git a/docs/app/content/components/confirm-dialog.mdx b/docs/app/content/components/confirm-dialog.mdx
@@ -4,6 +4,12 @@ description: Confirmation dialog component built on top of AlertDialog.
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/confirm-dialog
+```
+
 ## Overview
 
 `ConfirmDialog` is a reusable confirmation modal built using `AlertDialog`.

diff --git a/docs/app/content/components/data-table.mdx b/docs/app/content/components/data-table.mdx
@@ -7,6 +7,12 @@ links:
   api: /docs/components/radix/data-table#api-reference
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/data-table
+```
+
 <ComponentTabs name="table-demo" align="start" className="p-4" />
 
 Reference the [TanStack Table Column Definitions Guide](https://tanstack.com/table/latest/docs/guide/column-defs#column-definitions-guide) for detailed column definition guide.
@@ -29,12 +35,10 @@ Reference the [TanStack Table Column Definitions Guide](https://tanstack.com/tab
 Import all components and combine them:
 
 ```tsx
-import {
-  DataTable,
-  DataTableToolbar,
-  DataTableAdvanceFilter,
-  useDataTable
-} from "kombase";
+import { DataTable } from "@/components/data-table/data-table";
+import { DataTableAdvanceFilter } from "@/components/data-table/data-table-advance-filter";
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
+import { useDataTable } from "@/hooks/use-data-table";
 
 const { table } = useDataTable({
   data,
@@ -75,7 +79,7 @@ const { table } = useDataTable({
 
     ```tsx
     import { Text, CalendarIcon, DollarSign } from "lucide-react";
-    import { DataTableColumnHeader } from "kombase";
+    import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
 
     const columns = React.useMemo(() => [
       {
@@ -105,7 +109,7 @@ const { table } = useDataTable({
     Initialize the table state using the `useDataTable` hook:
 
     ```tsx
-    import { useDataTable } from "kombase";
+    import { useDataTable } from "@/hooks/use-data-table";
 
     function TableDemo() {
       const { table } = useDataTable({
@@ -133,7 +137,8 @@ const { table } = useDataTable({
     Pass the table instance to the `DataTable`, and `DataTableToolbar` components:
 
     ```tsx
-    import { DataTable, DataTableToolbar } from "kombase";
+    import { DataTable } from "@/components/data-table/data-table";
+    import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
 
     function DataTableDemo() {
       return (
@@ -208,7 +213,7 @@ The `useDataTable` hook acts as an intelligent wrapper around `useReactTable` fr
 ### Import
 
 ```ts
-import { useDataTable } from "kombase";
+import { useDataTable } from "@/hooks/use-data-table";
 ```
 
 ### Usage
@@ -219,7 +224,9 @@ First, define your columns. Use the `meta` property to configure filter behavior
 
 ```tsx
 import { useMemo, useState } from "react";
-import { useDataTable, DataTable, DataTableColumnHeader } from "kombase";
+import { DataTable } from "@/components/data-table/data-table";
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
+import { useDataTable } from "@/hooks/use-data-table";
 import type { ColumnDef } from "@tanstack/react-table";
 
 function useInvoiceColumns(): ColumnDef<Invoice>[] {
@@ -296,7 +303,8 @@ If you don't provide `page`, `perPage`, or `onPageChange`, the hook will manage
 ```tsx
 import * as React from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { DataTable, useDataTable } from "kombase";
+import { DataTable } from "@/components/data-table/data-table";
+import { useDataTable } from "@/hooks/use-data-table";
 
 function InfiniteScrollTable() {
   const {
@@ -368,7 +376,10 @@ Here is a complete step-by-step walkthrough for React Router v7 / Remix:
 ```tsx
 import { useSearchParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
-import { DataTable, DataTableToolbar, DataTablePagination, useDataTable } from "kombase";
+import { DataTable } from "@/components/data-table/data-table";
+import { DataTablePagination } from "@/components/data-table/data-table-pagination";
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
+import { useDataTable } from "@/hooks/use-data-table";
 
 function InvoicesTable() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -479,7 +490,7 @@ Instead of writing manual mapper functions for every column, the built-in `resol
 ##### Import
 
 ```ts
-import { resolveFiltersToFlatParams, mapDateFilterToParams } from "kombase";
+import { resolveFiltersToFlatParams, mapDateFilterToParams } from "@/lib/filter-helper";
 ```
 
 ##### Configuration Options
@@ -663,7 +674,7 @@ meta: {
 #### Skeleton Usage
 
 ```tsx
-import { DataTableSkeleton } from "kombase";
+import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton";
 
 function MyTableSkeleton() {
   return (
@@ -683,7 +694,7 @@ The recommended pattern when using frameworks like Next.js or React Router v7 wi
 
 ```tsx
 import { Suspense } from "react";
-import { DataTableSkeleton } from "kombase";
+import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton";
 
 function Page() {
   return (

diff --git a/docs/app/content/components/file-upload.mdx b/docs/app/content/components/file-upload.mdx
@@ -4,6 +4,12 @@ description: is a flexible, highly customizable file upload dropzone and list sy
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/file-upload
+```
+
 ## Examples
 
 ### Direct Upload

diff --git a/docs/app/content/components/long-text.mdx b/docs/app/content/components/long-text.mdx
@@ -4,6 +4,12 @@ description: Utility component for truncating long text with tooltip and popover
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/long-text
+```
+
 ## Overview
 
 `LongText` automatically truncates overflowing text using CSS `truncate`.

diff --git a/docs/app/content/components/password-input.mdx b/docs/app/content/components/password-input.mdx
@@ -0,0 +1,27 @@
+---
+title: PasswordInput
+description: A password field with a show/hide toggle button.
+preview: false
+---
+
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/password-input
+```
+
+## Examples
+
+### Basic
+
+<ComponentTabs name="password-input-demo" />
+
+### With Form Validation
+
+<ComponentTabs name="form-password-demo" />
+
+## API
+
+### FormInputPassword
+
+<AutoTypeTable path="../types/form-password.types.ts" name="FormInputPassword" />
diff --git a/docs/app/content/components/phone-input.mdx b/docs/app/content/components/phone-input.mdx
@@ -4,6 +4,12 @@ description: An accessible phone input component with automatic country detectio
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/phone-input
+```
+
 ## Examples
 
 ### Basic

diff --git a/docs/app/content/components/rating.mdx b/docs/app/content/components/rating.mdx
@@ -4,10 +4,16 @@ description: A customizable rating component with support for custom sizes, valu
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/rating
+```
+
 ## Components Layout
 
 ```tsx
-import { Rating, RatingItem } from "kombase";
+import { Rating, RatingItem } from "@/components/rating";
 
 export default function RatingDemo() {
   return (

diff --git a/docs/app/content/components/stepper.mdx b/docs/app/content/components/stepper.mdx
@@ -4,6 +4,12 @@ description: A flexible multi-step process indicator component supporting custom
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/stepper
+```
+
 ## Examples
 
 ### Vertical Orientation

diff --git a/docs/app/content/components/timeline.mdx b/docs/app/content/components/timeline.mdx
@@ -4,6 +4,12 @@ description: A customizable, visual timeline component for presenting events, st
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/timeline
+```
+
 ## Components Layout
 
 ```tsx
@@ -17,7 +23,7 @@ import {
   TimelineItem,
   TimelineTime,
   TimelineTitle,
-} from "kombase";
+} from "@/components/timeline";
 
 export default function TimelineDemo() {
   return (

diff --git a/docs/app/content/components/tour.mdx b/docs/app/content/components/tour.mdx
@@ -4,6 +4,12 @@ description: A flexible step-by-step product tour component to guide users throu
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/tour
+```
+
 ## Components Layout
 
 ```tsx
@@ -23,7 +29,7 @@ import {
   TourStep,
   TourStepCounter,
   TourTitle,
-} from "kombase";
+} from "@/components/tour";
 
 export default function TourDemo() {
   return (

diff --git a/docs/app/content/form/form-date-picker.mdx b/docs/app/content/form/form-date-picker.mdx
@@ -4,6 +4,12 @@ description: is the standard text input element.
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/form-date-picker
+```
+
 ## Examples
 
 ### FormDatePicker

diff --git a/docs/app/content/form/form-input-group.mdx b/docs/app/content/form/form-input-group.mdx
@@ -4,6 +4,12 @@ description: renders an input equipped with an **optional right-side addon** (te
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/form-input-group
+```
+
 ## Examples
 
 ### FormInputGroup

diff --git a/docs/app/content/form/form-input.mdx b/docs/app/content/form/form-input.mdx
@@ -4,6 +4,12 @@ description: is the standard text input element.
 preview: false
 ---
 
+## Installation
+
+```bash
+npx shadcn@latest add @kombase/form-input
+```
+
 ## Examples
 
 ### FormInput