Block と Para のスタイルデモ
Block コンポーネントの appearance と Para コンポーネントの tone を一覧で比較できます。
Block appearance 一覧
各 appearance の見た目と付与されるユーティリティクラスを確認できます。
surfacebg-white/80 text-slate-900 shadow-none ring-1 ring-slate-200/60 dark:bg-slate-900 dark:text-slate-100 dark:ring-slate-700/60Block に appearance として surface を設定したサンプルです。余白や影、背景色などの スタイルが一目で確認できます。
raisedbg-white text-slate-900 shadow-[0_20px_60px_-15px_rgba(30,64,175,0.3)] ring-1 ring-blue-500/10 dark:bg-slate-900 dark:text-slate-100 dark:ring-blue-300/10 dark:shadow-[0_20px_60px_-15px_rgba(96,165,250,0.45)]Block に appearance として raised を設定したサンプルです。余白や影、背景色などの スタイルが一目で確認できます。
outlinedbg-white/30 text-slate-900 ring-1 ring-slate-300 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:bg-slate-900/80 dark:text-slate-100 dark:ring-slate-700 dark:shadow-[0_1px_2px_rgba(15,23,42,0.65)]Block に appearance として outlined を設定したサンプルです。余白や影、背景色などの スタイルが一目で確認できます。
frostedbg-slate-100/75 text-slate-900 backdrop-blur-2xl ring-1 ring-white/60 shadow-[0_25px_55px_-20px_rgba(150,180,233,0.35)] dark:bg-slate-800/40 dark:text-slate-100 dark:ring-cyan-200/10 dark:shadow-[0_25px_55px_-20px_rgba(14,165,233,0.5)]Block に appearance として frosted を設定したサンプルです。余白や影、背景色などの スタイルが一目で確認できます。
softbg-gradient-to-br from-slate-50 via-white to-slate-100 text-slate-900 ring-1 ring-slate-200/70 shadow-[0_12px_35px_-20px_rgba(15,23,42,0.35)] dark:from-slate-900 dark:via-slate-900/70 dark:to-slate-900/40 dark:text-slate-100 dark:ring-slate-700/70 dark:shadow-[0_12px_35px_-18px_rgba(15,23,42,0.55)]Block に appearance として soft を設定したサンプルです。余白や影、背景色などの スタイルが一目で確認できます。
radiantbg-gradient-to-r from-cyan-50 via-white to-emerald-50 text-slate-900 ring-1 ring-cyan-500/25 shadow-[0_25px_50px_-20px_rgba(14,165,233,0.4)] dark:from-slate-900 dark:via-slate-900/60 dark:to-slate-900/30 dark:text-slate-100 dark:ring-cyan-400/30 dark:shadow-[0_25px_50px_-20px_rgba(14,165,233,0.55)]Block に appearance として radiant を設定したサンプルです。余白や影、背景色などの スタイルが一目で確認できます。
Para tone 一覧
tone ごとの文字色とスタイルを見比べられるように、それぞれの tone 名と適用されるクラスを表示しています。
defaulttext-foregroundこのテキストは tone プロップに default を渡した Para コンポーネントです。
mutedtext-muted-foregroundこのテキストは tone プロップに muted を渡した Para コンポーネントです。
accenttext-accent-foregroundこのテキストは tone プロップに accent を渡した Para コンポーネントです。
primarytext-primaryこのテキストは tone プロップに primary を渡した Para コンポーネントです。
secondarytext-secondary-foregroundこのテキストは tone プロップに secondary を渡した Para コンポーネントです。
destructivetext-destructiveこのテキストは tone プロップに destructive を渡した Para コンポーネントです。
noticetext-Yellow-400このテキストは tone プロップに notice を渡した Para コンポーネントです。
warningtext-amber-600このテキストは tone プロップに warning を渡した Para コンポーネントです。
errortext-red-600このテキストは tone プロップに error を渡した Para コンポーネントです。
dangertext-red-800このテキストは tone プロップに danger を渡した Para コンポーネントです。
successtext-emerald-600このテキストは tone プロップに success を渡した Para コンポーネントです。
infotext-sky-600このテキストは tone プロップに info を渡した Para コンポーネントです。
cautiontext-orange-500このテキストは tone プロップに caution を渡した Para コンポーネントです。