Shadcn UI 是什么
Shadcn UI 是一个现代化的 React 组件库,为开发者提供了一套高度可定制、可访问性强的 UI 组件。它的主要特点和优势包括:
可定制性强:组件使用 Radix UI 和 Tailwind CSS,允许开发者轻松调整样式和行为。 开源免费:完全开源,可以自由使用和修改。 复制粘贴友好:采用独特的 "复制粘贴" 方法,让开发者能够轻松集成所需组件。 性能优秀:组件经过优化,确保高性能和流畅的用户体验。 主题支持:内置深色模式和主题切换功能,方便创建多样化的界面。
近期 Shadcn UI 作者还发布了一个功能强大的 Sidebar 组件,有了这个组件,我们就能方便地根据需求自定义 Sidebar 了。
Shadcn UI 和 Next.js 的结合为快速开发出海 SaaS 或 Landing Page 项目提供了强大的解决方案。
Awesome Shadcn UI
https://github.com/bytefer/awesome-shadcn-ui
Awesome Shadcn UI 目前包含与 Shadcn UI 有关的 200 多个资源,共 13 个分类。涉及 UI 组件库、Landing Page 模板、SaaS 模板(接入用户认证、支付、数据库等)、Shadcn 扩展、Shadcn 工具等。
来源:https://shadcn.batchtool.com/
接下来,我将分享 Awesome Shadcn UI 项目中的 8 个开源 SaaS 项目。
SaaS Starter
1.Next Saas Starter
【MIT/5K+ Star】
https://github.com/leerob/next-saas-starter
技术栈:
框架:Next.js 数据库:Postgres ORM:Drizzle 支付:Stripe UI 库:Shadcn UI
2.SaaS-Boilerplate
【MIT/3.8K+ Star】
https://github.com/ixartz/SaaS-Boilerplate
技术栈:
框架:Next.js 数据库:Postgres 用户认证:Clerk ORM:Drizzle 支付:Stripe UI 库:Shadcn UI
3.Cloudflare SaaS Kit
【3K+ Star】
https://github.com/Dhravya/cloudflare-saas-stack
技术栈:
框架:Next.js 数据库:Cloudflare D1 用户认证:NextAuth.js ORM:Drizzle 部署:Cloudflare Pages UI 库:Shadcn UI
4.Saasfly
【MIT/1.9K+ Star】
https://github.com/saasfly/saasfly
技术栈:
框架:Next.js 数据库:PostgresSQL 用户认证:NextAuth.js ORM:Prisma 支付:Stripe UI 库:Shadcn UI
5.Next-Saas-Stripe-Starter
【MIT/1.8K+ Star】
https://github.com/mickasmt/next-saas-stripe-starter
技术栈:
框架:Next.js 数据库:Neon 用户认证:Auth.js ORM:Prisma 支付:Stripe 部署:Vercel UI 库:Shadcn UI
6.Relivator-Nextjs-Template
【MIT/1K+ Star】
https://github.com/blefnk/relivator-nextjs-template
技术栈:
框架:Next.js 数据库:Postgres/MySQL 用户认证:NextAuth.js ORM:Drizzle 支付:Stripe UI 库:Shadcn UI
7.Nextjs-Starter-Kit
【MIT/966 Star】
https://github.com/michaelshimeles/nextjs-starter-kit
技术栈:
框架:Next.js 数据库:Supabase 用户认证:Clerk ORM:Prisma 支付:Stripe UI 库:Shadcn UI
8.Rapidlaunch
【MIT/434 Star】
https://github.com/alifarooq9/rapidlaunch
技术栈:
框架:Next.js 数据库:Postgres 用户认证:Auth.js ORM:Drizzle 支付:Lemonsqueezy UI 库:Shadcn UI
除了以上 8 个开源项目之外,Awesome Shadcn UI 还有介绍其他的项目,感兴趣的话,可以访问以下地址,阅读更多内容。
https://github.com/bytefer/awesome-shadcn-ui