Installation
npx sdaia-ui@latest add footer
Usage
import { Footer } from "@/components/ui/footer"<Footer type="large-1" />Examples
Large
Footer in the large layout with full navigation and content sections.
<Footer> <Footer.LinkColumns> <FooterLinkList label="Group Label" items={items} /> <FooterLinkList label="Group Label" items={items} /> <FooterLinkList label="Group Label" items={items} />Medium
Footer in the medium layout.
<Footer> <Footer.LinkColumns> {/* 3x <FooterLinkList label="Group Label" items={items} /> */} </Footer.LinkColumns> <Footer.BottomBarSmall
Compact footer in the small layout.
<Footer compact> <Footer.InlineBar logo={<NavLogoPlaceholder size="medium" />} links={[{ label: 'Footer Link', href: '#' } /* ... */]} extraLinks={[API Reference
FooterProps
Props for the Footer component.
Prop | Type | Default | Required |
|---|---|---|---|
dir | 'ltr' | 'rtl' | - | optional |
rtl | boolean | false (deprecated) | optional |
compact | boolean | false | optional |
children | ReactNode | - | optional |
FooterLinkColumnsProps
Props for the Footer component.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
FooterNewsletterProps
Props for the Footer component.
Prop | Type | Default | Required |
|---|---|---|---|
heading | ReactNode | - | optional |
description | ReactNode | - | optional |
inputPlaceholder | string | 'name@example.com' | optional |
submitLabel | ReactNode | 'Subscribe' | optional |
inputLabel | string | 'Email address' | optional |
inputName | string | 'email' | optional |
onSubmit | (value: string, event: React.FormEvent<HTMLFormElement>) => void | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
FooterAppStoresProps
Props for the Footer component.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
FooterSocialLinksProps
Props for the Footer component.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
FooterBottomBarProps
Props for the Footer component.
Prop | Type | Default | Required |
|---|---|---|---|
logo | ReactNode | - | optional |
copyright | ReactNode | - | optional |
extraLinks | FooterBottomBarExtraLink[] | - | optional |
divider | boolean | true | optional |
dir | 'ltr' | 'rtl' | - | optional |
FooterInlineBarProps
Props for the Footer component.
Prop | Type | Default | Required |
|---|---|---|---|
logo | ReactNode | - | optional |
links | FooterBottomBarExtraLink[] | - | optional |
extraLinks | FooterBottomBarExtraLink[] | - | optional |
copyright | ReactNode | - | optional |
dir | 'ltr' | 'rtl' | - | optional |