+ Created At
+ {
+ if (!dateRange?.from || !dateRange?.to) {
+ return undefined;
+ }
+ return [
+ dateRange.from.toISOString(),
+ dateRange.to.toISOString(),
+ ];
+ }}
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ return
{row.original.createdAt}
;
+ },
+ },
+ {
+ id: "updatedAt", // If you have an updatedAt field
+ accessorKey: "updatedAt", // Change to updatedAt if available
+ size: 220,
+ header: ({ column }) => {
+ return (
+
+ Updated At
+ {
+ if (!date) return undefined;
+ return date.toISOString().split("T")[0];
+ }}
+ />
+
\n \n \n );\n});\n\nDeleteButton.displayName = \"DeleteButton\";\n",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/delete.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/clone.tsx",
+ "content": "\"use client\";\n\nimport React from \"react\";\nimport { type BaseKey, useCloneButton } from \"@refinedev/core\";\nimport { Copy } from \"lucide-react\";\nimport { Button } from \"@/registry/new-york/ui/button\";\n\ntype CloneButtonProps = {\n /**\n * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.\n * @default Inferred resource name from the route\n */\n resource?: string;\n /**\n * Data item identifier for the actions with the API\n * @default Reads `:id` from the URL\n */\n recordItemId?: BaseKey;\n /**\n * Access Control configuration for the button\n * @default `{ enabled: true, hideIfUnauthorized: false }`\n */\n accessControl?: {\n enabled?: boolean;\n hideIfUnauthorized?: boolean;\n };\n /**\n * `meta` property is used when creating the URL for the related action and path.\n */\n meta?: Record;\n} & React.ComponentProps;\n\nexport const CloneButton = React.forwardRef<\n React.ComponentRef,\n CloneButtonProps\n>(\n (\n { resource, recordItemId, accessControl, meta, children, onClick, ...rest },\n ref,\n ) => {\n const { hidden, disabled, LinkComponent, to, label } = useCloneButton({\n accessControl,\n resource,\n id: recordItemId,\n meta,\n });\n\n const isDisabled = disabled || rest.disabled;\n const isHidden = hidden || rest.hidden;\n\n if (isHidden) return null;\n\n return (\n \n );\n },\n);\n\nCloneButton.displayName = \"CloneButton\";\n",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/clone.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/list.tsx",
+ "content": "\"use client\";\n\nimport React from \"react\";\nimport { type BaseKey, useListButton } from \"@refinedev/core\";\nimport { Button } from \"@/registry/new-york/ui/button\";\nimport { List } from \"lucide-react\";\n\ntype ListButtonProps = {\n /**\n * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.\n * @default Inferred resource name from the route\n */\n resource?: BaseKey;\n /**\n * Access Control configuration for the button\n * @default `{ enabled: true, hideIfUnauthorized: false }`\n */\n accessControl?: {\n enabled?: boolean;\n hideIfUnauthorized?: boolean;\n };\n /**\n * `meta` property is used when creating the URL for the related action and path.\n */\n meta?: Record;\n} & React.ComponentProps;\n\nexport const ListButton = React.forwardRef<\n React.ComponentRef,\n ListButtonProps\n>(({ resource, accessControl, meta, children, onClick, ...rest }, ref) => {\n const { hidden, disabled, LinkComponent, to, label } = useListButton({\n resource,\n accessControl,\n meta,\n });\n\n const isDisabled = disabled || rest.disabled;\n const isHidden = hidden || rest.hidden;\n\n if (isHidden) return null;\n\n return (\n \n );\n});\n\nListButton.displayName = \"ListButton\";\n",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/list.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/refresh.tsx",
+ "content": "\"use client\";\n\nimport React from \"react\";\nimport { type BaseKey, useRefreshButton } from \"@refinedev/core\";\nimport { RefreshCcw } from \"lucide-react\";\nimport { Button } from \"@/registry/new-york/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype RefreshButtonProps = {\n /**\n * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.\n * @default Inferred resource name from the route\n */\n resource?: string;\n /**\n * Data item identifier for the actions with the API\n * @default Reads `:id` from the URL\n */\n recordItemId?: BaseKey;\n /**\n * Target data provider name for API call to be made\n * @default `\"default\"`\n */\n dataProviderName?: string;\n /**\n * `meta` property is used when creating the URL for the related action and path.\n */\n meta?: Record;\n} & React.ComponentProps;\n\nexport const RefreshButton = React.forwardRef<\n React.ComponentRef,\n RefreshButtonProps\n>(\n (\n { resource, recordItemId, dataProviderName, meta, children, ...rest },\n ref,\n ) => {\n const {\n onClick: refresh,\n loading,\n label,\n } = useRefreshButton({\n resource,\n id: recordItemId,\n dataProviderName,\n meta,\n });\n\n const isDisabled = rest.disabled || loading;\n\n return (\n ) => {\n if (isDisabled) {\n e.preventDefault();\n return;\n }\n refresh();\n }}\n {...rest}\n ref={ref}\n disabled={isDisabled}\n >\n {children ?? (\n
\n );\n};\n\nListView.displayName = \"ListView\";\n",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/views/list-view.tsx"
+ }
+ ],
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["views", "layout", "crud", "pages"]
+}
diff --git a/packages/ui/public/vercel.svg b/packages/ui/public/vercel.svg
new file mode 100644
index 000000000000..77053960334e
--- /dev/null
+++ b/packages/ui/public/vercel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/ui/public/window.svg b/packages/ui/public/window.svg
new file mode 100644
index 000000000000..b2b2a44f6ebc
--- /dev/null
+++ b/packages/ui/public/window.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/ui/refine-ui-docs/auto-save-indicator.md b/packages/ui/refine-ui-docs/auto-save-indicator.md
new file mode 100644
index 000000000000..329f39d37aab
--- /dev/null
+++ b/packages/ui/refine-ui-docs/auto-save-indicator.md
@@ -0,0 +1,103 @@
+# Auto Save Indicator
+
+The `AutoSaveIndicator` component provides visual feedback for auto-save operations in forms. It displays different states (loading, success, error, idle) with appropriate icons and messages, making it clear to users when their data is being saved automatically.
+
+**Key Features:**
+
+- **Real-time Status Updates**: Shows current auto-save status with visual indicators
+- **Smooth Transitions**: Includes fade effects for better user experience
+- **Customizable Elements**: Override default elements for each state
+- **Internationalization**: Supports translation through Refine's `useTranslate` hook
+- **Responsive Design**: Works seamlessly across different screen sizes
+
+## Installation
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/auto-save-indicator.json
+```
+
+This command will install the `AutoSaveIndicator` component along with its dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+ - `lucide-react`
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── form/
+│ ├── auto-save-indicator.tsx
+└── ... (other registry components)
+```
+
+## Usage
+
+The `AutoSaveIndicator` is typically used with Refine's `useForm` hook when auto-save is enabled:
+
+```tsx
+import { useForm } from "@refinedev/react-hook-form";
+import { AutoSaveIndicator } from "@/components/refine-ui/form/auto-save-indicator";
+import {
+ EditView,
+ EditViewHeader,
+} from "@/components/refine-ui/views/edit-view";
+
+export default function EditPost() {
+ const {
+ refineCore: { onFinish, autoSaveProps },
+ ...form
+ } = useForm({
+ refineCoreProps: {
+ autoSave: {
+ enabled: true,
+ debounce: 1000, // Auto-save after 1 second of inactivity
+ },
+ },
+ });
+
+ return (
+
+ }
+ />
+ {/* Your form content */}
+
+ );
+}
+```
+
+## Auto-Save Configuration
+
+The auto-save functionality is configured through the `useForm` hook's `refineCoreProps.autoSave` option:
+
+```tsx
+const {
+ refineCore: { autoSaveProps },
+ ...form
+} = useForm({
+ refineCoreProps: {
+ autoSave: {
+ enabled: true,
+ debounce: 1000, // Wait 1 second after user stops typing
+ invalidateOnUnmount: true, // Refresh data when component unmounts
+ onMutationSuccess: (data) => {
+ // Custom success handler
+ console.log("Auto-save successful:", data);
+ },
+ onMutationError: (error) => {
+ // Custom error handler
+ console.error("Auto-save failed:", error);
+ },
+ },
+ },
+});
+```
+
+| Prop | Type | Description |
+| ---------- | --------------------------------------------- | --------------------------------------- |
+| `status` | `"loading" \| "success" \| "error" \| "idle"` | Current auto-save status |
+| `elements` | `AutoSaveIndicatorElements` | Optional custom elements for each state |
diff --git a/packages/ui/refine-ui-docs/buttons.md b/packages/ui/refine-ui-docs/buttons.md
new file mode 100644
index 000000000000..360abcf2091e
--- /dev/null
+++ b/packages/ui/refine-ui-docs/buttons.md
@@ -0,0 +1,164 @@
+# Refine Action Buttons
+
+The `buttons` registry item provides a comprehensive set of pre-styled action buttons commonly used in Refine applications for CRUD operations and navigation. These buttons integrate with Refine's hooks for functionality like navigation, data operations, and access control.
+
+**When to use:**
+
+- To quickly add standard CRUD action buttons (Create, Edit, Show, Delete, Clone, List, Refresh) to your pages.
+- To ensure consistent styling and behavior for common actions across your application.
+- To leverage Refine's built-in functionalities like `useNavigation`, `useDelete`, `useCan`, etc., with minimal setup.
+
+## Installation
+
+Install the `buttons` component package via shadcn/ui registry:
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/buttons.json
+```
+
+This command will install all the button components listed below.
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+ - `lucide-react`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `button` (shadcn/ui component)
+ - `popover` (shadcn/ui component)
+ -
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── buttons/
+│ ├── create.tsx
+│ ├── edit.tsx
+│ ├── show.tsx
+│ ├── delete.tsx
+│ ├── clone.tsx
+│ ├── list.tsx
+│ └── refresh.tsx
+└── ... (other registry components)
+```
+
+- `create.tsx` (CreateButton)
+- `edit.tsx` (EditButton)
+- `show.tsx` (ShowButton)
+- `delete.tsx` (DeleteButton)
+- `clone.tsx` (CloneButton)
+- `list.tsx` (ListButton)
+- `refresh.tsx` (RefreshButton)
+
+## Usage
+
+All buttons are designed to work seamlessly with Refine's resource and routing system. They typically infer the `resource` and `recordItemId` (where applicable) from the current route but can also be explicitly provided via props.
+
+Props
+
+| Prop | Type | Default | Description |
+| --------------- | ------------------------------------------------------ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `resource` | `string` | Inferred from route | The resource name or identifier. |
+| `recordItemId` | `BaseKey` (string or number) | Inferred for item actions (edit, show, delete, clone) | The ID of the record for item-specific actions. |
+| `accessControl` | `{ enabled?: boolean; hideIfUnauthorized?: boolean; }` | `{ enabled: true, hideIfUnauthorized: false }` | Configures access control. If `hideIfUnauthorized` is true, the button will not render if the user lacks permission. |
+| `meta` | `Record` | - | Additional metadata to pass to data hooks or navigation. |
+| `` | `boolean` | `false` | If true, only the icon will be shown. |
+| `children` | `ReactNode` | Default text & icon | Custom content for the button. Overrides default text and icon. |
+| `...rest` | `React.ComponentProps` | - | Other props are passed down to the underlying shadcn/ui `Button` component (e.g., `variant`, `size`, `className`, `onClick`). |
+
+### `CreateButton`
+
+Navigates to the create page of a resource.
+
+**Component:** `CreateButton` from `@/components/refine-ui/buttons/create`
+
+```tsx
+import { CreateButton } from "@/components/refine-ui/buttons/create";
+
+;
+```
+
+### `EditButton`
+
+Navigates to the edit page for a specific record.
+
+**Component:** `EditButton` from `@/components/refine-ui/buttons/edit`
+
+```tsx
+import { EditButton } from "@/components/refine-ui/buttons/edit";
+
+;
+```
+
+### `ShowButton`
+
+Navigates to the show page for a specific record.
+
+**Component:** `ShowButton` from `@/components/refine-ui/buttons/show`
+
+```tsx
+import { ShowButton } from "@/components/refine-ui/buttons/show";
+
+;
+```
+
+### `DeleteButton`
+
+Deletes a specific record, usually with a confirmation popover.
+
+**Component:** `DeleteButton` from `@/components/refine-ui/buttons/delete`
+
+**Additional Props:**
+
+| Prop | Type | Default | Description |
+| --------------------- | --------------------------- | --------------- | ----------------------------------------------------------------------- |
+| `onSuccess` | `(value: any) => void` | - | Callback function invoked after successful deletion. |
+| `confirmTitle` | `string` | "Are you sure?" | Title for the confirmation popover. |
+| `confirmOkText` | `string` | "Delete" | Text for the confirm button in the popover. |
+| `confirmCancelText` | `string` | "Cancel" | Text for the cancel button in the popover. |
+| `successNotification` | `string \| false \| object` | Default message | Notification message on successful deletion. Set to `false` to disable. |
+| `errorNotification` | `string \| false \| object` | Default message | Notification message on error. Set to `false` to disable. |
+
+```tsx
+import { DeleteButton } from "@/components/refine-ui/buttons/delete";
+
+;
+```
+
+### `CloneButton`
+
+Navigates to the create page, often pre-filling form data from the record being cloned.
+
+**Component:** `CloneButton` from `@/components/refine-ui/buttons/clone`
+
+```tsx
+import { CloneButton } from "@/components/refine-ui/buttons/clone";
+
+;
+```
+
+### `ListButton`
+
+Navigates to the list page of a resource.
+
+**Component:** `ListButton` from `@/components/refine-ui/buttons/list`
+
+```tsx
+import { ListButton } from "@/components/refine-ui/buttons/list";
+
+;
+```
+
+### `RefreshButton`
+
+Refreshes the data for the current view or a specific record.
+
+**Component:** `RefreshButton` from `@/components/refine-ui/buttons/refresh`
+
+**Additional Props:**
+
+| Prop | Type | Default | Description |
+| -------------- | ---------------------------- | ------- | ----------------------------------------------------- |
+| `recordItemId` | `BaseKey` (string or number) | - | If provided, refreshes data for this specific record. |
+| `onRefresh` | ` |
diff --git a/packages/ui/refine-ui-docs/data-table.md b/packages/ui/refine-ui-docs/data-table.md
new file mode 100644
index 000000000000..3be20234ab2c
--- /dev/null
+++ b/packages/ui/refine-ui-docs/data-table.md
@@ -0,0 +1,676 @@
+# Refine DataTable Component
+
+The `DataTable` component and its associated sub-components (`DataTableSorter`, `DataTableFilterDropdown*`, `DataTablePagination`) provide a powerful and flexible solution for displaying and managing tabular data in Refine applications. It's built on top of TanStack Table and integrates seamlessly with Refine's data hooks and shadcn/ui components.
+
+Features:
+
+- **Built on TanStack Table**: Leverages the power and flexibility of TanStack Table v8.
+- **Refine Integration**: Works seamlessly with `@refinedev/react-table` adapter and `useTable` hook for data fetching, filtering, sorting, and pagination state management.
+- **Comprehensive Filtering**: Multiple filter types (text, numeric, date, combobox) with customizable operators.
+- **Sorting**: Easy-to-use sorter component for column headers.
+- **Pagination**: Includes a pagination component with page navigation and page size selection.
+- **shadcn/ui Styling**: All components are styled using shadcn/ui primitives, ensuring consistency with your UI.
+- **Customizable Column Definitions**: Define columns using TanStack Table's `ColumnDef` API, allowing for custom cell rendering, header components, and more.
+- **Sticky Header/Columns**: Optional props for sticky table header and actions column.
+- **Action Buttons**: The "actions" column in the example uses `DropdownMenu` with `ShowButton`, `EditButton`, and `DeleteButton` from the Refine UI `buttons` package. You can customize these as needed.
+
+**When to use:**
+
+- Displaying lists of resources (e.g., posts, products, users) in a table format.
+- When you need features like sorting, filtering (text, numeric, date, combobox), and pagination.
+- To create a consistent and accessible data table experience.
+
+## Installation
+
+Install the `data-table` component package via shadcn/ui registry:
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/data-table.json
+```
+
+This command will install the `DataTable` main component and all its sub-components for filtering, sorting, and pagination.
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+ - `@refinedev/react-table`
+ - `@tanstack/react-table`
+ - `react-day-picker`
+ - `lucide-react`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `table`
+ - `button`
+ - `input`
+ - `badge`
+ - `popover`
+ - `command`
+ - `separator`
+ - `calendar`
+ - `select`
+
+**Note:** The CLI will automatically install required npm dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── data-table/
+│ ├── data-table.tsx
+│ ├── data-table-sorter.tsx
+│ ├── data-table-filter.tsx
+│ ├── data-table-pagination.tsx
+└── ... (other registry components)
+```
+
+## Usage
+
+This example demonstrates how to use `DataTable` with sorting, various filters, and pagination within a Refine list page.
+
+```tsx
+import { useMemo } from "react";
+import { useTable } from "@refinedev/react-table";
+import type { ColumnDef } from "@tanstack/react-table";
+import { useList } from "@refinedev/core";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal } from "lucide-react";
+import { DataTable } from "@/components/refine-ui/data-table/data-table";
+import { DataTableSorter } from "@/components/refine-ui/data-table/data-table-sorter";
+import {
+ DataTableFilterDropdownText,
+ DataTableFilterCombobox,
+ DataTableFilterDropdownDateRangePicker,
+ DataTableFilterDropdownDateSinglePicker,
+ DataTableFilterDropdownNumeric,
+} from "@/components/refine-ui/data-table/data-table-filter";
+import { EditButton } from "@/components/refine-ui/buttons/edit";
+import { DeleteButton } from "@/components/refine-ui/buttons/delete";
+import {
+ ListViewHeader,
+ ListView,
+} from "@/components/refine-ui/views/list-view";
+import { ShowButton } from "@/components/refine-ui/buttons/show";
+import { cn } from "@/lib/utils";
+import type { Post, Category } from "../../types/resources"; // Define your types
+
+export function PostsListPage() {
+ const { data: categoriesData } = useList({
+ resource: "categories",
+ });
+ const categories = categoriesData?.data ?? [];
+
+ const columns = useMemo[]>(
+ () => [
+ {
+ id: "id",
+ accessorKey: "id",
+ size: 96,
+ header: ({ column, table }) => {
+ return (
+
+ Created At
+ {
+ if (!dateRange?.from || !dateRange?.to) {
+ return undefined;
+ }
+ return [
+ dateRange.from.toISOString(),
+ dateRange.to.toISOString(),
+ ];
+ }}
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ return
{row.original.createdAt}
;
+ },
+ },
+ {
+ id: "updatedAt", // If you have an updatedAt field
+ accessorKey: "updatedAt", // Change to updatedAt if available
+ size: 220,
+ header: ({ column }) => {
+ return (
+
+ Updated At
+ {
+ if (!date) return undefined;
+ return date.toISOString().split("T")[0];
+ }}
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ const post = row.original;
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+ },
+ ],
+ [categories],
+ );
+
+ const table = useTable({
+ // Replace Post with your data type
+ columns,
+ refineCoreProps: {
+ // Pass Refine core props for filtering, sorting, pagination
+ // Example: filters, sorters, pagination controlled by Refine
+ },
+ // TanStack Table options can be passed here
+ initialState: {
+ columnPinning: {
+ left: [],
+ right: ["actions"], // Pin actions column to the right
+ },
+ },
+ });
+
+ return (
+
+
+
+
+ );
+}
+```
+
+## Handling Relational Data
+
+When your main data records (e.g., `posts`) contain references to other resources (e.g., a `category` with an `id`), you often need to fetch and display details from these related resources.
+
+The `@refinedev/core` package provides the `useMany` hook, which is ideal for this scenario. You can collect all the foreign key IDs (e.g., `category.id` from all posts in the current table view) and pass them to `useMany` to fetch all related categories in a single request.
+
+The recommended way to make this related data available to your column cell renderers is by using the `setOptions` function returned by `useTable` (from `@refinedev/react-table`) to add the fetched data to the table's `meta` object.
+
+**Steps:**
+
+1. **Initialize `useTable`**: Get `setOptions` and `tableQuery` from `useTable`.
+
+ ```tsx
+ const {
+ // ... other properties
+ setOptions,
+ refineCore: {
+ tableQuery: { data: tableData },
+ },
+ } = useTable({
+ columns,
+ // ...other useTable options
+ });
+ ```
+
+2. **Extract Foreign Keys**: From `tableData` (the array of posts), map over them to get an array of unique IDs for the categories.
+
+ ```tsx
+ const categoryIds = React.useMemo(
+ () =>
+ tableData?.data?.map((post) => post.category.id).filter(Boolean) ?? [],
+ [tableData?.data],
+ );
+ ```
+
+3. **Fetch Relational Data with `useMany`**: Use the extracted `categoryIds` and the "categories" resource name.
+
+ ```tsx
+ // Assuming ICategory is your related data type
+ const { data: categoriesData, isLoading: categoriesIsLoading } =
+ useMany({
+ resource: "categories",
+ ids: categoryIds,
+ queryOptions: {
+ enabled: categoryIds.length > 0,
+ },
+ });
+ ```
+
+4. **Set Table Meta Options**: Use `setOptions` to add the `categoriesData` to `table.options.meta`.
+
+ ```tsx
+ React.useEffect(() => {
+ setOptions((prev) => ({
+ ...prev,
+ meta: {
+ ...prev.meta,
+ categoriesData: categoriesData,
+ categoriesIsLoading: categoriesIsLoading,
+ },
+ }));
+ }, [setOptions, categoriesData, categoriesIsLoading]);
+ ```
+
+5. **Render in Cell**: In your `ColumnDef`, within the `cell` render function, access the category data from `table.options.meta`.
+
+ ```tsx
+ // ... inside columns definition for TanStack Table
+ {
+ accessorKey: "category.id", // Accessor for the foreign key in your Post data
+ header: "Category",
+ cell: function render({ getValue, table }) {
+ const meta = table.options.meta as {
+ categoriesData: GetManyResponse | undefined;
+ categoriesIsLoading: boolean
+ };
+
+ const categoryId = getValue();
+
+ if (meta?.categoriesIsLoading) return "Loading category...";
+
+ const category = meta?.categoriesData?.data?.find(item => item.id === categoryId);
+ return category?.title ?? "N/A"; // Display category title
+ },
+ }
+ // ...
+ ```
+
+This approach efficiently batches the fetching of related data and correctly passes it to the cell rendering context via the table's meta options.
+
+Refer to the [Refine `useMany` hook documentation](https://refine.dev/docs/data/hooks/use-many/) and the [Refine `useTable` with TanStack Table for relational data](https://refine.dev/docs/packages/tanstack-table/use-table/#how-can-i-handle-relational-data) for more details.
+
+## How to pin columns
+
+With `useTable` hook, you can pin columns to the left or right of the table by using the `initialState` prop.
+
+```tsx
+const table = useTable({
+ initialState: {
+ columnPinning: {
+ left: ["id"],
+ right: ["actions"],
+ },
+ },
+});
+```
+
+## DataTablePagination
+
+Pagination component for data tables. Implement pagination with useTable or useList hooks. Includes page navigation, page size selection, and row count display.
+
+Props
+
+| Prop | Type | Description |
+| ------------- | ------------------------ | ----------------------------------- |
+| `current` | `number` | Current page number (1-based) |
+| `pageCount` | `number` | Total number of pages |
+| `setCurrent` | `(page: number) => void` | Function to change the current page |
+| `pageSize` | `number` | Number of rows per page |
+| `setPageSize` | `(size: number) => void` | Function to change the page size |
+| `total` | `number` (optional) | Total number of rows in the dataset |
+
+You can also use `DataTablePagination` independently with your own pagination state:
+
+```tsx
+import { useState } from "react";
+import { DataTablePagination } from "@/components/refine-ui/data-table/data-table-pagination";
+
+export function MyPaginatedList() {
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+
+ // Your data fetching logic here
+ const currentPage = 1;
+ const pageSize = 10;
+ const total = 100;
+ const pageCount = Math.ceil(total / pageSize);
+
+ return (
+
+ {/* Your data display component */}
+
+
+
+ );
+}
+```
+
+## DataTableFilterDropdownText
+
+Text filtering for data tables. Filter table by text fields with useTable hook. Supports contains, equals, startswith, endswith operators. Perfect for filtering by title, name, or description columns.
+
+```tsx
+import { DataTableFilterDropdownText } from "@/components/refine-ui/data-table/data-table-filter";
+
+// In your TanStack Table column definition
+{
+ id: "title",
+ accessorKey: "title",
+ header: ({ column, table }) => {
+ return (
+
+ Title
+
+
+ );
+ },
+}
+```
+
+## DataTableFilterDropdownNumeric
+
+Numeric filtering for data tables. Filter table by numbers with useTable hook. Supports equals, greater than, less than operators. Perfect for filtering by ID, price, or quantity columns.
+
+```tsx
+import { DataTableFilterDropdownNumeric } from "@/components/refine-ui/data-table/data-table-filter";
+
+// In your TanStack Table column definition
+{
+ id: "id",
+ accessorKey: "id",
+ header: ({ column, table }) => {
+ return (
+
+ ID
+
+
+ );
+ },
+}
+```
+
+## DataTableFilterCombobox
+
+Select filtering for data tables. Filter table by predefined options with useTable hook. Supports single and multiple selection. Perfect for filtering by status, category, or tags columns.
+
+```tsx
+import { DataTableFilterCombobox } from "@/components/refine-ui/data-table/data-table-filter";
+
+// Single selection
+{
+ id: "status",
+ accessorKey: "status",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+}
+```
+
+## DataTableFilterDropdownDateSinglePicker
+
+Date filtering for data tables. Filter table by specific date with useTable hook. Includes calendar picker interface. Perfect for filtering by created date or updated date columns.
+
+```tsx
+import { DataTableFilterDropdownDateSinglePicker } from "@/components/refine-ui/data-table/data-table-filter";
+
+// In your TanStack Table column definition
+{
+ id: "createdAt",
+ accessorKey: "createdAt",
+ header: ({ column }) => {
+ return (
+
+ Created At
+ {
+ if (!date) return undefined;
+ return date.toISOString().split("T")[0]; // Format as YYYY-MM-DD
+ }}
+ />
+
+ );
+ },
+}
+```
+
+## DataTableFilterDropdownDateRangePicker
+
+Date range filtering for data tables. Filter table by date range with useTable hook. Includes dual calendar picker for start and end dates. Perfect for filtering data created between dates.
+
+```tsx
+import { DataTableFilterDropdownDateRangePicker } from "@/components/refine-ui/data-table/data-table-filter";
+
+// In your TanStack Table column definition
+{
+ id: "dateRange",
+ accessorKey: "createdAt",
+ header: ({ column }) => {
+ return (
+
+ Date Range
+ {
+ if (!dateRange?.from || !dateRange?.to) {
+ return undefined;
+ }
+ return [
+ dateRange.from.toISOString(),
+ dateRange.to.toISOString(),
+ ];
+ }}
+ />
+
+ );
+ },
+}
+```
diff --git a/packages/ui/refine-ui-docs/error-component.md b/packages/ui/refine-ui-docs/error-component.md
new file mode 100644
index 000000000000..ea748c3e87aa
--- /dev/null
+++ b/packages/ui/refine-ui-docs/error-component.md
@@ -0,0 +1,40 @@
+# Error Component
+
+A modern, elegant 404 error page component for Refine applications with custom SVG graphics, dark mode support, and smooth navigation back to the homepage.
+
+## Installation
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/error-component.json
+```
+
+This command will install the `ErrorComponent` component along with its dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `button`
+ - `tooltip`
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── layout/
+│ ├── error-component.tsx
+└── ... (other registry components)
+```
+
+## Usage
+
+The `ErrorComponent` is typically used on a dedicated error page. It is used to display a 404 error page.
+
+```tsx
+import { ErrorComponent } from "@/components/refine-ui/layout/error-component";
+
+export default function NotFoundPage() {
+ return ;
+}
+```
diff --git a/packages/ui/refine-ui-docs/forgot-password-form.md b/packages/ui/refine-ui-docs/forgot-password-form.md
new file mode 100644
index 000000000000..da9503800ed4
--- /dev/null
+++ b/packages/ui/refine-ui-docs/forgot-password-form.md
@@ -0,0 +1,57 @@
+# Forgot Password Form Component
+
+The `ForgotPasswordForm` component provides an interface for users to request a password reset link. It typically collects the user's email address.
+
+## Installation
+
+Install the `forgot-password-form` component via shadcn/ui registry:
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/forgot-password-form.json
+```
+
+This command will install the `ForgotPasswordForm` component along with its dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `button`
+ - `input`
+ - `label`
+ - `card`
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── form/
+│ ├── forgot-password-form.tsx # Main ForgotPasswordForm component
+└── ... (other registry components)
+```
+
+## Usage
+
+The `ForgotPasswordForm` is typically used on a dedicated "Forgot Password" or password reset request page. It relies on Refine's `useForgotPassword` hook and `authProvider` for its functionality.
+
+```tsx
+import { ForgotPasswordForm } from "@/components/refine-ui/form/forgot-password-form";
+import { cn } from "@/lib/utils";
+
+export default function ForgotPasswordPage() {
+ return (
+
+
+
+ );
+}
+```
diff --git a/packages/ui/refine-ui-docs/forms.md b/packages/ui/refine-ui-docs/forms.md
new file mode 100644
index 000000000000..131c9f592032
--- /dev/null
+++ b/packages/ui/refine-ui-docs/forms.md
@@ -0,0 +1,498 @@
+# Building Forms with Refine and shadcn/ui
+
+This guide explains how to create and manage forms in your Refine applications using the `@refinedev/react-hook-form` adapter and `shadcn/ui` components. We'll cover basic setup, validation with Zod, and provide examples for create and edit scenarios.
+
+Refine's `useForm` hook, in conjunction with `react-hook-form` and a schema validation library like Zod, provides a robust solution for handling form state, submission, and validation. When combined with `shadcn/ui` components, you can build accessible and visually consistent forms.
+
+**Key Features:**
+
+- Seamless integration with Refine's data lifecycle for creating and updating resources.
+- Powerful validation capabilities using `react-hook-form` and Zod.
+- Leverages `shadcn/ui` for pre-built, customizable form components (`Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormMessage`, `Input`, `Textarea`, `Select`, `Button`, etc.).
+- Works well within Refine UI's view components like `CreateView` and `EditView`.
+
+## Installation
+
+First, ensure you have `@refinedev/react-hook-form` installed:
+
+```bash
+npm install @refinedev/react-hook-form
+```
+
+You'll also need to have `shadcn/ui` initialized in your project and the necessary form-related components added (e.g., `form`, `input`, `button`, `select`, `textarea`). If you haven't already, you can add them via the CLI:
+
+```bash
+npx shadcn-ui@latest add form input button select textarea
+```
+
+## Usage
+
+The `useForm` hook from `@refinedev/react-hook-form` is used to manage the form state and validation.
+
+- `refineCore`:
+ - `onFinish`: A function to handle form submission. It will automatically call the appropriate data provider method (`create` or `update`).
+ - `formLoading`: A boolean indicating the loading state of the form submission.
+ - `queryResult`: Contains the data for forms in `edit` mode.
+- `register`: Function to register your input/select components with `react-hook-form`.
+- `handleSubmit`: A wrapper for your submission handler (`onSubmit`) that also triggers validation.
+- `formState: { errors }`: An object containing validation errors.
+- `control`: Passed to `shadcn/ui`'s `Form` component and `FormField` for integrating `react-hook-form`.
+- ...and other `react-hook-form` utilities.
+
+1. Schema Validation with Zod
+
+Zod is a TypeScript-first schema declaration and validation library. You define a schema for your form data, and `zodResolver` from `@hookform/resolvers/zod` integrates it with `react-hook-form`.
+
+```typescript
+import * as z from "zod";
+
+const postFormSchema = z.object({
+ title: z.string().min(2, { message: "Title must be at least 2 characters." }),
+ content: z
+ .string()
+ .min(10, { message: "Content must be at least 10 characters." }),
+ status: z.string({ required_error: "Please select a status." }),
+ // For relations, you might want to define the ID
+ category: z.object({
+ id: z.number({ required_error: "Please select a category." }),
+ }),
+});
+
+type PostFormValues = z.infer;
+```
+
+2. `shadcn/ui` Form Components
+
+`shadcn/ui` provides a set of components to build forms:
+
+- `
+
+ );
+}
+```
+
+3. Editing an Existing Record (`EditPost` Page)
+
+This example shows a form for editing an existing post, typically in a file like `src/routes/posts/edit.tsx`. It includes handling relational data (categories) using `useSelect` and a `Popover` + `Command` for selection.
+
+```tsx
+import React from "react";
+import type { HttpError } from "@refinedev/core";
+import { useForm, useSelect } from "@refinedev/react-hook-form";
+import { useNavigate, useParams } from "react-router";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Loader2, ChevronsUpDown, Check } from "lucide-react";
+
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import {
+ EditView,
+ EditViewHeader,
+} from "@/components/refine-ui/views/edit-view";
+import { LoadingOverlay } from "@/components/refine-ui/layout/loading-overlay";
+import { cn } from "@/lib/utils";
+import type { Post, Category } from "../../types/resources";
+
+// Define Zod schema (can be the same as create or extended)
+const postFormSchema = z.object({
+ title: z.string().min(2, { message: "Title must be at least 2 characters." }),
+ content: z
+ .string()
+ .min(10, { message: "Content must be at least 10 characters." }),
+ status: z.string({ required_error: "Please select a status." }),
+ category: z.object({
+ id: z.number({ required_error: "Category is required." }), // Assuming ID is a number
+ }),
+});
+type PostFormValues = z.infer;
+
+// Define your Post and Category types (example)
+interface Category {
+ id: number;
+ title: string;
+}
+interface Post {
+ id: number;
+ title: string;
+ content: string;
+ status: "published" | "draft" | "rejected";
+ category?: Category;
+}
+
+export default function EditPostPage() {
+ const navigate = useNavigate();
+ const { id } = useParams(); // Get record ID from URL
+
+ const {
+ refineCore: { onFinish, formLoading, queryResult }, // queryResult for initial data
+ ...form
+ } = useForm({
+ resolver: zodResolver(postFormSchema),
+ defaultValues: {
+ // Will be overridden by queryResult data
+ title: "",
+ content: "",
+ status: "draft",
+ category: { id: undefined },
+ },
+ refineCoreProps: {
+ resource: "posts",
+ action: "edit", // Important: specifies the action
+ id: id, // Pass the record ID
+ // redirect: "list",
+ // successNotification: { /* ... */ },
+ },
+ });
+
+ // Fetch categories for the select/combobox
+ const { options: categoryOptions, queryResult: categoriesQuery } =
+ useSelect({
+ resource: "categories",
+ optionValue: "id",
+ optionLabel: "title",
+ });
+
+ function onSubmit(values: PostFormValues) {
+ onFinish(values); // This will call your dataProvider.update()
+ }
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+```
diff --git a/packages/ui/refine-ui-docs/installation.md b/packages/ui/refine-ui-docs/installation.md
new file mode 100644
index 000000000000..de8712036954
--- /dev/null
+++ b/packages/ui/refine-ui-docs/installation.md
@@ -0,0 +1,201 @@
+# Refine UI Components Installation Guide
+
+This guide shows you how to install Refine UI components using the shadcn/ui CLI.
+
+## Prerequisites
+
+Make sure you have shadcn/ui set up in your project. If not, follow the [shadcn/ui installation guide](https://ui.shadcn.com/docs/installation) first.
+
+## Available Components
+
+### 🔐 Authentication Forms
+
+#### Sign In Form
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/sign-in-form.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/form/sign-in-form.tsx`
+- `src/components/refine-ui/form/input-password.tsx`
+
+**Description:** A Sign In Form component for Refine to use on the sign in page
+
+#### Sign Up Form
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/sign-up-form.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/form/sign-up-form.tsx`
+- `src/components/refine-ui/form/input-password.tsx`
+
+**Description:** A Sign Up Form component for Refine to use on the registration page
+
+#### Forgot Password Form
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/forgot-password-form.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/form/forgot-password-form.tsx`
+
+**Description:** A Forgot Password Form component for Refine to use on the password reset page
+
+### 📱 Layout & Navigation
+
+#### Layout System
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/layout-01.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/layout/layout.tsx`
+- `src/components/refine-ui/layout/mobile-header.tsx`
+- `src/components/refine-ui/layout/sidebar.tsx`
+- `src/components/refine-ui/layout/user-avatar.tsx`
+- `src/components/refine-ui/layout/user-info.tsx`
+
+**Description:** A complete layout system with sidebar, header, and main content area for Refine applications
+
+#### Breadcrumb Navigation
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/breadcrumb.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/layout/breadcrumb.tsx`
+
+**Description:** A breadcrumb navigation component for Refine applications that automatically generates breadcrumbs based on the current route and resource structure
+
+#### Error Component
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/error-component.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/layout/error-component.tsx`
+
+**Description:** 404 error page component for Refine applications with elegant SVG graphics and navigation back to home page
+
+### 📊 Data Display
+
+#### Data Table
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/data-table.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/data-table/data-table.tsx`
+- `src/components/refine-ui/data-table/data-table-filter.tsx`
+- `src/components/refine-ui/data-table/data-table-sorter.tsx`
+- `src/components/refine-ui/data-table/data-table-pagination.tsx`
+
+**Description:** A comprehensive data table component for Refine with sorting, filtering, pagination, and advanced features
+
+### 🔘 Action Buttons
+
+#### CRUD Buttons
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/buttons.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/buttons/create.tsx`
+- `src/components/refine-ui/buttons/edit.tsx`
+- `src/components/refine-ui/buttons/show.tsx`
+- `src/components/refine-ui/buttons/delete.tsx`
+- `src/components/refine-ui/buttons/clone.tsx`
+- `src/components/refine-ui/buttons/list.tsx`
+- `src/components/refine-ui/buttons/refresh.tsx`
+
+**Description:** A comprehensive set of action buttons for Refine applications including create, edit, delete, show, clone, list, and refresh buttons
+
+### 📄 Page Views
+
+#### View Templates
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/views.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/views/create-view.tsx`
+- `src/components/refine-ui/views/edit-view.tsx`
+- `src/components/refine-ui/views/show-view.tsx`
+- `src/components/refine-ui/views/list-view.tsx`
+
+**Description:** A comprehensive set of view components for Refine applications including create, edit, show, and list views with headers and content areas. These components are designed to be used as page templates for CRUD operations
+
+### 📝 Form Components
+
+#### Auto Save Indicator
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/auto-save-indicator.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/form/auto-save-indicator.tsx`
+
+**Description:** A visual indicator component for auto-save functionality in Refine forms. Shows loading, success, error, and idle states with smooth transitions and customizable elements
+
+### 🔧 Utilities
+
+#### Notification Provider
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/notification-provider.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/notification/use-notification-provider.tsx`
+- `src/components/refine-ui/notification/toaster.tsx`
+- `src/components/refine-ui/notification/undoable-notification.tsx`
+
+**Description:** A comprehensive notification system for Refine with toast notifications, undoable notifications, and provider hooks using sonner
+
+#### Loading Overlay
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/loading-overlay.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/layout/loading-overlay.tsx`
+
+**Description:** A loading overlay component that displays a spinner over content while loading. Can be used to provide visual feedback during async operations
+
+#### Theme System
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/theme-provider.json
+```
+
+**Installs:**
+
+- `src/components/refine-ui/theme/theme-provider.tsx`
+- `src/components/refine-ui/theme/theme-toggle.tsx`
+- `src/components/refine-ui/theme/theme-select.tsx`
+
+**Description:** A complete theme system with provider, toggle, and select components. Supports dark, light, and system themes with localStorage persistence
diff --git a/packages/ui/refine-ui-docs/layout-01.md b/packages/ui/refine-ui-docs/layout-01.md
new file mode 100644
index 000000000000..3e44c6f73b1a
--- /dev/null
+++ b/packages/ui/refine-ui-docs/layout-01.md
@@ -0,0 +1,107 @@
+# Layout 01 Component
+
+`Layout 01` provides a complete, responsive application layout system for Refine applications. It includes a collapsible sidebar, a fixed header, and a main content area. This layout integrates seamlessly with Refine's routing and authentication mechanisms.
+
+**When to use:**
+
+- As the main application shell for most Refine projects.
+- When you need a standard dashboard layout with sidebar navigation and a header.
+- To provide a consistent look and feel across all authenticated pages.
+
+## Installation
+
+Install the `layout-01` block via shadcn/ui registry:
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/layout-01.json
+```
+
+This command will install the `Layout` component and its sub-components (`Header`, `Sidebar`), along with their dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+ - `lucide-react`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `sidebar` (shadcn/ui component)
+ - `avatar` (shadcn/ui component)
+ - `button` (shadcn/ui component)
+ - `separator` (shadcn/ui component)
+ - `dropdown-menu` (shadcn/ui component)
+ - `collapsible` (shadcn/ui component)
+ - `theme-provider` (Refine UI component, installed via `https://ui.refine.dev/r/theme-provider.json`)
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies if they are not already in your project.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── layout/
+│ ├── breadcrumb.tsx
+│ ├── error-component.tsx
+│ ├── layout.tsx
+│ ├── loading-overlay.tsx
+│ ├── header.tsx
+│ ├── sidebar.tsx
+│ ├── user-avatar.tsx
+│ └── user-info.tsx
+├── theme/
+│ ├── theme-provider.tsx
+│ ├── theme-toggle.tsx
+│ └── theme-select.tsx
+└── ... (other registry components)
+```
+
+## Usage
+
+Integrate the `Layout` component into your Refine application's routing structure, typically wrapping authenticated routes.
+
+```tsx
+import { Refine } from "@refinedev/core";
+import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router";
+
+import { Layout } from "@/components/refine-ui/layout/layout";
+
+function App() {
+ return (
+
+
+
+
+
+
+ }
+ >
+ Post List Page} />
+ Category List Page} />
+
+
+ Login Page} />
+
+
+
+ );
+}
+
+export default App;
+```
diff --git a/packages/ui/refine-ui-docs/notification-provider.md b/packages/ui/refine-ui-docs/notification-provider.md
new file mode 100644
index 000000000000..46968430a5ca
--- /dev/null
+++ b/packages/ui/refine-ui-docs/notification-provider.md
@@ -0,0 +1,98 @@
+# useNotificationProvider Hook
+
+A comprehensive notification system for Refine that integrates with Sonner toast notifications, featuring theme support and undoable notifications.
+
+## Installation
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/notification-provider.json
+```
+
+This command will install the `useNotificationProvider` hook along with its dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+ - `sonner`
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── notification/
+│ ├── use-notification-provider.tsx
+│ ├── toaster.tsx
+│ └── undoable-notification.tsx
+└── ... (other registry components)
+```
+
+This package includes three main components:
+
+- `useNotificationProvider` - The main hook that provides notification functionality
+- `Toaster` - A themed toast container component
+- `UndoableNotification` - A custom notification component for undoable actions
+
+## Usage
+
+First we need to give the `useNotificationProvider` hook to the `Refine` component.
+
+```tsx
+import { Refine } from "@refinedev/core";
+import { useNotificationProvider } from "@/components/refine-ui/notification/use-notification-provider";
+import { Toaster } from "@/components/refine-ui/notification/toaster";
+
+function App() {
+ return (
+ <>
+
+ {/* Your app content */}
+
+
+
+ );
+}
+```
+
+Then we can use the `useNotification` hook to open and close notifications.
+
+```tsx
+import { useNotification } from "@refinedev/core";
+
+const { open, close } = useNotification();
+
+// open success notification
+open?.({
+ key: "my-notification",
+ type: "success",
+ message: "Success",
+ description: "This is a success message",
+});
+
+// open error notification
+open?.({
+ type: "error",
+ message: "Error!",
+ description: "Something went wrong",
+ key: "error-notification",
+});
+
+// open progress notification (undoable)
+// when undo button is clicked, run the `cancelMutation` callback
+open?.({
+ type: "progress",
+ message: "Record deleted",
+ description: "The record has been moved to trash",
+ undoableTimeout: 5,
+ cancelMutation: () => {
+ // when undo button is clicked, run this callback
+ console.log("Undoing operation...");
+ },
+});
+
+// close notification by key
+close?.("my-notification");
+```
diff --git a/packages/ui/refine-ui-docs/sign-in-form.md b/packages/ui/refine-ui-docs/sign-in-form.md
new file mode 100644
index 000000000000..f83cfb67dca8
--- /dev/null
+++ b/packages/ui/refine-ui-docs/sign-in-form.md
@@ -0,0 +1,62 @@
+# Sign In Form Component
+
+The `SignInForm` component provides a ready-to-use sign-in interface for Refine applications. It handles user authentication through email/password and can be extended for social logins.
+
+## Installation
+
+Install the `sign-in-form` component via shadcn/ui registry:
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/sign-in-form.json
+```
+
+This command will install the `SignInForm` component along with its dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `button`
+ - `input`
+ - `label`
+ - `card`
+ - `checkbox`
+ - `separator`
+
+It will also install the shared `input-password.tsx` component if not already present.
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── form/
+│ ├── sign-in-form.tsx # Main SignInForm component
+│ └── input-password.tsx # Shared password input component
+└── ... (other registry components)
+```
+
+## Usage
+
+The `SignInForm` is typically used on a dedicated login page. It relies on Refine's `useLogin` hook and `authProvider` for its functionality.
+
+```tsx
+import { SignInForm } from "@/components/refine-ui/form/sign-in-form";
+import { cn } from "@/lib/utils";
+
+export default function LoginPage() {
+ return (
+
+
+
+ );
+}
+```
diff --git a/packages/ui/refine-ui-docs/sign-up-form.md b/packages/ui/refine-ui-docs/sign-up-form.md
new file mode 100644
index 000000000000..97550ff5fd68
--- /dev/null
+++ b/packages/ui/refine-ui-docs/sign-up-form.md
@@ -0,0 +1,66 @@
+# Sign Up Form Component
+
+The `SignUpForm` component provides a user registration interface for Refine applications. It handles new user sign-up with email/password and includes password confirmation.
+
+**When to use:**
+
+- For the registration page of your Refine application.
+- When you need a standardized form for new users to create an account.
+
+## Installation
+
+Install the `sign-up-form` component via shadcn/ui registry:
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/sign-up-form.json
+```
+
+This command will install the `SignUpForm` component along with its dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `button`
+ - `input`
+ - `label`
+ - `card`
+ - `separator`
+
+It will also install the shared `input-password.tsx` component if not already present.
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── form/
+│ ├── sign-up-form.tsx # Main SignUpForm component
+│ └── input-password.tsx # Shared password input component (if not already present)
+└── ... (other registry components)
+```
+
+## Usage
+
+The `SignUpForm` is typically used on a dedicated registration page. It relies on Refine's `useRegister` hook, `useNotification` hook, and `authProvider` for its functionality.
+
+```tsx
+import { SignUpForm } from "@/components/refine-ui/form/sign-up-form";
+import { cn } from "@/lib/utils";
+
+export default function RegisterPage() {
+ return (
+
+
+
+ );
+}
+```
diff --git a/packages/ui/refine-ui-docs/theme-provider.md b/packages/ui/refine-ui-docs/theme-provider.md
new file mode 100644
index 000000000000..e89d6fb7a84a
--- /dev/null
+++ b/packages/ui/refine-ui-docs/theme-provider.md
@@ -0,0 +1,128 @@
+# Theme System
+
+A complete theme system with provider, toggle, and select components. Supports dark, light, and system themes with localStorage persistence.
+
+## Installation
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/theme-provider.json
+```
+
+**Dependencies:** `lucide-react`
+
+**Registry Dependencies:** `button`, `dropdown-menu`
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── theme/
+│ ├── theme-provider.tsx
+│ ├── theme-toggle.tsx
+│ └── theme-select.tsx
+└── ... (other registry components)
+```
+
+This package includes three main components:
+
+- `ThemeProvider` - Context provider for theme management
+- `ThemeToggle` - Cycling button component to switch between themes
+- `ThemeSelect` - Dropdown menu component for theme selection
+
+## Setup
+
+1. Wrap your app with ThemeProvider
+
+> All layout components in the Refine registry support the theme provider and automatically adapt to theme changes.
+
+```tsx
+import { ThemeProvider } from "@/components/refine-ui/theme/theme-provider";
+
+function App() {
+ return (
+
+ {/* Your app content */}
+
+ );
+}
+```
+
+2. Add theme components to your layout
+
+> All layout components in the Refine registry support the theme provider and automatically adapt to theme changes.
+
+```tsx
+import { ThemeToggle } from "@/components/refine-ui/theme/theme-toggle";
+import { ThemeSelect } from "@/components/refine-ui/theme/theme-select";
+
+function Layout() {
+ return (
+
+ {/* Header with theme toggle */}
+
+
+
+
+ {/* Or use theme select in dropdown menus */}
+
+
+ );
+}
+```
+
+### ThemeProvider
+
+Is a context provider that provides the theme to the app. It is used to wrap the app in the `App.tsx` file.
+
+> All layout components in the Refine registry support the theme provider and automatically adapt to theme changes.
+
+```tsx
+{/* Your app content */}
+```
+
+| Prop | Type | Default | Description |
+| -------------- | ------------------------------- | ------------------- | --------------------------------- |
+| `children` | `ReactNode` | - | Child components |
+| `defaultTheme` | `"light" \| "dark" \| "system"` | `"system"` | Default theme when none is stored |
+| `storageKey` | `string` | `"refine-ui-theme"` | localStorage key for persistence |
+
+### ThemeToggle
+
+Cycling button that switches between light → dark → system themes.
+
+```tsx
+
+```
+
+| Prop | Type | Description |
+| ----------- | -------- | ---------------------- |
+| `className` | `string` | Additional CSS classes |
+
+### ThemeSelect
+
+Dropdown menu for explicit theme selection.
+
+```tsx
+
+```
+
+### useTheme
+
+Custom hook to get the current theme and set the theme.
+
+```tsx
+import { useTheme } from "@/components/refine-ui/theme/theme-provider";
+
+function CustomComponent() {
+ const { theme, setTheme } = useTheme();
+
+ return (
+
+
Current theme: {theme}
+
+
+ );
+}
+```
diff --git a/packages/ui/refine-ui-docs/views.md b/packages/ui/refine-ui-docs/views.md
new file mode 100644
index 000000000000..d4b0fd7d4a51
--- /dev/null
+++ b/packages/ui/refine-ui-docs/views.md
@@ -0,0 +1,283 @@
+# Refine View Components
+
+The `views` registry item provides a set of components designed to structure standard CRUD pages (List, Create, Edit, Show) in Refine applications. Each view component (`ListView`, `CreateView`, `EditView`, `ShowView`) comes with a corresponding header component (`ListViewHeader`, `CreateViewHeader`, `EditViewHeader`, `ShowViewHeader`) to provide a consistent layout including breadcrumbs, titles, and relevant action buttons.
+
+**When to use:**
+
+- To quickly scaffold standard CRUD pages with a consistent look and feel.
+- When you need automatic breadcrumb navigation and resource title generation.
+- To have a clear separation between page structure (header) and content (form, table, details).
+
+## Installation
+
+Install the `views` component package via shadcn/ui registry:
+
+```bash
+npx shadcn@latest add https://ui.refine.dev/r/views.json
+```
+
+This command will install all view components and their dependencies:
+
+- **Dependencies** (npm packages):
+ - `@refinedev/core`
+ - `lucide-react`
+- **Registry Dependencies** (other shadcn/ui or Refine UI components):
+ - `separator`
+ - `button`
+ - `breadcrumb` (Refine UI component)
+ - `buttons` (Refine UI components for actions like Create, Edit, Refresh)
+ - `loading-overlay` (Refine UI component)
+
+**Note:** The CLI will automatically install required npm dependencies and attempt to install registry dependencies if they are not already in your project.
+
+After installation, you will have the following files in your project:
+
+```
+src/components/refine-ui/
+├── views/
+│ ├── list-view.tsx
+│ ├── create-view.tsx
+│ ├── edit-view.tsx
+│ └── show-view.tsx
+└── ... (other registry components)
+```
+
+## `ListView` & `ListViewHeader`
+
+Designed for displaying a list of records.
+
+`ListView` Features
+
+- **Resource Integration**: Automatic resource detection and title generation.
+- **Breadcrumb Navigation**: Built-in breadcrumb component.
+- **Optional Create Button**: `CreateButton` (from `buttons` package) is displayed based on resource definition or `canCreate` prop.
+
+`ListView` Props
+
+| Prop | Type | Default | Description |
+| ----------- | ----------- | ------- | ---------------------------------------- |
+| `children` | `ReactNode` | - | Content to render inside the view |
+| `className` | `string` | - | Additional CSS classes for the container |
+
+`ListViewHeader` Props
+
+| Prop | Type | Default | Description |
+| ------------------ | --------- | ---------------- | ----------------------------------------------------- |
+| `resource` | `string` | Current resource | Override the resource name for title and actions. |
+| `title` | `string` | Auto-generated | Custom title for the header. |
+| `hideBreadcrumb` | `boolean` | `false` | Set to `true` to hide the breadcrumb. |
+| `wrapperClassName` | `string` | - | CSS classes for the header's main wrapper div. |
+| `headerClassName` | `string` | - | CSS classes for the div containing title and actions. |
+| `canCreate` | `boolean` | Resource default | Manually control visibility of the create button |
+
+### `ListView` Usage Example
+
+```tsx
+import {
+ ListView,
+ ListViewHeader,
+} from "@/components/refine-ui/views/list-view";
+import { LoadingOverlay } from "@/components/refine-ui/layout/loading-overlay";
+
+export default function PostListPage() {
+ const isLoading = false; // or true, based on your data fetching state
+ const error = null; // or object, based on your data fetching state
+
+ if (error) {
+ return (
+
+
+ {/* Error content */}
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Record content (e.g., DataTable) */}
+
+
+ );
+}
+```
+
+## `CreateView` & `CreateViewHeader`
+
+Designed for building record creation pages.
+
+`CreateView` Features
+
+- **Automatic Navigation**: Back button functionality via `useBack()` hook.
+- **Resource Integration**: Automatic resource detection and title generation.
+- **Breadcrumb Navigation**: Built-in breadcrumb component.
+
+`CreateView` Props
+
+| Prop | Type | Default | Description |
+| ----------- | ----------- | ------- | ---------------------------------------- |
+| `children` | `ReactNode` | - | Content to render inside the view |
+| `className` | `string` | - | Additional CSS classes for the container |
+
+`CreateViewHeader` Props
+
+| Prop | Type | Default | Description |
+| ------------------ | --------- | ---------------- | ----------------------------------------------------- |
+| `resource` | `string` | Current resource | Override the resource name for title and actions. |
+| `title` | `string` | Auto-generated | Custom title for the header. |
+| `hideBreadcrumb` | `boolean` | `false` | Set to `true` to hide the breadcrumb. |
+| `wrapperClassName` | `string` | - | CSS classes for the header's main wrapper div. |
+| `headerClassName` | `string` | - | CSS classes for the div containing title and actions. |
+
+### `CreateView` Usage Example
+
+```tsx
+import {
+ CreateView,
+ CreateViewHeader,
+} from "@/components/refine-ui/views/create-view";
+import { LoadingOverlay } from "@/components/refine-ui/layout/loading-overlay";
+
+export default function PostCreatePage() {
+ const formLoading = false; // or true, based on your form submission state
+
+ return (
+
+
+
+ {/* Record content (e.g., Create Form) */}
+
+
+ );
+}
+```
+
+## `EditView` & `EditViewHeader`
+
+Designed for building record editing pages.
+
+`EditView` Features
+
+- **Automatic Navigation**: Back button and List button functionality.
+- **Resource Integration**: Automatic resource detection and title generation.
+- **Breadcrumb Navigation**: Built-in breadcrumb component.
+- **Refresh Functionality**: Built-in `RefreshButton` for the current record.
+- **Loading States**: `LoadingOverlay` can be used to cover both data fetching and form submission loading states.
+
+`EditView` Props
+
+| Prop | Type | Default | Description |
+| ----------- | ----------- | ------- | ---------------------------------------- |
+| `children` | `ReactNode` | - | Content to render inside the view |
+| `className` | `string` | - | Additional CSS classes for the container |
+
+`EditViewHeader` Props
+
+Includes `RefreshButton` and `ListButton` by default.
+
+| Prop | Type | Default | Description |
+| ------------------ | ----------- | ---------------- | ----------------------------------------------------- |
+| `resource` | `string` | Current resource | Override the resource name for title and actions. |
+| `title` | `string` | Auto-generated | Custom title for the header. |
+| `hideBreadcrumb` | `boolean` | `false` | Set to `true` to hide the breadcrumb. |
+| `wrapperClassName` | `string` | - | CSS classes for the header's main wrapper div. |
+| `headerClassName` | `string` | - | CSS classes for the div containing title and actions. |
+| `actionsSlot` | `ReactNode` | - | Custom actions to render in the header. |
+
+### `EditView` Usage Example
+
+```tsx
+import {
+ EditView,
+ EditViewHeader,
+} from "@/components/refine-ui/views/edit-view";
+import { LoadingOverlay } from "@/components/refine-ui/layout/loading-overlay";
+
+export default function PostEditPage() {
+ const queryLoading = false; // or true, based on your data fetching state
+ const formLoading = false; // or true, based on your form submission state
+ const error = null; // or object, based on your data fetching state
+
+ if (error) {
+ return (
+
+
+ {/* Error content */}
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Record content (e.g., Edit Form) */}
+
+
+ );
+}
+```
+
+## `ShowView` & `ShowViewHeader`
+
+Designed for displaying detailed information about a single record.
+
+`ShowView` Features
+
+- **Automatic Navigation**: Back button and List button functionality.
+- **Resource Integration**: Automatic resource detection and title generation.
+- **Breadcrumb Navigation**: Built-in breadcrumb component.
+- **Action Buttons**: Includes `RefreshButton` and `EditButton` (if applicable).
+
+`ShowView` Props
+
+| Prop | Type | Default | Description |
+| ----------- | ----------- | ------- | ---------------------------------------- |
+| `children` | `ReactNode` | - | Content to render inside the view |
+| `className` | `string` | - | Additional CSS classes for the container |
+
+`ShowViewHeader` Props
+
+Includes `EditButton` (if resource has an edit page), `ListButton`, and `RefreshButton` by default.
+
+| Prop | Type | Default | Description |
+| ------------------ | --------- | ---------------- | ----------------------------------------------------- |
+| `resource` | `string` | Current resource | Override the resource name for title and actions. |
+| `title` | `string` | Auto-generated | Custom title for the header. |
+| `hideBreadcrumb` | `boolean` | `false` | Set to `true` to hide the breadcrumb. |
+| `wrapperClassName` | `string` | - | CSS classes for the header's main wrapper div. |
+| `headerClassName` | `string` | - | CSS classes for the div containing title and actions. |
+
+### `ShowView` Usage Example
+
+```tsx
+import {
+ ShowView,
+ ShowViewHeader,
+} from "@/components/refine-ui/views/show-view";
+import { LoadingOverlay } from "@/components/refine-ui/layout/loading-overlay";
+
+export default function PostShowPage() {
+ const isLoading = false; // or true, based on your data fetching state
+ const error = null; // or object, based on your data fetching state
+
+ if (error) {
+ return (
+
+
+ {/* Error content */}
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Record content (e.g., Record details) */}
+
+
+ );
+}
+```
diff --git a/packages/ui/registry.json b/packages/ui/registry.json
new file mode 100644
index 000000000000..bea91a8cca16
--- /dev/null
+++ b/packages/ui/registry.json
@@ -0,0 +1,397 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry.json",
+ "name": "Refine",
+ "homepage": "https://refine.dev",
+ "items": [
+ {
+ "name": "sign-in-form",
+ "type": "registry:component",
+ "title": "Sign In Form",
+ "description": "A Sign In Form component for Refine to use on the sign in page",
+ "dependencies": ["@refinedev/core"],
+ "registryDependencies": [
+ "button",
+ "input",
+ "label",
+ "card",
+ "checkbox",
+ "separator"
+ ],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["auth", "form", "login", "sign-in"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/form/sign-in-form.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/form/sign-in-form.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/form/input-password.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/form/input-password.tsx"
+ }
+ ]
+ },
+ {
+ "name": "sign-up-form",
+ "type": "registry:component",
+ "title": "Sign Up Form",
+ "description": "A Sign Up Form component for Refine to use on the registration page",
+ "dependencies": ["@refinedev/core"],
+ "registryDependencies": ["button", "input", "label", "card", "separator"],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["auth", "form", "register", "signup"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/form/sign-up-form.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/form/sign-up-form.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/form/input-password.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/form/input-password.tsx"
+ }
+ ]
+ },
+ {
+ "name": "forgot-password-form",
+ "type": "registry:component",
+ "title": "Forgot Password Form",
+ "description": "A Forgot Password Form component for Refine to use on the password reset page",
+ "dependencies": ["@refinedev/core"],
+ "registryDependencies": ["button", "input", "label", "card"],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["auth", "form", "password", "reset"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/form/forgot-password-form.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/form/forgot-password-form.tsx"
+ }
+ ]
+ },
+ {
+ "name": "notification-provider",
+ "type": "registry:component",
+ "title": "Notification Provider",
+ "description": "A comprehensive notification system for Refine with toast notifications, undoable notifications, and provider hooks using sonner",
+ "dependencies": ["@refinedev/core", "sonner"],
+ "registryDependencies": [
+ "button",
+ "dropdown-menu",
+ "https://ui.refine.dev/r/theme-provider.json"
+ ],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": [
+ "providers",
+ "notifications",
+ "toast",
+ "hooks",
+ "undoable"
+ ],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/notification/use-notification-provider.tsx",
+ "type": "registry:hook",
+ "target": "src/components/refine-ui/notification/use-notification-provider.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/notification/toaster.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/notification/toaster.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/notification/undoable-notification.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/notification/undoable-notification.tsx"
+ }
+ ]
+ },
+ {
+ "name": "layout-01",
+ "type": "registry:block",
+ "title": "Layout 01",
+ "description": "A complete layout system with sidebar, header, and main content area for Refine applications",
+ "dependencies": ["@refinedev/core", "lucide-react"],
+ "registryDependencies": [
+ "sidebar",
+ "avatar",
+ "button",
+ "separator",
+ "dropdown-menu",
+ "collapsible",
+ "https://ui.refine.dev/r/theme-provider.json"
+ ],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["layout", "sidebar", "navigation", "dashboard"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/layout/layout-01/layout.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/layout.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/layout/layout-01/header.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/header.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/layout/layout-01/sidebar.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/sidebar.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/user/user-avatar.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/user-avatar.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/user/user-info.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/user-info.tsx"
+ }
+ ]
+ },
+ {
+ "name": "data-table",
+ "type": "registry:component",
+ "title": "Data Table",
+ "description": "A comprehensive data table component for Refine with sorting, filtering, pagination, and advanced features",
+ "dependencies": [
+ "@refinedev/core",
+ "@refinedev/react-table",
+ "@tanstack/react-table",
+ "react-day-picker",
+ "lucide-react"
+ ],
+ "registryDependencies": [
+ "table",
+ "button",
+ "input",
+ "badge",
+ "popover",
+ "command",
+ "separator",
+ "calendar",
+ "select"
+ ],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["data", "table", "pagination", "sorting", "filtering"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/data-table/data-table.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/data-table/data-table.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/data-table/data-table-filter.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/data-table/data-table-filter.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/data-table/data-table-sorter.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/data-table/data-table-sorter.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/data-table/data-table-pagination.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/data-table/data-table-pagination.tsx"
+ }
+ ]
+ },
+ {
+ "name": "buttons",
+ "type": "registry:component",
+ "title": "Refine Buttons",
+ "description": "A comprehensive set of action buttons for Refine applications including create, edit, delete, show, clone, list, and refresh buttons",
+ "dependencies": ["@refinedev/core", "lucide-react"],
+ "registryDependencies": ["button", "popover"],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["buttons", "actions", "crud", "navigation"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/buttons/create.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/create.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/edit.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/edit.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/show.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/show.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/delete.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/delete.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/clone.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/clone.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/list.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/list.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/buttons/refresh.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/buttons/refresh.tsx"
+ }
+ ]
+ },
+ {
+ "name": "views",
+ "type": "registry:component",
+ "title": "Refine Views",
+ "description": "A comprehensive set of view components for Refine applications including create, edit, show, and list views with headers and content areas. These components are designed to be used as page templates for CRUD operations.",
+ "dependencies": ["@refinedev/core", "lucide-react"],
+ "registryDependencies": [
+ "separator",
+ "https://ui.refine.dev/r/buttons.json",
+ "https://ui.refine.dev/r/breadcrumb.json",
+ "https://ui.refine.dev/r/loading-overlay.json"
+ ],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["views", "layout", "crud", "pages"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/views/create-view.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/views/create-view.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/views/edit-view.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/views/edit-view.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/views/show-view.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/views/show-view.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/views/list-view.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/views/list-view.tsx"
+ }
+ ]
+ },
+ {
+ "name": "breadcrumb",
+ "type": "registry:component",
+ "title": "Refine Breadcrumb",
+ "description": "A breadcrumb navigation component for Refine applications that automatically generates breadcrumbs based on the current route and resource structure.",
+ "dependencies": ["@refinedev/core", "lucide-react"],
+ "registryDependencies": ["breadcrumb"],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["navigation", "breadcrumb", "layout"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/layout/breadcrumb.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/breadcrumb.tsx"
+ }
+ ]
+ },
+ {
+ "name": "loading-overlay",
+ "type": "registry:component",
+ "title": "Loading Overlay",
+ "description": "A loading overlay component that displays a spinner over content while loading. Can be used to provide visual feedback during async operations.",
+ "dependencies": ["lucide-react"],
+ "registryDependencies": [],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["loading", "overlay", "feedback", "ui"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/layout/loading-overlay.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/loading-overlay.tsx"
+ }
+ ]
+ },
+ {
+ "name": "theme-provider",
+ "type": "registry:component",
+ "title": "Theme Provider & Toggle & Select",
+ "description": "A complete theme system with provider, toggle, and select components. Supports dark, light, and system themes with localStorage persistence.",
+ "dependencies": ["lucide-react"],
+ "registryDependencies": ["button", "dropdown-menu"],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["theme", "dark-mode", "toggle", "select", "provider"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/theme/theme-provider.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/theme/theme-provider.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/theme/theme-toggle.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/theme/theme-toggle.tsx"
+ },
+ {
+ "path": "registry/new-york/refine-ui/theme/theme-select.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/theme/theme-select.tsx"
+ }
+ ]
+ },
+ {
+ "name": "error-component",
+ "type": "registry:component",
+ "title": "Error Component",
+ "description": "404 error page component for Refine applications with elegant SVG graphics and navigation back to home page.",
+ "dependencies": ["@refinedev/core", "lucide-react"],
+ "registryDependencies": ["button", "tooltip"],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["error", "layout", "404", "pages"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/layout/error-component.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/layout/error-component.tsx"
+ }
+ ]
+ },
+ {
+ "name": "auto-save-indicator",
+ "type": "registry:component",
+ "title": "Auto Save Indicator",
+ "description": "A visual indicator component for auto-save functionality in Refine forms. Shows loading, success, error, and idle states with smooth transitions and customizable elements.",
+ "dependencies": ["@refinedev/core", "lucide-react"],
+ "registryDependencies": [],
+ "author": "Refine ",
+ "docs": "https://github.com/refinedev/refine",
+ "categories": ["form", "auto-save", "indicator", "feedback", "ui"],
+ "files": [
+ {
+ "path": "registry/new-york/refine-ui/form/auto-save-indicator.tsx",
+ "type": "registry:component",
+ "target": "src/components/refine-ui/form/auto-save-indicator.tsx"
+ }
+ ]
+ }
+ ]
+}
diff --git a/packages/ui/registry/new-york/refine-ui/buttons/clone.tsx b/packages/ui/registry/new-york/refine-ui/buttons/clone.tsx
new file mode 100644
index 000000000000..63507b8233e1
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/buttons/clone.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useCloneButton } from "@refinedev/core";
+import { Copy } from "lucide-react";
+import { Button } from "@/registry/new-york/ui/button";
+
+type CloneButtonProps = {
+ /**
+ * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+ * @default Inferred resource name from the route
+ */
+ resource?: string;
+ /**
+ * Data item identifier for the actions with the API
+ * @default Reads `:id` from the URL
+ */
+ recordItemId?: BaseKey;
+ /**
+ * Access Control configuration for the button
+ * @default `{ enabled: true, hideIfUnauthorized: false }`
+ */
+ accessControl?: {
+ enabled?: boolean;
+ hideIfUnauthorized?: boolean;
+ };
+ /**
+ * `meta` property is used when creating the URL for the related action and path.
+ */
+ meta?: Record;
+} & React.ComponentProps;
+
+export const CloneButton = React.forwardRef<
+ React.ComponentRef,
+ CloneButtonProps
+>(
+ (
+ { resource, recordItemId, accessControl, meta, children, onClick, ...rest },
+ ref,
+ ) => {
+ const { hidden, disabled, LinkComponent, to, label } = useCloneButton({
+ accessControl,
+ resource,
+ id: recordItemId,
+ meta,
+ });
+
+ const isDisabled = disabled || rest.disabled;
+ const isHidden = hidden || rest.hidden;
+
+ if (isHidden) return null;
+
+ return (
+
+ );
+ },
+);
+
+CloneButton.displayName = "CloneButton";
diff --git a/packages/ui/registry/new-york/refine-ui/buttons/create.tsx b/packages/ui/registry/new-york/refine-ui/buttons/create.tsx
new file mode 100644
index 000000000000..c28f613043a1
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/buttons/create.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useCreateButton } from "@refinedev/core";
+import { Plus } from "lucide-react";
+import { Button } from "@/registry/new-york/ui/button";
+
+type CreateButtonProps = {
+ /**
+ * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+ * @default Inferred resource name from the route
+ */
+ resource?: BaseKey;
+ /**
+ * Access Control configuration for the button
+ * @default `{ enabled: true, hideIfUnauthorized: false }`
+ */
+ accessControl?: {
+ enabled?: boolean;
+ hideIfUnauthorized?: boolean;
+ };
+ /**
+ * `meta` property is used when creating the URL for the related action and path.
+ */
+ meta?: Record;
+} & React.ComponentProps;
+
+export const CreateButton = React.forwardRef<
+ React.ComponentRef,
+ CreateButtonProps
+>(({ resource, accessControl, meta, children, onClick, ...rest }, ref) => {
+ const { hidden, disabled, LinkComponent, to, label } = useCreateButton({
+ resource,
+ accessControl,
+ meta,
+ });
+
+ const isDisabled = disabled || rest.disabled;
+ const isHidden = hidden || rest.hidden;
+
+ if (isHidden) return null;
+
+ return (
+
+ );
+});
+
+CreateButton.displayName = "CreateButton";
diff --git a/packages/ui/registry/new-york/refine-ui/buttons/delete.tsx b/packages/ui/registry/new-york/refine-ui/buttons/delete.tsx
new file mode 100644
index 000000000000..d464a8bc41fe
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/buttons/delete.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useDeleteButton } from "@refinedev/core";
+import { Loader2, Trash } from "lucide-react";
+import { Button } from "@/registry/new-york/ui/button";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/registry/new-york/ui/popover";
+
+type DeleteButtonProps = {
+ /**
+ * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+ * @default Inferred resource name from the route
+ */
+ resource?: string;
+ /**
+ * Data item identifier for the actions with the API
+ * @default Reads `:id` from the URL
+ */
+ recordItemId?: BaseKey;
+ /**
+ * Access Control configuration for the button
+ * @default `{ enabled: true, hideIfUnauthorized: false }`
+ */
+ accessControl?: {
+ enabled?: boolean;
+ hideIfUnauthorized?: boolean;
+ };
+ /**
+ * `meta` property is used when creating the URL for the related action and path.
+ */
+ meta?: Record;
+} & React.ComponentProps;
+
+export const DeleteButton = React.forwardRef<
+ React.ComponentRef,
+ DeleteButtonProps
+>(({ resource, recordItemId, accessControl, meta, children, ...rest }, ref) => {
+ const {
+ hidden,
+ disabled,
+ loading,
+ onConfirm,
+ label,
+ confirmTitle: defaultConfirmTitle,
+ confirmOkLabel: defaultConfirmOkLabel,
+ cancelLabel: defaultCancelLabel,
+ } = useDeleteButton({
+ resource,
+ id: recordItemId,
+ accessControl,
+ meta,
+ });
+ const [open, setOpen] = React.useState(false);
+
+ const isDisabled = disabled || rest.disabled || loading;
+ const isHidden = hidden || rest.hidden;
+
+ if (isHidden) return null;
+
+ const confirmCancelText = defaultCancelLabel;
+ const confirmOkText = defaultConfirmOkLabel;
+ const confirmTitle = defaultConfirmTitle;
+
+ return (
+
+
+
+
+
+
+
+
+
{confirmTitle}
+
+
+
+
+
+
+
+ );
+});
+
+DeleteButton.displayName = "DeleteButton";
diff --git a/packages/ui/registry/new-york/refine-ui/buttons/edit.tsx b/packages/ui/registry/new-york/refine-ui/buttons/edit.tsx
new file mode 100644
index 000000000000..0c7d089297e1
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/buttons/edit.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useEditButton } from "@refinedev/core";
+import { Button } from "@/registry/new-york/ui/button";
+import { Pencil } from "lucide-react";
+
+type EditButtonProps = {
+ /**
+ * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+ * @default Inferred resource name from the route
+ */
+ resource?: string;
+ /**
+ * Data item identifier for the actions with the API
+ * @default Reads `:id` from the URL
+ */
+ recordItemId?: BaseKey;
+ /**
+ * Access Control configuration for the button
+ * @default `{ enabled: true, hideIfUnauthorized: false }`
+ */
+ accessControl?: {
+ enabled?: boolean;
+ hideIfUnauthorized?: boolean;
+ };
+ /**
+ * `meta` property is used when creating the URL for the related action and path.
+ */
+ meta?: Record;
+} & React.ComponentProps;
+
+export const EditButton = React.forwardRef<
+ React.ComponentRef,
+ EditButtonProps
+>(
+ (
+ { resource, recordItemId, accessControl, meta, children, onClick, ...rest },
+ ref,
+ ) => {
+ const { hidden, disabled, LinkComponent, to, label } = useEditButton({
+ resource,
+ id: recordItemId,
+ accessControl,
+ meta,
+ });
+
+ const isDisabled = disabled || rest.disabled;
+ const isHidden = hidden || rest.hidden;
+
+ if (isHidden) return null;
+
+ return (
+
+ );
+ },
+);
+
+EditButton.displayName = "EditButton";
diff --git a/packages/ui/registry/new-york/refine-ui/buttons/list.tsx b/packages/ui/registry/new-york/refine-ui/buttons/list.tsx
new file mode 100644
index 000000000000..92d4320a836a
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/buttons/list.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useListButton } from "@refinedev/core";
+import { Button } from "@/registry/new-york/ui/button";
+import { List } from "lucide-react";
+
+type ListButtonProps = {
+ /**
+ * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+ * @default Inferred resource name from the route
+ */
+ resource?: BaseKey;
+ /**
+ * Access Control configuration for the button
+ * @default `{ enabled: true, hideIfUnauthorized: false }`
+ */
+ accessControl?: {
+ enabled?: boolean;
+ hideIfUnauthorized?: boolean;
+ };
+ /**
+ * `meta` property is used when creating the URL for the related action and path.
+ */
+ meta?: Record;
+} & React.ComponentProps;
+
+export const ListButton = React.forwardRef<
+ React.ComponentRef,
+ ListButtonProps
+>(({ resource, accessControl, meta, children, onClick, ...rest }, ref) => {
+ const { hidden, disabled, LinkComponent, to, label } = useListButton({
+ resource,
+ accessControl,
+ meta,
+ });
+
+ const isDisabled = disabled || rest.disabled;
+ const isHidden = hidden || rest.hidden;
+
+ if (isHidden) return null;
+
+ return (
+
+ );
+});
+
+ListButton.displayName = "ListButton";
diff --git a/packages/ui/registry/new-york/refine-ui/buttons/refresh.tsx b/packages/ui/registry/new-york/refine-ui/buttons/refresh.tsx
new file mode 100644
index 000000000000..e3b7da584c90
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/buttons/refresh.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useRefreshButton } from "@refinedev/core";
+import { RefreshCcw } from "lucide-react";
+import { Button } from "@/registry/new-york/ui/button";
+import { cn } from "@/lib/utils";
+
+type RefreshButtonProps = {
+ /**
+ * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+ * @default Inferred resource name from the route
+ */
+ resource?: string;
+ /**
+ * Data item identifier for the actions with the API
+ * @default Reads `:id` from the URL
+ */
+ recordItemId?: BaseKey;
+ /**
+ * Target data provider name for API call to be made
+ * @default `"default"`
+ */
+ dataProviderName?: string;
+ /**
+ * `meta` property is used when creating the URL for the related action and path.
+ */
+ meta?: Record;
+} & React.ComponentProps;
+
+export const RefreshButton = React.forwardRef<
+ React.ComponentRef,
+ RefreshButtonProps
+>(
+ (
+ { resource, recordItemId, dataProviderName, meta, children, ...rest },
+ ref,
+ ) => {
+ const {
+ onClick: refresh,
+ loading,
+ label,
+ } = useRefreshButton({
+ resource,
+ id: recordItemId,
+ dataProviderName,
+ meta,
+ });
+
+ const isDisabled = rest.disabled || loading;
+
+ return (
+
+ );
+ },
+);
+
+RefreshButton.displayName = "RefreshButton";
diff --git a/packages/ui/registry/new-york/refine-ui/buttons/show.tsx b/packages/ui/registry/new-york/refine-ui/buttons/show.tsx
new file mode 100644
index 000000000000..80f668d6ba84
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/buttons/show.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { type BaseKey, useShowButton } from "@refinedev/core";
+import { Eye } from "lucide-react";
+import { Button } from "@/registry/new-york/ui/button";
+
+type ShowButtonProps = {
+ /**
+ * Resource name for API data interactions. `identifier` of the resource can be used instead of the `name` of the resource.
+ * @default Inferred resource name from the route
+ */
+ resource?: string;
+ /**
+ * Data item identifier for the actions with the API
+ * @default Reads `:id` from the URL
+ */
+ recordItemId?: BaseKey;
+ /**
+ * Access Control configuration for the button
+ * @default `{ enabled: true, hideIfUnauthorized: false }`
+ */
+ accessControl?: {
+ enabled?: boolean;
+ hideIfUnauthorized?: boolean;
+ };
+ /**
+ * `meta` property is used when creating the URL for the related action and path.
+ */
+ meta?: Record;
+} & React.ComponentProps;
+
+export const ShowButton = React.forwardRef<
+ React.ComponentRef,
+ ShowButtonProps
+>(
+ (
+ { resource, recordItemId, accessControl, meta, children, onClick, ...rest },
+ ref,
+ ) => {
+ const { hidden, disabled, LinkComponent, to, label } = useShowButton({
+ resource,
+ id: recordItemId,
+ accessControl,
+ meta,
+ });
+
+ const isDisabled = disabled || rest.disabled;
+ const isHidden = hidden || rest.hidden;
+
+ if (isHidden) return null;
+
+ return (
+
+ );
+ },
+);
+
+ShowButton.displayName = "ShowButton";
diff --git a/packages/ui/registry/new-york/refine-ui/data-table/data-table-filter.tsx b/packages/ui/registry/new-york/refine-ui/data-table/data-table-filter.tsx
new file mode 100644
index 000000000000..1a8aa33275bf
--- /dev/null
+++ b/packages/ui/registry/new-york/refine-ui/data-table/data-table-filter.tsx
@@ -0,0 +1,977 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { useTranslate, type CrudOperators } from "@refinedev/core";
+import type { Column, Table as ReactTable } from "@tanstack/react-table";
+import type { DateRange } from "react-day-picker";
+import { Check, ChevronsUpDown, ListFilter, X } from "lucide-react";
+
+import { Button } from "@/registry/new-york/ui/button";
+import { Input } from "@/registry/new-york/ui/input";
+import { Badge } from "@/registry/new-york/ui/badge";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/registry/new-york/ui/popover";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/registry/new-york/ui/command";
+import { Separator } from "@/registry/new-york/ui/separator";
+import { Calendar } from "@/registry/new-york/ui/calendar";
+import { cn } from "@/lib/utils";
+
+export type DataTableFilterDropdownProps = {
+ column: Column;
+ contentClassName?: string;
+ triggerClassName?: string;
+ children: (args: {
+ isOpen: boolean;
+ setIsOpen: React.Dispatch>;
+ }) => React.ReactNode;
+};
+
+export function DataTableFilterDropdown({
+ column,
+ triggerClassName,
+ contentClassName,
+ children,
+}: DataTableFilterDropdownProps) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const isFiltered = column.getIsFiltered();
+
+ return (
+
+
+
+
+
+ {children({ isOpen, setIsOpen })}
+
+
+ );
+}
+
+type DataTableFilterDropdownActionsProps = {
+ className?: string;
+ isClearDisabled?: boolean;
+ isApplyDisabled?: boolean;
+ onClear: () => void;
+ onApply: () => void;
+};
+
+export function DataTableFilterDropdownActions({
+ className,
+ isClearDisabled,
+ isApplyDisabled,
+ onClear,
+ onApply,
+}: DataTableFilterDropdownActionsProps) {
+ const t = useTranslate();
+
+ return (
+