DOCSEARCHbyAlgolia
Submit Docs

Shadcn Admin

repository·main·Indexed 12 days ago

https://github.com/satnaing/shadcn-admin

A responsive and accessible admin dashboard UI built with Vite, Shadcn UI, and TanStack Router. Version 2.2.1 features built-in support for Light/Dark modes, RTL (Right-to-Left) layouts, and a global search command. It includes specialized components for data tables, layout management, and a configuration drawer for theme and typography settings.

Tokens
12.3K
Snippets
52
Records
58
Agent score
95%

What's inside Shadcn Admin

  2. Run Shadcn Admin locally

    main

    To run the Shadcn Admin dashboard on your local machine, clone the repository, install the dependencies using pnpm, and start the development server.

    Prerequisites:

    • git installed
    • pnpm installed

    Steps:

    1. Clone the repository.
    2. Navigate into the project directory.
    3. Install dependencies.
    4. Start the development server.
      git clone https://github.com/satnaing/shadcn-admin.git
  cd shadcn-admin
  pnpm install
  pnpm run dev

  3. Updating Shadcn UI components

    main

    This project uses modified versions of certain Shadcn UI components to support Right-to-Left (RTL) layouts and other improvements. When using the Shadcn CLI (e.g., npx shadcn@latest add <component>), follow these guidelines to avoid breaking project features:

    • Standard Components: All components not listed below are standard Shadcn UI components and can be safely updated via the CLI.
    • RTL Updated Components: These have specific changes for RTL language support (layout, positioning). If you do not require RTL support, you can safely update these via the CLI. If you do require RTL, you must manually merge changes to preserve RTL compatibility.
    • Modified Components: These contain general updates and potential RTL adjustments. You should manually merge changes to avoid overwriting custom logic.

    RTL Updated Components

    • alert-dialog
    • calendar
    • command
    • dialog
    • dropdown-menu
    • select
    • table
    • sheet
    • sidebar
    • switch

    Modified Components

    • scroll-area
    • sonner
    • separator

    For specific implementation details, inspect the source files in src/components/ui/.

  4. Reset all dashboard settings to default

    main

    The ConfigDrawer includes a global 'Reset' button in its footer. When clicked, it triggers a handleReset function that calls the following reset methods from the project's context providers:

    • resetDir() from useDirection (resets text direction)
    • resetTheme() from useTheme (resets color theme)
    • resetLayout() from useLayout (resets layout and sidebar configurations)
    • setOpen(true) from useSidebar (ensures the sidebar state is consistent)

  5. Manage dashboard layout with LayoutProvider and useLayout

    main

    The LayoutProvider component manages the dashboard's visual layout state, specifically the collapsible mode and the variant style. These settings are persisted in cookies for 7 days, ensuring the user's layout preferences remain consistent across sessions.

    To use these layout settings in your components, wrap your application (or the dashboard section) in the LayoutProvider and consume the state using the useLayout hook.

    Layout Options:

    • Collapsible modes (Collapsible): 'offcanvas', 'icon', or 'none'.
    • Variants (Variant): 'inset', 'sidebar', or 'floating'.

    Default Values:

    • defaultCollapsible: 'icon'
    • defaultVariant: 'inset'
    import { LayoutProvider, useLayout } from '@/context/layout-provider'

function App() {
  return (
    <LayoutProvider>
      <Dashboard />
    </LayoutProvider>
  )
}

function Dashboard() {
  const { variant, setVariant, collapsible, setCollapsible } = useLayout()

  return (
    <div>
      <p>Current variant: {variant}</p>
      <button onClick={() => setVariant('sidebar')}>Switch to Sidebar</button>
      
      <p>Current collapsible mode: {collapsible}</p>
      <button onClick={() => setCollapsible('offcanvas')}>Switch to Offcanvas</button>
    </div>
  )
}

  6. How to add a new font to the dashboard

    main

    To add a new font to the dashboard, you must register it in three different locations to ensure it is available in the settings UI, loaded in the browser, and accessible via Tailwind CSS classes.

    1. Register in src/config/fonts.ts: Add the font name to the fonts array. This enables the font in the appearance settings and allows the generation of dynamic classes like font-[name].
    2. Load in index.html: Add the appropriate <link> tag (e.g., from Google Fonts) to the <head> of your index.html file.
    3. Define in index.css: Add the font family to your CSS using the @theme inline block and a CSS variable. This makes the font available to Tailwind.

    Example: Adding 'Roboto'

    Step 1: src/config/fonts.ts

    export const fonts = ['inter', 'manrope', 'system', 'roboto'] as const

    Step 2: index.html

    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    Step 3: index.css

    @theme inline {
  --font-roboto: 'Roboto', var(--font-sans);
}
    export const fonts = ['inter', 'manrope', 'system'] as const

  7. Use SearchProvider to enable global search

    main

    Wrap your application (or the relevant part of your component tree) with the SearchProvider component to enable global search functionality. The provider manages the search menu's visibility state and automatically registers a global keyboard shortcut (Cmd+K on macOS or Ctrl+K on Windows/Linux) to toggle the search menu.

    import { SearchProvider } from '@/context/search-provider'

