Caroa UI

z-indexトークン

Caroa UIのz-index階層システム

概要

Caroa UIは統一されたz-index階層システムを提供しています。すべてのz-indexはCSS変数（--caroa-z-*）として定義されており、Tailwind CSSクラス（z-modal、z-dropdownなど）から利用できます。

Note: z-indexトークンはTailwind CSS v4の@theme機能を使用しています。v4以上が必須です。

z-indexトークン一覧

Loading...

階層の視覚化

z-max (9999)     ─── 緊急用
z-tooltip (100)  ─── Tooltip
z-toast (90)     ─── Toast通知
z-modal (80)     ─── Dialog
z-drawer (70)    ─── Sheet
z-overlay (60)   ─── 背景オーバーレイ
z-popover (50)   ─── Popover
z-dropdown (40)  ─── DropdownMenu
z-nav (30)       ─── ナビゲーションバー
z-sticky (20)    ─── stickyヘッダー
z-float (10)     ─── FAB
z-base (0)       ─── 通常コンテンツ
z-hide (-1)      ─── 非表示

使い方

Tailwind CSSクラス

{/* stickyヘッダー */}
<header className="sticky top-0 z-sticky bg-background">
  ヘッダー
</header>
 
{/* ナビゲーションバー */}
<nav className="fixed top-0 w-full z-nav bg-background">
  ナビゲーション
</nav>
 
{/* フローティングアクションボタン */}
<button className="fixed bottom-4 right-4 z-float">
  +
</button>
 
{/* カスタムオーバーレイ */}
<div className="fixed inset-0 z-overlay bg-black/50" />
 
{/* カスタムモーダル */}
<div className="fixed z-modal ...">
  モーダルコンテンツ
</div>

CSS変数

.custom-modal {
  z-index: var(--caroa-z-modal);
}
 
.custom-header {
  z-index: var(--caroa-z-sticky);
}

間に挿入したい場合

10刻みで設計されているため、間の値が必要な場合は任意の数値を使用できます。

{/* z-dropdown(40)とz-popover(50)の間 */}
<div className="z-[45]">...</div>
 
{/* z-nav(30)とz-dropdown(40)の間 */}
<div className="z-[35]">...</div>

Caroa UIコンポーネントのz-index

各コンポーネントは適切なz-indexトークンを使用しています。

コンポーネントz-index
Dialog (overlay)z-overlay
Dialog (content)z-modal
AlertDialog (overlay)z-overlay
AlertDialog (content)z-modal
Sheet (overlay)z-overlay
Sheet (content)z-drawer
Popoverz-popover
HoverCardz-popover
DropdownMenuz-dropdown
Selectz-dropdown
Tooltipz-tooltip

セットアップ

Tailwind v4（CSS-first config）

Tailwind v4でCSS-first configを使用している場合、tokens-variables.cssをインポートするだけでz-nav等のユーティリティが自動で利用可能になります。

/* app/global.css */
@import "tailwindcss";
@import "@caroainc/ui-components/tokens-variables";

Tailwind v3（JS config）

Tailwind v3またはtailwind.config.tsを使用している場合、zIndexを手動で追加する必要があります。

// tailwind.config.ts
export default {
  theme: {
    extend: {
      zIndex: {
        hide: 'var(--caroa-z-hide)',
        base: 'var(--caroa-z-base)',
        float: 'var(--caroa-z-float)',
        sticky: 'var(--caroa-z-sticky)',
        nav: 'var(--caroa-z-nav)',
        dropdown: 'var(--caroa-z-dropdown)',
        popover: 'var(--caroa-z-popover)',
        overlay: 'var(--caroa-z-overlay)',
        drawer: 'var(--caroa-z-drawer)',
        modal: 'var(--caroa-z-modal)',
        toast: 'var(--caroa-z-toast)',
        tooltip: 'var(--caroa-z-tooltip)',
        max: 'var(--caroa-z-max)',
      },
    },
  },
}

カスタマイズ

プロジェクト固有のz-index階層が必要な場合は、CSS変数を上書きできます。

:root {
  /* Toastをさらに上に */
  --caroa-z-toast: 100;
 
  /* 独自のレイヤーを追加 */
  --my-z-banner: 15;
}
<div style={{ zIndex: 'var(--my-z-banner)' }}>
  バナー
</div>

Previous

アイコン

Next

Accordion

On this page