Introducing Shadcn UI: A reusable UI component collection

• shadcn/ui

  136 56,834 9.3 TypeScript

  Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

  

Shadcn UI is not actually a component library or UI framework. Instead, according to the documentation, it is “a collection of reusable components that we can copy and paste into our apps.” This reusable component collection was created by Shadcn, who has also created great open source projects like Taxonomy, Next.js for Drupal, and Reflexjs.

• shadcn-svelte

  3 3,855 9.7 Svelte

  shadcn/ui, but for Svelte. ✨

Shadcn UI has grown so popular that there is already an unofficial Svelte extension for it, which itself has already gained 2k GitHub stars as of this writing. The impact of the library has been so great that its creator landed a job at Vercel, meaning that Shadcn UI is now backed by Vercel.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• next-drupal

  14 575 8.9 TypeScript

  Next.js for Drupal has everything you need to build a next-generation front-end for your Drupal site: SSG, SSR, and ISR, Multi-site, Authentication, Webforms, Search API, I18n and Preview mode (works with JSON:API and GraphQL).

  

Shadcn UI is not actually a component library or UI framework. Instead, according to the documentation, it is “a collection of reusable components that we can copy and paste into our apps.” This reusable component collection was created by Shadcn, who has also created great open source projects like Taxonomy, Next.js for Drupal, and Reflexjs.

• lucide

  34 8,539 9.7 JavaScript

  Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

  

The theme editor’s interface allows you to configure themes for properties such as color, border radius, and mode (light or dark). You can also choose between two styles: default and new-york. The styles have unique components, animations, icons, and more. The default style has larger input fields and uses lucide-react icons and tailwindcss-animate for animations. The new-york style has smaller buttons, cards with shadows, and uses Radix Icons.

• next-themes

  22 4,418 7.8 TypeScript

  Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing

Shadcn UI supports dark mode for Next.js and Vite applications. For Next.js applications, Shadcn UI uses next-themes for the dark mode toggling functionality. When a user toggles between light and dark mode, the application switches between the light and dark theme tokens.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project