# refine-shadcn | Ferdi ÜNAL | Knowledge Base | Instagit

 This package provides theme integration using shadcn-ui for refine.dev

GitHub Stars: 114

Repository: https://github.com/ferdiunal/refine-shadcn

---

## Articles

### [How to Create Custom Layouts by Extending BaseLayout in refine-shadcn](/ferdiunal/refine-shadcn/create-custom-layouts-extending-baselayout)

Create custom layouts in refine-shadcn by extending BaseLayout. Inherit theme support and wrap your own headers, sidebars, or navigation drawers with ease.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Configure the Notification Provider with Sonner in refine-shadcn](/ferdiunal/refine-shadcn/configure-notification-provider-sonner)

Easily configure Sonner notifications in refine-shadcn. Learn how to import notificationProvider, pass it to Refine, and render the Toaster component for seamless alerts.

- Tags: how-to-guide
- Published: 2026-03-01

### [How Resource-Based Routes Work in refine-shadcn: From Declaration to Navigation](/ferdiunal/refine-shadcn/how-resource-based-routes-work)

Understand how resource-based routes work in refine-shadcn. Connect resource declarations to dynamic URLs for automatic navigation, permission-aware routing, and reusable CRUD components in React.

- Tags: deep-dive
- Published: 2026-03-01

### [How to Use Pre-Built Validation Schemas (loginSchema & registerSchema) in refine-shadcn](/ferdiunal/refine-shadcn/use-prebuilt-validation-schemas-loginschema-registerschema)

Learn to use loginSchema and registerSchema in refine-shadcn. Import validation schemas, pass to zodResolver, and get typed form data for auth without custom Zod logic.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Customize the AuthLayout with a Logo and Background Image in refine-shadcn](/ferdiunal/refine-shadcn/customize-authlayout-logo-background-image)

Customize AuthLayout in refine-shadcn by adding a logo and background image. Easily personalize your authentication UI with this simple guide.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Make the Layout Responsive Across Different Screen Sizes in refine-shadcn](/ferdiunal/refine-shadcn/make-layout-responsive-screen-sizes)

Learn how to make your refine-shadcn layout responsive across all screen sizes. Discover CSS media queries, dynamic panels, and persistent sidebar collapse for a seamless user experience.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Use the Loading Component and Manage Loading States in refine-shadcn](/ferdiunal/refine-shadcn/use-loading-component-manage-loading-states)

Learn how to use refine-shadcn Loading components to manage loading states effectively. Wire LoadingIcon or Loader to refine hooks like useTable for a better user experience.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Implement Bulk Delete with Table Selection and bulkDeleteAction in refine-shadcn](/ferdiunal/refine-shadcn/implement-bulk-delete-table-selection-bulkdeleteaction)

Learn to implement bulk delete in refine-shadcn using table selection and bulkDeleteAction. This guide shows how to harness the power of TanStack Table and refine hooks for efficient data management.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Enable AutoSave in Forms Using refineCoreProps in Refine-Shadcn](/ferdiunal/refine-shadcn/enable-autosave-forms-refine-core-props)

Learn how to enable autoSave in forms using refineCoreProps with Refine-Shadcn. Automatically persist form data and enhance user experience without manual saves.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Implement Table Filtering with Table.Filter.DateRangePicker in refine-shadcn](/ferdiunal/refine-shadcn/implement-table-filtering-daterangepicker)

Implement table filtering with Table.Filter.DateRangePicker in refine-shadcn. Use the filter prop on Table.Column to enable start and end date range selection with shadcn/ui and react-table.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Use Table.ShowAction, Table.EditAction, and Table.DeleteAction in refine-shadcn](/ferdiunal/refine-shadcn/use-table-showaction-editaction-deleteaction)

Effortlessly add permission-aware row actions like show edit and delete to your refine-shadcn tables. Learn to use Table.ShowAction Table.EditAction and Table.DeleteAction for seamless data management.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Customize the PageHeader with Title and Extra Content in refine-shadcn](/ferdiunal/refine-shadcn/customize-pageheader-title-extra-content)

Customize refine-shadcn PageHeader title and extra content using simple props. Inject custom React nodes for full control over headings and actions. Learn more now.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Configure the Breadcrumbs Component for Navigation in refine-shadcn](/ferdiunal/refine-shadcn/configure-breadcrumbs-component-navigation)

