共有UIコンポーネントの基本

@docs/ui から提供されるコンポーネントはMDXでそのまま使えます。よく使うものだけ最短で紹介します。

Alert と Icon

import { Alert, Icon } from '@docs/ui';

<Alert type="info">
  <Icon name="info" /> 情報メッセージ
</Alert>

例:

Button と Card

import { Button, Card } from '@docs/ui';

<div style={{ display: 'flex', gap: '1rem' }}>
  <Button href="/v1/ja/01-guide/01-getting-started">はじめに</Button>
  <Button variant="outline" href="/v1/ja/01-guide/06-icons">アイコン</Button>
</div>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1rem', marginTop: '1rem' }}>
  <Card title="MDXの基本" href="/v1/ja/01-guide/04-writing-mdx">
    frontmatter と最小の使い方
  </Card>
  <Card title="サイドバー自動生成" href="/v1/ja/01-guide/07-sidebar-generation">
    番号で並び順を管理
  </Card>
</div>

例:

Tabs と TabItem（同期キー付き）

import { Tabs, TabItem } from '@docs/ui';

<Tabs syncKey="lang-example">
  <TabItem label="JavaScript">
    JS向けの説明やサンプルコード
  </TabItem>
  <TabItem label="TypeScript">
    TS向けの説明やサンプルコード
  </TabItem>
</Tabs>

例:

詳細なAPIはリファレンスの「コンポーネント一覧」を参照してください。

次は「アイコンの使い方」へ。