Introducing Shadcn UI: A reusable UI component collection

• shadcn/ui

  229 71,169 9.2 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.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• shadcn-svelte

  4 5,058 9.4 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.

• next-drupal

  14 630 8.3 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

  39 10,583 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

  23 5,044 7.6 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.

Suggest a related project