概要
Web アプリやサービスを開発する際、UI 構築はどのように行っていますでしょうか？
私自身は普段から React.js や Next.js を使用しており、UI 構築は Tailwind CSS を利用したり MUI を利用して簡単に作成してしまうことが結構多いです。
そんな自分ですが、いつもと同じようなフレームワークだったりデザインを利用しているとどのサービスも同じような感じになってしまうのが欠点ですよね。
いつもと同じようなサービスやアプリにならないよう、新しいフレームワークだったりデザインセットがないか GitHub 上で探していたところ、良さそうなデザインセットを見つけることができましたので、今回はこちらについてご紹介したいと思います。
今回ご紹介する OSS は、Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネント「shadcn/ui」になります。
上図のように、とてもきれいな UI をこちらの OSS を利用すると実現することができるそうです。
それでは早速詳細について見ていきましょう。
目次
特徴
「shadcn/ui」の一番の特徴としては、コンポーネントライブラリではない点でしょうか。
TailwindCSS や MUI の場合は NPM など外部ライブラリを読み込んで利用するかと思いますが、「shadcn/ui」の場合はソースコードをコピーして直接アプリのほうへ張り付けるなどして利用するようにとドキュメントに記載があります。
そのため、あくまでもドキュメントにある UI デザインは参考例で、独自の UI を作成することができる！というのが売りのようです。
ちなみに、Radix UI（レイディックス）とは次世代の Headless UI コンポーネントということでした。
Headless というのはスタイルが適用されていないということで、UI を「見た目」と「振る舞い」に分けたとき、「見た目」が取り除かれているようなイメージということです。
Radix UI についての詳細は以下の記事のほうが詳しく記載されていますので、気になった方はこちらの記事を参考にしてみてください。
利用手順
利用方法としてはいくつかあるので、ご紹介します。
プロジェクトを新規作成する場合
以下コマンドを利用して「shadcn/ui」を導入します。
npx create-next-app -e https://github.com/shadcn/next-template
なお、上記のコマンドでプロジェクトを作成すると、以下機能を含むプロジェクトが作成されます。
- Next.js (v13)
- Tailwind CSS
- TypeScript
- ESLint
- Prettier
Next.js、TypeScript を利用される方にとってはこちらの方法でのインストール方法が良いかと思います。
create-next-app でプロジェクトを作成した場合
CLI より「shadcn/ui」をインストールすることができます。
npx create-next-app my-app
上記で作成していた場合、以下のコマンドより「shadcn/ui」をインストールします。
npx shadcn-ui init
手動で適宜インストールする場合
プロジェクトに以下の Node モジュールを依存関係のあるものをインストールします。
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
その後、@ エイリアスを tsconfig.json に設定します。
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./*"] } } }
Tailwind CSS に関連する tailwind.config.js ファイルを以下のように修正します。
const { fontFamily } = require("tailwindcss/defaultTheme")
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
続いて、styles/globals.css のほうに以下のようにスタイルを設定します。
@tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 100% 50%; --destructive-foreground: 210 40% 98%; --ring: 215 20.2% 65.1%; --radius: 0.5rem; } .dark { --background: 224 71% 4%; --foreground: 213 31% 91%; --muted: 223 47% 11%; --muted-foreground: 215.4 16.3% 56.9%; --popover: 224 71% 4%; --popover-foreground: 215 20.2% 65.1%; --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; --border: 216 34% 17%; --input: 216 34% 17%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 1.2%; --secondary: 222.2 47.4% 11.2%; --secondary-foreground: 210 40% 98%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; --ring: 216 34% 17%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } }
最後に、Tailwind CSS クラスを条件付きで簡単に追加できるよう、cn ヘルパーを設定します。
以下のように lib/utils.ts ファイルに設定を反映させます。
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
使用感
今回はデモ版が公開されていましたので、実際の使用感についてこちらのデモ版から確認したいと思います。
こちらのデモ版を確認するに、非常きれいな UI を構築することができるということがわかりますね。
また、公式ドキュメントのほうでも UI コンポーネントごとにソースコードが公開されていたり、実際のサンプルでもなども表示されていますので、「shadcn/ui」を使った UI 構築はとても簡単に実装できそうな印象です。
また、各 UI コンポーネント後にソースコードのインストール方法だったり簡単な例、メモなども記載されていますので、すぐにでも「shadcn/ui」を使用してアプリ開発・デザイン調整ができそうだなと思いました！
まとめ
今回は、Radix UI と Tailwind CSS を使用して構築された再利用可能なコンポーネント「shadcn/ui」についてご紹介しました。
Web サービス・アプリを開発しているがいつもと同じようなデザインになってしまうという方、何か新しいデザインフレームワークを使ってみたいといった方などに、今回紹介した OSS「shadcn/ui」は良い選択肢の 1 つかもしれません。
興味を少しでも持った方は、ぜひこちらの「shadcn/ui」を一度利用してみてはいかがでしょうか。
