タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめにこんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、最近よく耳にする「shadcn/ui」について調べてみました。どうやらUIコンポーネントっぽいことは分かるけど、一体何を指すんだろう？いわゆる「UIライブラリ」との違いって何？といった疑問をデザイナー目線でお話しします。 どうぞ最後までお楽しみください🐰 「shadcn/ui」って最近よく聞きますよね「shadcn/ui」という単語、最近よく耳にしませんか？たとえば、最近話題になった10Xさんの記事。 なんだかよく分からないけど、UIコンポーネントの話をしているらしい。shadcn/uiはコンポーネントの集まりらしい。それを使うと、スピーディーなプロダクト開発ができるらしい…。 なんとなくは分かる気がするけれど、shadcn/uiって一体何なのでしょうか？UIコンポーネント集に見えるけど、既存のいわゆる「UIラ
npx shadcn create The Foundation for your Design SystemA set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.
Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。 v0 by Vercel Labs Generate UI with simple text prompts. Copy, paste, ship. Explore the prompt library and join the waitlist today.https://t.co/yaDdOfnOaJ — Vercel (@vercel) September 14, 2023 v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。 下記は「A dashboard for saas app」（SaaSのダッシュボードを作って）というプロンプトで生
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
この記事はニーリーアドベントカレンダー2024の10日目の記事です。 はじめまして、Nealleのデザイナー音部です。 profile.unotovive.io アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。 shadcn/uiとはそもそも何なのか? ui.shadcn.com shadcn/uiは、2023年のJavaScript rising starで総合1位に輝いたReactエコシステム(?)です。 2位は2022年王者のBunでしたが、10k以上の差をつけて1位に輝いていて、アツいといっても過言ではなさそうです。 最初はMaterial UIやChakuraなどと同じようなUIライブラリかと思っていましたが、どうやら「コピペで使えるUIコンポーネン
shadcn/uiとは shadcn/uiはRadix UIが提供するスタイルを持たないHeadless UIコンポーネント群(Radix Primitives)をベースに、Tailwind CSSを用いてデザインされた「コンポーネントのテンプレート集」である。 公式サイトには次のように記されている。 This is not a component library. It is how you build your component library. (これはコンポーネントライブラリではない。あなた自身がコンポーネントライブラリを構築するための方法である) shadcn/ui は、npm パッケージとして完成された UI コンポーネントを提供するのではなく、コードそのものをプロジェクトに取り込み、所有するという前提に立っている点が特徴的だ。 このアプローチが具体的にどのような意味を持つの
こんにちは、10X プロダクトデザイナーの日比谷（@suuminbot）です。 現在10Xでは新規プロダクトを複数開発している真っ只中ですが、私もその一環でshadcn/uiとTailwind CSSを活用しつつ、SaaSのサービス画面（管理画面）用のコンポーネントライブラリをゼロから構築していました。 少し前に一通り最低限必要なコンポーネントをFigma・実装ともに作りきり、現在は実際にそのコンポーネントライブラリを使って自分自身が複数のプロダクトのUIを作ったり、開発が進んでいる様子を見ているところです。 このブログでは、今回取り組んだことや学びをご紹介していこうと思います。 新規構築の経緯 外部コンポーネントライブラリのあるある課題 自分たちのプロダクトに合った形のコンポーネントライブラリを、クイックに立ち上げたい 「クイックな立ち上げ」と「こだわり」を両立できるshadcn/ui
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみてください。 動画で解説 この記事よりももっと細かいところまで知りたい方は動画教材もあります。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください！ 対象者 Reactを初めてやる HTMLの経験がある JavaScriptをもっと学びたい TypeScirptを学んでみたい 今回のハンズオンはReactの基本が学べるので、Reactを全くやったことがない人におすすめです。 1. Reactの環境構築 Rea
この記事では、shadcn/ui の Registry 機能を活用して、企業の自家製の UI ライブラリやデザインシステムを構築・配布する方法を解説します。 はじめに UI コンポーネントライブラリを作成・配布する方法として、npm パッケージとして公開するのが一般的です。shadcn/ui が提唱する Registry 方式 は、それとは異なるアプローチを提供します。どちらが優れているというわけではなく、ユースケースに応じて使い分けるのが理想です。 shadcn/ui では npx shadcn add button のように CLI でコンポーネントを取得できますが、Registry を使えばこの仕組みを自分のコンポーネントライブラリでも実現できます。つまり、npx shadcn add @your-registry/component-name で自作コンポーネントを配布・取得できる
※shadcnさんの経歴などの話はしないです。 shadcn/uiは従来のUIライブラリとは一線を画した設計思想で構築されています。Radix UIのアクセシブルなプリミティブとTailwind CSSのユーティリティを活用した再利用可能なUIコンポーネント群です しかしこれは単なるパッケージ化された「コンポーネントライブラリ」ではなく、プロジェクトにコードをコピーして組み込む形式を採っています。おっと、コンポーネントライブラリとかRadix UIとかなんぞやと思った方、解説もあるのでちょっと待ってください。 ※Tailwind CSSの解説は省きます。 本記事では、shadcn背後にある設計哲学に焦点を当て、Buttonなど基本コンポーネントの内部構造や、CVA（Class Variance Authority）によるクラス管理、Tailwind CSSとの統合方法、Radix UIとの
Reactでは様々なスタイリングの手法があり、その上に構築されるコンポーネント実装も多くの選択肢があります。 styled-componentsやemotionといった CSS in JSライブラリによるスタイリングや、それらのライブラリ上に構築されたMUIやChakra UIといったコンポーネントライブラリ。一方でTailwind CSSやCSS ModulesなどCSS寄りなスタイリング手法があります。 私自身としてはTailwindを利用し、コンポーネントに関しては自作することが多いです。Tailwind CSSをベースにしたコンポーネントライブラリはいくつかありますが、自分の肌に合うものはありませんでした。 しかし、最近ちょうどいい選択肢と思われるshadcn/uiというものを見つけました。 一言でいうと、カスタマイズ性が高く、使いやすいUIコンポーネント集です。 本記事では、sh
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
テーブルの実装には、react-data-table-componentや、MUIのDataGrid、MantineUIのMantineDataTableなどが用いられてきました。 今回はテーブルのHeadressUIライブラリであるTanstackTableと、RadixUIとTailwindCSSで実装したコンポーネント群であるshadcn/uiを使って、簡単なテーブルを作ります。 shadcn/uiについて Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. あなたのアプリにコピー＆ペーストできる、美しくデザインされたコンポーネント。アクセスしやすい。カスタマイズ可能。オープンソース。（機械翻訳） shadc
はじめに 本記事の位置づけ 今回ご紹介する方法は、吉川聡史さんの記事の基本フローを踏襲しています。 吉川さんの記事では Claude を使ってデザインをHTML化し、プラグインでFigmaに戻すフローが紹介されています。 本記事も基本の流れは同じですが、AIツールを Cursor に置き換えて実装しています。 経緯・背景 私はエンジニアですが、UIデザインにも興味があり、新規プロジェクトのMVPデザインを担当することになりました。最初は、自分が想定している画面に合うUI kitを参考にしながらFigmaで作っていました。けれど、プロジェクトはスピード感を持って進める必要がある一方で、UIデザイン初心者の私にとっては効率が悪く、時間がかかっていました。 そこで選んだのが shadcn/ui Figma kit です。 よく使うコンポーネントが一通り揃っている デザインの統一感が保てる 実装コ
はじめに 本ガイドでは、v0で生成されたコンポーネントをshadcn CLIを使用してNext.jsプロジェクトに統合する方法を、実際のコマンドライン操作に基づいて説明します。この方法を使用することで、AIの力を活用した効率的な開発ワークフローを構築できます。 デモ動画 「v0 + shadcn/ui CLI」を使ってエヴァンゲリオン NERV の戦闘情報センター (CIC)のダッシュボードをローカルで起動してみた！！ 右往左往も含めて4分以内でできました！ ＊動画は早回し＋カットしてます https://t.co/nzU4ADkmhR pic.twitter.com/k3hLy4OHVz — Maki@Sunwood AI Labs. (@hAru_mAki_ch) September 1, 2024 v0とは v0は、Vercelが開発した革新的なAI駆動のUIコンポーネント生成プラッ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは、Squadbaseでフロントエンド開発をしている三橋です。 みなさん、shadcn/ui使ってますか？😀 shadcn/uiは美しくシンプルなコンポーネント集であるだけでなく、「オープンコード」というコンセプトを提唱しています。これは、バンドルされたコンポーネント集をnpmを通じて配布するのではなく、ユーザーのコードベースにコードをコピーするというアプローチです。これにより、ユーザーは完成されたデフォルトを使うだけでなく、自身の用途に合わせたカスタマイズをすることができます。また、このオープンコードのコンセプトに沿ってコンポーネントを配布するためにCLIも提供しています。 本記事では、shadcn/uiと同様にオープンコードの特徴を持つコンポーネント集を紹介します。 Tremor ✅ ユースケース: ダッシュボードや社内アプリ Tremorは、ダッシュボード構築のためのコンポ
本文書はshadcn/uiの初心者向けガイドで初めてshadcn/uiを利用したい人向けの入門的な内容になっています。shadcn/uiの特徴は一般的なUIライブラリのように再利用可能なコンポーネントを一括でインストールして利用していくのではなく利用したいコンポーネントのみ個別にインストールすることができます。さらにインストールしたコンポーネントは各自の環境に合わせてカスタマイズすることを前提にしているためコンポーネントのインストールしなくてもコードをコピー&ペーストすることで手軽に導入できるため、プロジェクトの自由度が高まります。 インストールして利用できるコンポーネントの中から Button, DropDownMenu, Form, Table の 4 つのコンポーネントに注目して shadcn/ui の使い方を確認しています。Next.jsの環境で動作確認を行っていますがReact用
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
訳者序文 以下の文章は、shadcn/ui の内部構造について解説している The anatomy of shadcn/ui を、原著者である @manupadev 氏の許可のもとに日本語へと翻訳したものです。 shadcn/ui のモチベーションや使い方に関する日本語の解説は少なくありませんが、その実装に焦点を絞って解説した文章は、訳者が知る範囲では存在しませんでした。shadcn/ui は単にコンポーネントライブラリとして優れているだけでなく、同時にコンポーネントの実装パターン集としても学ぶところが多く、そのエッセンスを知ることは多くの開発者にヒントを与えるだろうと訳者は考えていました。そうした折に、まさにドンピシャの内容の記事を発見したため、ここに翻訳して公表することとしました。shadcn/ui をなんとなく使っている状態を脱して一歩深く理解するきっかけが欲しい方や、モダンなコンポ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Design Your Perfect shadcn/ui ThemeCustomize colors, typography, and layouts with a real-time preview. No signup required.
はじめに こんにちは、D2Cのフロントエンドエンジニアをやっている廣瀬です。 私が担当しているプロジェクトでは、Vite・React・MUIを主に使用しています。 最近、フロントエンド系の技術を調査してみたところ、shadcn/uiというものを見つけました。 今回、このshadcn/uiをViteで試してみましたので、その内容を記事にしたいと思います。 今回の記事では簡単なWebページを作ってみたいと思います。 shadcn/uiとは？ Radix UIとTailwind CSSをベースに開発された、比較的低レイヤーなUIコンポーネントの集まりです。 ここで注意なのが、shadcn/uiはMUIやChakraUIのようなUIライブラリではなく、npmパッケージとしては提供されていません。ですので、依存関係としてインストールすることはできません。 環境の準備 実際に、以下のような手順でsha
デモサイト ソースコード はじめに Shadcn Admin Dashboard は、ShadcnUI と React Router v7 を使用して構築した、再利用可能な管理ダッシュボード UI のコレクションです。レスポンシブデザインとアクセシビリティに配慮して設計されています。 このプロジェクトは、satnaing 氏 による shadcn-admin をフォークした上で、React Router v7 で動くように書き換えたものです。オリジナルの作者に感謝いたします。 特徴 ライト/ダークモードの切り替え レスポンシブ対応 アクセシビリティ対応 再利用可能なサイドバーコンポーネント グローバル検索コマンド 10 以上のページ 追加のカスタムコンポーネント 技術スタック UI: ShadcnUI (TailwindCSS + RadixUI) ビルドツール: Vite ルーティング:
PeopleX社でフロントエンドエンジニアをしている芹澤（せりざわ）です！社内では「せりせり」や「せりちゃん」と呼ばれています。みんなとランチに行くのが趣味です！ 私がフロントエンド開発を担当している 「PeopleX AI面接」 というプロダクトでは、shadcn/ui をベースにしたデザインシステムを構築しています。今回この記事では、なぜshadcn/ui を採用しているかに加え、それをどのようにカスタマイズしながら運用しているかを、実践例を交えながらご紹介できればと思います。 そもそも shadcn/ui とは？ shadcn/ui は、Radix UI のプリミティブに Tailwind CSS を組み合わせて構築された React コンポーネントライブラリです。 最大の特徴は、npm パッケージとしてではなく CLI 経由でコードを直接プロジェクトに取り込むスタイルである点です。
概要 Web アプリやサービスを開発する際、UI 構築はどのように行っていますでしょうか？ 私自身は普段から React.js や Next.js を使用しており、UI 構築は Tailwind CSS を利用したり MUI を利用して簡単に作成してしまうことが結構多いです。 ja.reactjs.org nextjs.org tailwindcss.com mui.com そんな自分ですが、いつもと同じようなフレームワークだったりデザインを利用しているとどのサービスも同じような感じになってしまうのが欠点ですよね。 いつもと同じようなサービスやアプリにならないよう、新しいフレームワークだったりデザインセットがないか GitHub 上で探していたところ、良さそうなデザインセットを見つけることができましたので、今回はこちらについてご紹介したいと思います。 今回ご紹介する OSS は、Radix
Beautifully designed components built with Radix UI and Tailwind CSS. Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready. ---------- This Figma file is the design companion to @shadcn's incredible new UI system. https://ui....
Design & ship shadcn/ui projects fasterExtensive collection of Figma and React resources to help designers, developers, and teams deliver shadcn/ui projects efficiently.
シェア率 MUIが圧倒的でした。 shadcn/uiはnpm経由で利用することはないので、ダウンロード数は不明でした。 サポート＆ドキュメント数 今のところ、コミュニティや開発者からのサポート面はどのライブラリも問題なさそうです。 MUI github Chakra UI github shadcn/ui github daisy UI ドキュメントはMUI、Chakra UIが豊富でした。 shadcn/uiはトレンドなので、これからどんどん増えていきそうです。 対してdaisy UIは少ないので公式ドキュメントを熟読する必要がありそうです。 MUI MUIは最も人気なUIライブラリです。 コンポーネントはemotionでスタイルを構築されていますが、styled-componentsのスタイルエンジンに切り替えることもできます。 良い点 Google's Material Design
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近流行りのshadcn/uiに触れてみたのでその所感をまとめました。 ユースケース シンプルなデザインコンポーネントを使いたい（+少しだけ手を加えたい） プロジェクト内でコンポーネントコードを管理したい（NOTライブラリ） フロントエンドの実装にあまり時間使いたくない 検証環境 Next.js v14 Node.js v18 shadcn/ui とは？ 簡単に言えば、カスタマイズ性に優れたUIコンポーネントの集まりです。 「シャドシーエヌ・ユーアイ」と呼びます。 現在Vercelに所属するエンジニアによって開発されてるそうです。 従来
80+ blocks available for free! 🚀Beautiful & Production-Ready shadcn/ui Blocks & ComponentsExplore a collection of shadcn/ui blocks and components, ready to preview and copy. Streamline your development workflow with easy-to-implement examples.
UIをどうつくっていくか？ リンクアンドモチベーションでエンジニアをしています、宮田と申します。 自分はプロダクトのWebのUIを開発する時によくこんなことを考えていました。 「一からUIコンポーネントを開発する余裕はないなぁ」 「けどmuiのようなUIライブラリをそのまま使いたくない。ユースケースによってはUIに独自性を持たせたいなぁ」 最近だと「Tailwind CSSを使いたいなぁ」という考えも加わりました。 企業によっては強力なUIライブラリを社内で公開していて、それを使うことができるケースもあります。 ないケースや個人開発時は、毎回色々試行錯誤をしていたのですが、最近自分の中での最適解を見つけられた気がしたので紹介します。 自分の試行錯誤の変遷 ※ 本記事ではReactを使う前提で書いています。 ※ 1つのプロジェクトのみで試行錯誤しているのではなくて複数のプロジェクトで試行錯誤
Introducing shadcn/ui on Rails! Introducing shadcn/ui on Rails! Build your component library. Beautifully designed components based on shadcn/ui that you can copy and paste into your apps. Accessible. Customizable. Open Source.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success. Please come prepared with any questions or insights you may have. Looking forward to
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く