A curated list of awesome things related to shadcn/ui.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

This resource list introduces libraries and components related to shadcn/ui. These libraries and components provide pre-built and customizable UI components for projects such as React, Next.js, Tailwind CSS, etc. The following is a summary of the main contents of the list:

Note Contents

Awesome shadcn-ui GitHub Repository

Libs and Components

shadcn-blocks: Blocks is the official shadcn/ui pre-made but customizable components that can be copied and pasted into your projects.
shadcn-extension: An open-source component collection that extends your UI library, built using shadcn/ui components.
shadcn-ui-expansions: A lot of useful components which shadcn/ui does not have out of the box.
shadcn-extends: Intended to be a collection of components built using shadcn/ui.
shadcn-table-v2: shadcn/ui table component with server-side sorting, filtering, and pagination.
shadcn-phone-input: Customizable phone input component with proper validation for any country.
shadcn-phone-input-2: Simple and formatted phone input component built with shadcn/ui and libphonenumber-js.
phone-input-shadcn-ui: Custom phone number component built with shadcn/ui.
password-input: shadcn/ui custom password input.
react-dnd-kit-tailwind-shadcn-ui: Drag and drop accessible kanban board implementing using React, dnd-kit, tailwind, and shadcn/ui.
nextjs-dnd: Sortable Drag and Drop with Next.js, shadcn/ui, and dnd-kit.
fancy-multi-select: The Multi Select Component is inspired by campsite.design's and cal.com's settings forms.
auto-form: A React component that automatically creates a shadcn/ui form based on a zod schema.
date-range-picker-for-shadcn: Includes multi-month views, text entry, preset ranges, responsive design, and date range comparisons.
emblor: A highly customizable, accessible, and fully-featured tag input component built with shadcn/ui.
enhanced-button: An enhanced version of the default shadcn-button component.
time-picker: A simple TimePicker for your shadcn/ui project.
shadcn-chat: Customizable and reusable chat component for you to use in your projects.
nextjs-components: A collection of Next.js components built with TypeScript, React, shadcn/ui, Craft UI, and Tailwind CSS.
credenza: Ready-made responsive modal component for shadcn/ui.
country-state-dropdown: This Component is built with Next.js, Tailwind CSS, shadcn/ui & Zustand for state management.
shadcn-drag-table: A drag-and-drop table component using shadcn/ui and Next.js.
file-vault: File upload component for React.
file-uploader: A file uploader built with shadcn/ui and react-dropzone.
plate: The rich-text editor for React.
autocomplete-select-shadcn-ui: Autocomplete component built with shadcn/ui and Fancy Multi Select by Maximilian Kaske.
shadcn-data-table-advanced-col-opions: Column-resizing option to shadcn/ui DataTable.
pricing-page-shadcn: Pricing Page made with shadcn/ui & Next.js 14. Completely customizable
neobrutalism-components: Collection of neobrutalism-styled Tailwind React and Shadcn UI components.
shadcn-stepper: A complete stepper component built with shadcn/ui
shadcn-linear-combobox: A copy of the combobox that Linear uses to set the priority of a task.
magicui: React components to build beautiful landing pages using tailwindcss + framer motion + shadcn/ui
aceternityui: Copy paste the most trending react components without having to worry about styling and animations.
cult-ui: A well-curated set of animated shadcn-style React components for more specific use-cases.
planner: Planner is a highly adaptable scheduling component tailored for React applications.
shadcn-cal: A copy of the monthly calendar used by Cal.com with shadcn/ui, Radix Colors and React Aria.
shadcn-ui-sidebar: A stunning, functional and responsive retractable sidebar built on top of shadcn/ui.
capture-photo: Capture-Photo is a versatile, browser-based React component designed to streamline the integration of camera functionalities directly into your web applications.
search-address: The SearchAddress component provides a flexible and interactive search interface for addresses, utilizing the powerful Nominatim service from OpenStreetMap.
sortable: A sortable component built with shadcn/ui, radix ui, and dnd-kit.
uixmat/onborda: Give your application the onboarding it deserves with Onborda product tour for Next.js
shadcn-multi-select-component: A multi-select component designed with shadcn/ui
echo-editor: A modern WYSIWYG rich-text editor based on tiptap and shadcn/ui
clerk-shadcn-theme: Easily synchronize your Clerk <SignIn /> and <SignUp /> components with your shadcn/ui styles
clerk-elements: Composable components that can be used to build custom UIs on top of Clerk's APIs

