コンポーネント

コピーして所有する12個のコンポーネント。カードをクリックすると、インストールコマンド・Props・使用例・全ソースを確認できます。

フォーム

Button

Trigger an action. The only button in the library. Adjust looks by appending Tailwind classes via className.

Input

Single-line text input. Adjust looks by appending Tailwind classes via className.

Textarea

Multi-line text input. Adjust looks by appending Tailwind classes via className.

Checkbox

A checkbox. type is fixed to "checkbox"; for a switch-styled toggle, set role="switch" plus your own visual className — this is the intended replacement for a separate Switch component.

Accept termsEnable notifications

Select

Styled wrapper around the native <select>. Pass <option> children. No custom dropdown — mobile-native, keyboard-native, screen-reader-native.

Combobox

Controlled single-select combobox. Input filters options by substring on label; ArrowDown/Up highlight, Enter selects, Escape closes. No multi-select — use Downshift for that.

レイアウト

Dialog

Modal dialog on the native <dialog>. Control via ref.current.showModal() and ref.current.close(). The browser handles focus trap, Escape, backdrop click, and inert background.

Tabs

Stateless tabs: Tabs (tablist container), Tab (button), TabPanel (content). The caller owns the selected value. Arrow keys move focus and click the sibling; the caller's onClick updates state.

First panel.

コンポーネント

フォーム

Button

Input

Textarea

Checkbox

Select

Combobox

レイアウト

Dialog

Confirm

Tabs

オーバーレイ

Popover

Menu

Tooltip

Toast