「Bubble.ioでもっと綺麗なUIを作りたい」「shadcnっぽいデザインをノーコードで再現したい!」そんな思いから、自分用も兼ねて shadcn/uiをインスパイアしたUI KITを制作しました。
現在は Bubble.io テンプレートマーケットプレイスで公開・販売しています。
コピペで使えるShadcn風コンポーネント
shadcnは、Tailwind CSSとRadix UIをベースにしたオープンソースのUIライブラリ。
「シンプル」「クリーン」「カスタマイズ性が高い」という特徴で、世界中のプロダクトで採用されています。
このテンプレートは、そのデザイン哲学と美しさをBubble.ioのノーコード環境で再現し、コピペでUI構築ができるよう整えたものです。
コーディング不要（※チャート等を細かくカスタマイズする場合のみJS使用）で、数分でプロフェッショナルなUIを構築できます。
私自身もBubble.ioでアプリケーションを作成するときは、このUIKITを利用して作成しています。
※正直、販売に至るまでかなりの時間をかけました…！
このテンプレートの説明
20種類以上のUIコンポーネントを収録
ボタン、カード、ダイアログ、ドロップダウン、フォーム、ナビバー、アコーディオン、ツールチップ、プログレスバーなど、
ミニマルで統一感のあるデザインを網羅。
すぐに使えるページテンプレート
- ログインページ
- サインアップページ
- パスワードリセットページ
- カスタム404ページ
- コンポーネントリストページ（※公開時は非表示推奨）
完全レスポンシブ設計
モバイル・タブレット・デスクトップすべてに対応。
Bubbleの新レスポンシブエンジンで最適化済みです。
ドラッグ＆ドロップで簡単操作
Bubbleエディタにコピペするだけで利用可能。
ワークフローやDBともすぐ接続でき、カラーやフォントもスタイル変数で簡単にカスタマイズできます。
カラーパレット完備
shadcn UIで使われるTailwindのカラーパレットを全て再現、Styleとして登録済み。
どんなプロジェクトにもフィット
- SaaSアプリ
- ダッシュボード
- ECサイト
- 管理画面
など、どんなタイプのアプリでもカスタムコーディング級の完成度を実現。
開発スピードとデザイン品質の両立が可能です。
なぜ作ったのか？
BubbleでゼロからUIを組み立てるのは、思っている以上に時間がかかります。
私自身、shadcn UIのモダンな美しさに惚れ込み、
「これをノーコードで再現できたら、多くの人がもっと簡単に“綺麗なアプリ”を作れるのでは？」と考えました。
そこから、Bubble上でshadcnスタイルのコンポーネントを一から構築。
フリーランサーやスタートアップ、エージェンシーの方が短時間でハイクオリティなUIを実装できるよう、このパックを公開しました。
ライセンスとクレジット
このテンプレートは、MITライセンスで公開されている Shadcn UI
にインスパイアされています。
ただし、公式製品ではなくBubble.io向けに独自構築したものです。
オリジナルデザインへのリスペクトを持ちながら、
ノーコード開発者が扱いやすい形に最適化しています。
もし「Bubbleでもshadcn風のデザインを使いたい！」と思っていた方がいたら、
ぜひ触ってみてください 👇
##プレビューはこちら