shadcn-admin README

The project's README from github.com/satnaing/shadcn-admin. As one markdown file: README.md.

Shadcn Admin Dashboard

Admin Dashboard UI crafted with Shadcn and Vite. Built with responsiveness and accessibility in mind.

alt text

Sponsored by Clerk

I've been creating dashboard UIs at work and for my personal projects. I always wanted to make a reusable collection of dashboard UI for future projects; and here it is now. While I've created a few custom components, some of the code is directly adapted from ShadcnUI examples.

This is not a starter project (template) though. I'll probably make one in the future.

Features

Customized Components (click to expand)

This project uses Shadcn UI components, but some have been slightly modified for better RTL (Right-to-Left) support and other improvements. These customized components differ from the original Shadcn UI versions.

If you want to update components using the Shadcn CLI (e.g., npx shadcn@latest add <component>), it's generally safe for non-customized components. For the listed customized ones, you may need to manually merge changes to preserve the project's modifications and avoid overwriting RTL support or other updates.

If you don't require RTL support, you can safely update the 'RTL Updated Components' via the Shadcn CLI, as these changes are primarily for RTL compatibility. The 'Modified Components' may have other customizations to consider.

Modified Components

  • scroll-area
  • sonner
  • separator

RTL Updated Components

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

Notes:

  • Modified Components: These have general updates, potentially including RTL adjustments.
  • RTL Updated Components: These have specific changes for RTL language support (e.g., layout, positioning).
  • For implementation details, check the source files in src/components/ui/.
  • All other Shadcn UI components in the project are standard and can be safely updated via the CLI.

Tech Stack

UI: ShadcnUI (TailwindCSS + RadixUI)

Build Tool: Vite

Routing: TanStack Router

Type Checking: TypeScript

Linting/Formatting: ESLint & Prettier

Icons: Lucide Icons, Tabler Icons (Brand icons only)

Auth (partial): Clerk

Run Locally

Clone the project

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

Go to the project directory

  cd shadcn-admin

Install dependencies

  pnpm install

Start the server

  pnpm run dev

Sponsoring this project ❤️

If you find this project helpful or use this in your own work, consider sponsoring me to support development and maintenance. You can buy me a coffee as well. Don’t worry, every penny helps. Thank you! 🙏

For questions or sponsorship inquiries, feel free to reach out at [email protected].

Current Sponsor

Author

Crafted with 🤍 by @satnaing

License

Licensed under the MIT License

shadcn-admin (satnaing/shadcn-admin)

Searching Database…

15.8K ·GitHub
Shadcn-admin
Что это такое?Опенсорсный интерфейс админ-панели на Shadcn UI (TailwindCSS + Radix) и Vite — набор готовых экранов дашборда, который автор адаптирует под свои проекты.
Это стартовый шаблон, из которого можно собрать свой проект, или готовый дашборд?Это законченное веб-приложение, которое можно клонировать, а не заготовка. Автор прямо пишет, что это не стартовый шаблон, хотя в будущем может переделать его в шаблон.
Как запустить это у себя локально?Склонируйте репозиторий, перейдите в папку, установите зависимости и запустите dev-сервер Vite (npm run dev). Туда же входят скрипты для сборки, предпросмотра, линтинга, форматирования и тестов на Vitest.
На чём это сделано — нужно ли что-то особенное, например аккаунт для авторизации?Стек Vite + React: Shadcn UI (TailwindCSS + Radix UI), TanStack Router, TypeScript, ESLint/Prettier и иконки Lucide/Tabler. Авторизация частично подключена через Clerk, так что для этой части понадобится настройка Clerk.
Можно ли спокойно обновлять компоненты Shadcn через Shadcn CLI?В основном да, но не вслепую. Несколько компонентов (scroll-area, sonner, separator) изменены, а ещё десять содержат правки для RTL, поэтому при обновлении через CLI их, возможно, придётся вручную мерджить, чтобы не потерять изменения.
Что я получу сразу из коробки?Больше 10 страниц со встроенным сайдбаром и глобальным поиском по команде, светлая и тёмная тема, поддержка RTL и дополнительные кастомные компоненты — всё адаптивное и доступное.
Зачем автор это сделал?Он постоянно делал интерфейсы дашбордов для рабочих и личных проектов и хотел собрать переиспользуемый набор, на который можно опираться в будущем, а не начинать каждый раз с нуля.
Есть ли тесты или инструменты для качества кода?Да. В репозитории есть браузерные тесты на Vitest, скрипты ESLint и Prettier, а также knip для поиска неиспользуемого кода.
What are similar projects?vuestic-admin, arc-library, AdminLTE, tabler, Monocharts, ui, gentelella, full-stack-fastapi-template
Which topics is it in?command-palette, tanstack-router, admin-panel, shadcn, shadcn-ui, responsive, admin-dashboard, dark-mode, accessibility, tailwindcss, vite, component-library
Creator
satnaing
Size
2.9 MB
Stars
15.8K
Updated
CommitJun 11Releasev2.2.1Nov 06
Age
2y
Commits · 90 Days