shadcn/uiとその類似ライブラリ/プロジェクトについて
#Tailwind_CSS #shadcn/ui #Radix_UI
はじめに
shadcn/uiのように、Tailwind CSSをベースにユーザーがコピーペーストして柔軟に改変できるような作りのライブラリやプロジェクトが増えているようです
shadcn/uiやその類似プロジェクト/ライブラリについてまとめてみます
一覧
shadcn/ui
おそらく、一番有名なプロジェクト
React以外のフレームワーク向けにも移植されている
shadcn-vue
Vue.js向けのshadcn/uiのポート
shadcn-svelte
Svelte向けのshadcn/uiのポート
solid-ui
Solid.js向けのshadcn/uiのポート
spartan/ui
spartan/ui is our effort to port the incredible shadcn/ui project over to the Angular ecosystem.
Angular向けのshadcn/uiのポート
unocss-preset-shadcn
UnoCSS向けのプリセット
shadcn/uiだけでなくshadcn-vueなどの各種ポートもサポートしている模様
justd
Justd is a chill set of React components, built on top of React Aria Components and Tailwind CSS. Easy to customize and just copy & paste into your React projects.
独自のCLIを提供 ()
Magic UI
UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.
shadcn/uiのCLIを使ってコンポーネントを管理できる模様
Origin UI
Origin UI is an extensive collection of copy-and-paste components for quickly building app UIs. It includes hundreds of components and is constantly updated with new stuff.
21st.dev
npm for design engineers: largest marketplace of shadcn/ui-based React Tailwind components, blocks and hooks
shadcn/uiのCLIを使ってコンポーネントを管理できる模様
Tremor
Copy & Paste React components to build charts and dashboards. Built on top of Tailwind CSS and Radix UI.
cult/ui
Components crafted for Design Engineers. Styled using Tailwind CSS, fully compatible with Shadcn, and easy to integrate—just copy and paste. MIT 🤌
HyperUI
Free Tailwind CSS components for application UI, ecommerce and marketing with support for dark mode, RTL and Alpine JS 🚀
Page UI
Landing page components & templates that you can copy 📋 & paste 🍝
Intent UI
Intent UI is a chill set of React components, built on top of React Aria Components and Tailwind CSS. Easy to customize and just copy & paste into your React projects.
独自のCLI (@intentui/cli) を提供
Basecoat
A collection of modern UI components built with Tailwind CSS that works with any web stack. Basecoat brings the magic of shadcn/ui to traditional web applications, no React required.
Untitled UI React
Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS and React Aria. Everything you need to design and develop modern, beautiful interfaces—fast. Just copy, paste, and build.
ReUI
Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui.
Radix UIやMotion, Base UIなどに依存
shadcn/uiのCLIを使用してコンポーネントを追加できる
React Bits
An open source collection of animated, interactive & fully customizable React components for building memorable websites.
shadcn/uiのCLIやjsrepoを使用してコンポーネントを追加できる
関連ツール
jsrepo
jsrepo is a CLI that takes inspiration from the way that shadcn/ui allows you install portable blocks of code.