Learn to configure refine-shadcn breadcrumbs for intuitive navigation. Customize display options with props or global settings for an improved user experience. Essential for refine-shadcn developers.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Use shadcn/ui Components (Button, Input, Dialog) in refine-shadcn](/ferdiunal/refine-shadcn/use-shadcn-ui-components-button-input-dialog)

Learn to use shadcnui Button Input and Dialog components in refine-shadcn Import directly from @ferdiunal/refine-shadcn/ui for theme awareness and Refine defaults.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Implement Dark/Light Theme Switching with the ModeToggle Component in refine-shadcn](/ferdiunal/refine-shadcn/implement-dark-light-theme-switching-modetoggle)

Easily implement dark/light theme switching in your refine-shadcn app. Wrap with ThemeProvider and add ModeToggle for instant theme changes with persisted preferences.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Set Up Internationalization (i18n) with the I18nProvider in refine-shadcn](/ferdiunal/refine-shadcn/setup-internationalization-i18n-provider)

Learn to set up internationalization i18n with refine-shadcn's I18nProvider. Easily manage translations and locales across your React application for a global reach.

- Tags: how-to-guide
- Published: 2026-03-01

### [How the @ferdiunal/refine-shadcn-auth Package Integrates with better-auth](/ferdiunal/refine-shadcn/auth-package-integration-better-auth)

Discover how refineshadcn auth integrates with better-auth using a three-layer architecture. Learn how it maps authentication methods to API calls for seamless integration.

- Tags: deep-dive
- Published: 2026-03-01

### [How to Integrate LoginForm, RegisterForm, and ForgotPasswordForm in refine-shadcn](/ferdiunal/refine-shadcn/integrate-auth-forms-login-register-forgotpassword)

Learn to integrate LoginForm, RegisterForm, and ForgotPasswordForm in refine-shadcn. Install the auth package, initialize the provider, and import form components for seamless authentication.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Implement Form Validation Using Zod with the Field Component in refine-shadcn](/ferdiunal/refine-shadcn/form-validation-zod-field-component)

Master form validation with Zod and the Field component in refine-shadcn. Connect Zod schemas to useForm using zodResolver for automatic input validation and error display. Boost your app's reliability.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Use ListPage, ShowPage, CreatePage, and EditPage Components in refine-shadcn](/ferdiunal/refine-shadcn/use-listpage-showpage-createpage-editpage)

Master refine-shadcn CRUD components. Nest tables and forms within ListPage, ShowPage, CreatePage, and EditPage for styled resource pages with essential UI elements.

- Tags: how-to-guide
- Published: 2026-03-01

### [How the refine-shadcn Table Component Implements Sorting, Filtering, and Pagination](/ferdiunal/refine-shadcn/table-component-sorting-filtering-pagination)

Discover how refine-shadcn Table component uses TanStack Table and react-table hooks for sorting, filtering, and pagination control. Learn about toggleSorting, setFilterValue, and setPageIndex methods.

- Tags: deep-dive
- Published: 2026-03-01

### [How to Customize the Sidebar Component with Dynamic Resource Navigation in refine-shadcn](/ferdiunal/refine-shadcn/customize-sidebar-dynamic-resource-navigation)

Customize the refine-shadcn Sidebar with dynamic resource navigation. Learn how to use useMenu(), custom items, and the isCollapsed prop without altering core logic.

- Tags: how-to-guide
- Published: 2026-03-01

### [How to Configure the ThemeProvider with next-themes for Dark Mode in Refine-ShadCN](/ferdiunal/refine-shadcn/configure-themeprovider-next-themes-dark-mode)

Learn to easily configure ThemeProvider with next-themes for dark mode in Refine-ShadCN. Set defaultTheme dark and enableSystem for seamless OS integration. Improve user experience now.

- Tags: how-to-guide
- Published: 2026-03-01

### [How the DefaultLayout Component Handles Responsive Resizable Panels in refine-shadcn](/ferdiunal/refine-shadcn/how-defaultlayout-handles-responsive-resizable-panels)

Discover how refine-shadcn's DefaultLayout component manages responsive resizable panels using media queries, size calculations, and cookie persistence for a seamless user experience.

- Tags: deep-dive
- Published: 2026-03-01