How do I connect Shadcn Admin Kit to my GraphQL API?

Use a GraphQL data provider like ra-data-graphql-simple. The kit supports any API via configurable Data Providers, as mentioned in the documentation, allowing seamless integration with your backend.

Shadcn Admin Kit vs Refine: which should I choose?

Shadcn Admin Kit integrates tightly with shadcn/ui for customizable styling, while Refine offers more built-in features and a wider ecosystem. Choose based on whether you prioritize shadcn/ui compatibility or out-of-the-box functionality.

How to add custom sidebar menu items in Shadcn Admin Kit?

You need to directly modify the component source code, as noted in the Tip under Adding Custom Routes. This requires forking or overriding the component, which can be cumbersome.

Does Shadcn Admin Kit work with Next.js App Router?

Yes, it's compatible with Next.js and other frameworks like Vite.js and Remix, as stated in the Features. However, setup may require additional configuration for server components or routing.

How to implement role-based access control with Shadcn Admin Kit?

Configure an authProvider with permission logic, as the kit supports role-based permissions compatible with any backend. Examples are provided in the documentation for custom auth implementations.

Can I use Shadcn Admin Kit without shadcn/ui?

No, it's built on top of shadcn/ui and requires its components and Tailwind CSS for styling, as per the Tech Stack. This dependency means you must adopt shadcn/ui's unstyled approach.

Open-Awesome

shadcn-admin-kit

MITTypeScriptv1.6.0

A component kit for building admin applications using shadcn/ui, featuring CRUD pages, data tables, forms, and authentication.

Visit Website GitHub

1.0k stars86 forks0 contributors

What is shadcn-admin-kit?

Shadcn Admin Kit is a React component library for building admin panels and internal tools. It provides a complete set of UI components for CRUD operations, data tables, forms, and authentication, designed to work seamlessly with shadcn/ui and any backend API. It solves the problem of rapidly developing custom admin interfaces without starting from scratch.

Target Audience

Frontend and full-stack developers building admin dashboards, internal tools, or content management systems for their applications. It's ideal for teams using React and shadcn/ui who need a flexible, API-agnostic admin solution.

Value Proposition

Developers choose Shadcn Admin Kit for its seamless integration with shadcn/ui, extensive feature set out of the box, and flexibility to work with any API backend. Its unique 'Guessers' feature automatically generates component code from API responses, significantly reducing development time.

Overview

Component kit to build your Admin app with shadcn/ui

Use Cases

Best For

Building custom admin panels for SaaS applications
Creating internal tools for data management and CRUD operations
Developing content management systems (CMS) with React
Rapid prototyping of admin interfaces with automatic code generation
Implementing role-based access control and authentication flows
Building responsive and accessible dashboards for business applications

Not Ideal For

Projects using non-React frameworks like Vue.js or Angular
Teams needing server-side rendered admin panels with minimal JavaScript hydration
Simple internal tools where a full CRUD kit is over-engineered and a basic table would suffice
Applications tightly coupled to a specific backend framework (e.g., Django Admin) without abstraction layers

Pros & Cons

Pros

Comprehensive CRUD Scaffolding

Provides pre-built List, Show, Edit, and Create pages that accelerate development, as outlined in the CRUD Pages feature, reducing boilerplate code.

Advanced Data Table

Includes sorting, filtering, export, bulk actions, and pagination out of the box, detailed in the Data Table section, for complex data management needs.

API Agnostic Flexibility

Works with any backend via configurable Data Providers, supporting REST, GraphQL, and custom APIs, emphasized in the Philosophy and Features.

Automated Code Generation

Guessers scaffold component code based on API responses, speeding up initial setup, as demonstrated in the Usage examples with console output for customization.

Cons

Complex Initial Setup

Requires integrating multiple dependencies like ra-core, data providers, and auth providers, which can be daunting and time-consuming for new users.

Tight React Ecosystem Coupling

Heavily dependent on React, shadcn/ui, and specific libraries (e.g., React Router, TanStack Query), limiting portability and increasing vendor lock-in.

Guessers' Customization Overhead

While guessers generate code, the output often needs manual adjustments for complex scenarios, as implied by the copy-paste workflow, adding post-generation work.

Frequently Asked Questions

Related Projects

react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design

Stars26,836

Forks5,459

Last commit11 days ago

swagger-codegen

swagger-codegen contains a template-driven engine to generate documentation, API clients and server stubs in different languages by parsing your OpenAPI / Swagger definition.

Stars17,771

Forks5,971

Last commit1 month ago

ng-admin

Add an AngularJS admin GUI to any RESTful API

Stars3,907

Forks703

Last commit6 years ago

Linx

Low-code API platform. Build, debug and host REST APIs

Stars0

Forks0

Last commit

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub