フッターFooterExperimental

ブランド、リンクグループ、著作権表記をページ下部にまとめて表示します。

プレビュー

状態とバリエーション

少ないリンク

リンク群が少ない場合は列数を減らし、ブランドと補助リンクを近くにまとめます。

法務リンクとSNS

運営会社、プライバシーポリシー、利用規約などの必須リンクと、SNS へのアイコンリンクをフッター末尾にまとめます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
Footerfooter-ページ下部の情報群をまとめるルート要素。
FooterColumnsdiv-ブランドやリンクグループをレスポンシブな列で並べます。
FooterSection.titleReactNode-リンクグループの見出し。
FooterLinka-フッター内で使う控えめなリンク。

使い方

import { Footer, FooterBrand, FooterColumns, FooterCopyright, FooterLink, FooterSection } from "@gunjo/ui"

export function SiteFooter() {
  return (
    <Footer>
      <FooterColumns>
        <FooterBrand>
          <p className="text-base font-semibold">Gunjo UI</p>
          <p className="text-xs text-muted-foreground">
            プロダクト UI のためのデザインシステム
          </p>
        </FooterBrand>
        <FooterSection title="プロダクト">
          <FooterLink href="/docs/components">コンポーネント</FooterLink>
          <FooterLink href="/patterns">テンプレート</FooterLink>
        </FooterSection>
        <FooterSection title="リソース">
          <FooterLink href="/docs">ドキュメント</FooterLink>
          <FooterLink href="https://github.com/uixhero/gunjo">GitHub</FooterLink>
        </FooterSection>
        <FooterSection title="会社情報">
          <FooterLink href="/about">会社概要</FooterLink>
          <FooterLink href="/contact">お問い合わせ</FooterLink>
        </FooterSection>
      </FooterColumns>
      <FooterCopyright>© 2026 Gunjo UI. All rights reserved.</FooterCopyright>
    </Footer>
  )
}

使用コンポーネント

FooterTooltip

関連コンポーネント

HeaderTextLink