function App() {
  return (
    <SearchProvider>
      <YourAppContent />
    </SearchProvider>
  )
}

  8. Configure ESLint for shadcn-admin

    main

    The project uses a flat configuration format via eslint/config. It enforces strict TypeScript and React standards, including recommended rules from @eslint/js, typescript-eslint, and @tanstack/eslint-plugin-query.

    Key configuration details:

    • Ignored directories: dist and src/components/ui (to avoid linting generated or third-party shadcn components).
    • Supported files: TypeScript files (**/*.{ts,tsx}).
    • Environment: Browser globals are enabled.
    • Plugins: Includes react-hooks and react-refresh.
    import globals from 'globals'
import js from '@eslint/js'
import pluginQuery from '@tanstack/eslint-plugin-query'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig } from 'eslint/config'
import tseslint from 'typescript-eslint'

export default defineConfig(
  { ignores: ['dist', 'src/components/ui'] },
  // ... configuration object
)

  9. Configure Knip ignore patterns

    main

    The project uses knip for linting unused files and dependencies. You can configure which files or directories are excluded from analysis by using the ignore array in the knip.config.ts file.

    In this repository, the following paths are ignored to prevent false positives from auto-generated or specific UI components:

    • src/components/ui/** (Shadcn UI components)
    • src/components/layout/app-title.tsx
    • src/tanstack-table.d.ts
    import type { KnipConfig } from 'knip'

const config: KnipConfig = {
  ignore: [
    'src/components/ui/**',
    'src/components/layout/app-title.tsx',
    'src/tanstack-table.d.ts',
  ],
}

export default config

  10. Merge Tailwind classes with cn()

    main

    The cn function is a utility used to conditionally merge Tailwind CSS classes. It combines clsx for conditional logic and tailwind-merge to ensure that conflicting Tailwind classes are resolved correctly (e.g., ensuring the last class provided takes precedence).

    Use this whenever you need to apply dynamic styles to components without worrying about CSS specificity issues caused by overlapping Tailwind utility classes.

    import { cn } from '@/lib/utils'

// Example usage:
const className = cn("base-class", isTrue && "conditional-class", "override-class")

  11. Use the Chats component

    main

    The Chats component is the main entry point for the chat messaging feature. It provides a complete UI for managing conversations, including a searchable list of users, a message viewing area, and a dialog for starting new conversations. It relies on internal data structures for ChatUser and Convo types.

    import { Chats } from '@/features/chats'

export default function Dashboard() {
  return (
    <Chats />
  )
}

  12. Use the ConfigDrawer component

    main

    The ConfigDrawer component provides a user interface (via a Sheet component) that allows users to adjust dashboard settings including theme, sidebar style, layout mode, and text direction. It can be placed anywhere in your application to provide a settings trigger (a ghost-variant button with a Settings icon) that opens a configuration drawer.

    Key features:

    • Theme Settings: Switch between system, light, and dark modes.
    • Sidebar Settings: Choose between inset, floating, and sidebar variants.
    • Layout Settings: Toggle between default (expanded), icon (compact), and offcanvas (full layout) modes.
    • Direction Settings: Switch between ltr (Left to Right) and rtl (Right to Left) text directions.
    • Reset Functionality: Allows resetting individual sections to their defaults or resetting all settings at once.
    import { ConfigDrawer } from '@/components/config-drawer'

// Use it within your layout or navigation bar
export function MyComponent() {
  return (
    <div>
      <ConfigDrawer />
    </div>
  )
}