A free, open-source
visual editor for shadcn
Onlookを使用すると、shadcn Webサイトを視覚的に編集し、変更をリアルタイムでコードに書き戻すことができます。
迅速な設計のための使い慣れたツール
あなたのshadcnアプリを、他のどんなデザインツールと同じように直感的に操作しよう。
Variables
Assets
Color Styles
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
teal-100
teal-200
teal-300
teal-400
Teal / 500
Teal / 600
Teal / 700
Teal / 800
Variables
Assets
Text Styles
title1
36/Auto
title2
24/Auto
title3
20/Auto
largePlus
18/140
large
18/140
regularPlus
15/140
regular
15/140
smallPlus
13/140
small
33/140
microPlus
11/Auto
micro
11/Auto
Coming Soon
自分だけのshadcnデザインシステムをカスタマイズしよう
Tailwindでスタイル設定されたReactウェブサイトを使用する
既存のプロジェクトをOnlookに持ち込むか、Onlookから新しいReactサイトを始めてみましょう。shadcnを使っていなくても、Onlookであなたのウェブサイトをスタイリングすることができます。
shadcnを使っていなくても、Tailwindを使っているアプリならスタイルを調整できます！
Import existing project
Work on your React UI
New Onlook Project
Start a React App
デザインするようにコードを書く
Onlookは、shadcnコンポーネントに必要な場所に直接Tailwindクラスを書き込みます。shadcnコードを視覚的に編集できます。
shadcnの要素を好きなようにスタイル設定しましょう
レイアウトの調整、色の変更、テキストの修正などが可能です。設定は不要です。
Layers
Side menu
Primary navigation
Opener
H2
Welcome to your Dashboard
Overview
Client Logo
Actions
Share
New project
Projects section
Controls
Filter
Sort
Project • 12 instances
よくある質問
さあ、変化の時間です。いや、2つでも3つでもいけるはず！
新しいアイデアやスタイル、コピー、レイアウトなどをどんどん試しましょう。
