naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🐺

shadcn/uiをNext.jsで使う

公開日
1年以上前
2024-06-16
更新履歴
GitHubで見る
  • React
  • UI
  • Next.js

概要

The Foundation for your Design System - shadcn/ui
A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.
shadcn.com favicon
shadcn.com
The Foundation for your Design System - shadcn/ui

この記事では、カスタマイズ性の高いUIコンポーネントであるshadcn/uiの使い方やカスタマイズの方法を紹介しています。

Sheetコンポーネントの横幅を変更する

pnpx shadcn-ui@latest add sheet で作成された以下のコードから sm:max-w-sm を取り除きます。

components/ui/sheet.tsx
// ...
variants: {
    side: {
    top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
    bottom:
        'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
    left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm', 
    left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left', 
    right:
        'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm', 
        'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right', 
    },
// ...
},

<SheetContent> に横幅を指定します。

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent className='w-full sm:w-2/5'>
    <p>Content</p>
  </SheetContent>
</Sheet>

目次

最近更新された記事

🚆
VS Codeでよく使うショートカット
約4時間前 - 2025年10月17日
  • VS Code
📈
Next.jsでBundle Analyzerを使う
約6時間前 - 2025年10月16日
  • Next.js
🛌
番号が固定幅で右寄せされ、横に項目名が並ぶリストをGridで作る
2日前 - 2025年10月15日
  • Tailwind
  • CSS