Refine + shadcn/ui

• 🎨 Full Source Code Access: shadcn/ui components are copied directly into your project, giving you complete control over styling, behavior, and structure without package dependencies.

• ♿ Accessibility First: Built on Radix UI primitives with WAI-ARIA standards, ensuring robust accessibility support including keyboard navigation and screen reader compatibility.

• 🔧 Deep Refine Integration: Seamlessly works with Refine's data hooks, authentication, routing, and form handling - less boilerplate, more productivity.

• 📱 Responsive Design: Built with Tailwind CSS and mobile-first principles, components automatically adapt to any screen size.

• 🌙 Advanced Theming: Full light/dark theme support using CSS custom properties with flexible customization options.

• 🌍 Internationalization: Built-in support for Refine's i18n system with RTL languages, localization, and proper formatting.

The easiest way to get started is by using Refine's CLI to scaffold a new project with shadcn/ui:

npm create refine-app@latest my-app -- --preset vite-shadcn

If you want to add shadcn/ui to an existing Refine project:

1. Install shadcn/ui in your project

   Follow the shadcn/ui installation guide based on the React framework you're using with Refine:

   • Vite
   • Next.js

2. Add Refine-specific components from the registry:

npx shadcn@latest add https://ui.refine.dev/r/auto-save-indicator.json
npx shadcn@latest add https://ui.refine.dev/r/create-view.json
npx shadcn@latest add https://ui.refine.dev/r/edit-view.json

Refine's shadcn/ui components are designed to work seamlessly with Refine's data hooks and provide common UI patterns needed in admin panels and data-heavy applications.

Here's a simple example showing how to create a data table with sorting, filtering, and pagination using the DataTable component:

import { useMemo } from "react";
import { useTable } from "@refinedev/react-table";
import type { ColumnDef } from "@tanstack/react-table";
import { DataTable } from "@/components/refine-ui/data-table/data-table";
import { DataTableSorter } from "@/components/refine-ui/data-table/data-table-sorter";
import { DataTableFilterDropdownText } from "@/components/refine-ui/data-table/data-table-filter";
import {
  ListView,
  ListViewHeader,
} from "@/components/refine-ui/views/list-view";

type Post = {
  id: number;
  title: string;
};

export default function PostList() {
  const columns = useMemo<ColumnDef<Post>[]>(
    () => [
      {
        id: "id",
        accessorKey: "id",
        header: ({ column }) => (
          <div className="flex items-center gap-1">
            <span>ID</span>
            <DataTableSorter column={column} />
          </div>
        ),
      },
      {
        id: "title",
        accessorKey: "title",
        header: ({ column, table }) => (
          <div className="flex items-center gap-1">
            <span>Title</span>
            <div>
              <DataTableFilterDropdownText
                defaultOperator="contains"
                column={column}
                table={table}
                placeholder="Filter by title"
              />
            </div>
          </div>
        ),
      },
    ],
    [],
  );

  const table = useTable<Post>({
    columns,
    refineCoreProps: {
      resource: "posts",
    },
  });

  return (
    <ListView>
      <ListViewHeader title="Posts" />
      <DataTable table={table} />
    </ListView>
  );
}

Refine provides a growing collection of components through the shadcn/ui registry system. Each component can be installed individually:

• Forms - Complete form building guide with validation
• Auto Save Indicator - Visual feedback for auto-save operations

• Data Table - Advanced data table with sorting, filtering, and pagination

• Sign In Form - Ready-to-use sign-in form with validation
• Sign Up Form - Ready-to-use sign-up form with validation
• Forgot Password - Password reset form component

• Themed Layout - Complete layout wrapper with sidebar navigation, dark/light theme and responsive design.

• Create View - Create page layout with navigation and breadcrumb
• Edit View - Edit page layout with navigation and breadcrumb
• List View - List page layout with navigation and breadcrumb
• Show View - Detail page layout with navigation and breadcrumb

• Create Button - Navigation button to create pages
• Edit Button - Navigation button to edit pages
• Delete Button - Button with delete confirmation dialog
• Show Button - Navigation button to show pages
• List Button - Navigation button to list pages
• Clone Button - Button to clone/duplicate records
• Refresh Button - Button to refresh data

• Error Component - Error boundary and error display component
• Notification Provider - Toast notification system

Since components are added to your source code, you have complete control over styling. The components use shadcn/ui's theming system based on CSS variables, making it easy to customize colors, spacing, and appearance.

The theme system uses HSL color values defined as CSS custom properties. These variables are automatically generated during the shadcn init process and can be found in your globals.css file:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --muted: 210 40% 96%;
  --accent: 210 40% 96%;
  --destructive: 0 84.2% 60.2%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 47.4% 11.2%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --muted: 217.2 32.6% 17.5%;
  --accent: 217.2 32.6% 17.5%;
  --destructive: 0 62.8% 30.6%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

You can customize your theme in several ways:

1. Manual Editing: Modify the CSS variables in your globals.css file directly
2. Theme Generator: Use the shadcn/ui theme editor to generate custom themes
3. Interactive Editor: Try the TweakCN Theme Editor for a visual approach to theme creation

To add additional themes beyond light and dark:

[data-theme="blue"] {
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... other variables */
}

[data-theme="green"] {
  --primary: 142.1 76.2% 36.3%;
  --primary-foreground: 355.7 100% 97.3%;
  /* ... other variables */
}

For more detailed theming options, refer to the shadcn/ui theming documentation.