Apps

shadcn-ui: Add components from shadcn/ui directly from VS Code.

Extensions

vscode-shadcn-svelte: VS Code extension for shadcn/ui components in Svelte projects.
vscode-shadcn-vue: Extension for integrating shadcn/ui components into Vue.js projects.
shadcn/ui Components Manager: A plugin for Jetbrain products. It allows you to manage your shadcn/ui components across Svelte, React, Vue, and Solid frameworks with this plugin. Simplify tasks like adding, removing, and updating components.
raycast-shadcn: Raycast extension to browse shadcn/ui documentation, components, and examples.
vscode-shadcn-ui-snippets: Easily import and use shadcn-ui components with ease using snippets within VSCode. Just type cn or shadcn in your jsx/tsx file and you will get a list of all the components to choose from.

Colors and Customizations

zippy starter's shadcn/ui theme generator: Easily create custom themes from a single color that you can copy and paste into your apps.
10000+Themes for shadcn/ui: 10000+ Themes for shadcn/ui.
ui-colorgen: An application designed to assist you with color configuration of shadcn/ui.
gradient-picker: Fancy Gradient Picker built with Shadcn UI, Radix UI, and Tailwind CSS.
shadcn-ui-customizer: POC - shadcn/ui themes with color pickers.
navnote/rangeen: Tool that helps you to create a color palette for your website.
dizzy: Bootstrap a new Next or Vite project with shadcn/ui. Customize font, icons, colors, spacing, radii, and shadows.

Animations

magicui.design: Largest collection of open-source react components to build beautiful landing pages.
motionvariants: Beautiful Framer Motion animations.

Tools

v0: Vercel's generative UI system, built on shadcn/ui and TailwindCSS, allows effortless UI generation from text prompts and/or images. It produces React and HTML code, integration is also possible via v0 CLI command.
shadcn-pricing-page-generator: The easiest way to get a React pricing page with shadcn/ui, Radix UI and/or Tailwind CSS.
invoify: An invoice generator app built using Next.js, Typescript, and shadcn/ui.
pastecode: Pastebin alternative built with Typescript, Next.js, Drizzle, Shadcn, RSC.

Boilerplates / Templates

taxonomy: An open source application built using the new router, server components and everything new in Next.js.
shadcn-landing-page: Landing page template using shadcn/ui, React, TypeScript and Tailwind CSS.
shadcn-vue-landing-page: Landing page template using Vue, shadcn-vue, TypeScript, Tailwind CSS.
shadcn-landing-page: Project conversion shadcn-vue-landing-page to nextjs - Landing page template using Nestjs, shadcn/ui, TypeScript, Tailwind CSS.
turborepo-shadcn-ui-tailwindcss: Turborepo starter with shadcn/ui & Tailwind CSS pre-configured for shared UI components.
design-system-template: Turborepo + TailwindCSS + Storybook + shadcn/ui.
next-shadcn-dashboard-starter: Admin Dashboard Starter with Next.js 14 and shadcn/ui.
chadnext: Quick Starter Template includes Next.js 14 App router, shadcn/ui, LuciaAuth, Prisma, Server Actions, Stripe, Internationalization and more.
nextjs-mdx-blog: Starter template built with Contentlayer, MDX, shadcn/ui, and Tailwind CSS.
t3-app-template: This is the admin template for T3 Stack and shadcn/ui Awesome shadcn-ui GitHub Repository

目前尚无回复