3249115299+1.2k
⌘K⌘L⇧⌘Pesc
インストール
このカウンターコンポーネントは CLI または手動で追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add counter共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
色: 色
neutral (デフォルト) は軽い表面に坐ります; primary プライマリボタンや選択された nav 項目のような青い勾配の表面のために調整されます。
<Counter color="neutral">91</Counter> {/* neutral pill (default) */}<Counter color="primary">152</Counter> {/* for primary/gradient surfaces */}クブッド
ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ザ・ クブッド ショートカットヒントはカウンターと同じ形です。別のレジストリ項目なので、次のコマンドで追加します npx boardui add kbd.
import { Kbd } from "@/components/base/kbd/kbd";
<Kbd>⌘L</Kbd><Kbd>⌘K</Kbd><Kbd>esc</Kbd>Badge から名称変更
Counter は以前 Badge という名前でした。npx boardui add badge は引き続き使えます。Counter と、それを Badge として再エクスポートする小さな badge.tsx をインストールするので、既存の import はそのまま動きます。
// Projects that installed it as Badge keep working: badge.tsx re-exports Counterimport { Badge } from "@/components/base/badges/badge";
// New codeimport { Counter } from "@/components/base/badges/counter";