SiteFooter

The bottom of every marketing page: brand column, link columns, legal line.

<SiteFooter.Root>
	<SiteFooter.Columns>
		<SiteFooter.Brand>
			<BrandLogo />
			<SiteFooter.BrandDescription>Clients and freelancers…</SiteFooter.BrandDescription>
			<SiteFooter.SocialLinks>
				<SiteFooter.SocialLink href="#" aria-label="LinkedIn">
					<LinkedinLogoIcon />
				</SiteFooter.SocialLink>
			</SiteFooter.SocialLinks>
		</SiteFooter.Brand>
		<SiteFooter.Column>
			<SiteFooter.ColumnTitle>Legal</SiteFooter.ColumnTitle>
			<SiteFooter.ColumnList>
				<SiteFooter.ColumnLink href="/terms">Terms</SiteFooter.ColumnLink>
			</SiteFooter.ColumnList>
		</SiteFooter.Column>
	</SiteFooter.Columns>
	<SiteFooter.Bottom>
		<SiteFooter.BottomText>© 2026 acme.dev</SiteFooter.BottomText>
	</SiteFooter.Bottom>
</SiteFooter.Root>

API

SiteFooter.Root

Plus every <footer> prop. Source: landing/components/site-footer/root.tsx.

SiteFooter.Bottom

Plus every <div> prop. Source: landing/components/site-footer/bottom.tsx.

SiteFooter.BottomText

Plus every <p> prop. Source: landing/components/site-footer/bottom-text.tsx.

SiteFooter.Brand

Plus every <div> prop. Source: landing/components/site-footer/brand.tsx.

SiteFooter.BrandDescription

Plus every <p> prop. Source: landing/components/site-footer/brand-description.tsx.

SiteFooter.Column

Plus every <div> prop. Source: landing/components/site-footer/column.tsx.

PropTypeDefault
renderComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>>Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.

Plus every <a> prop. Source: landing/components/site-footer/column-link.tsx.

SiteFooter.ColumnList

PropTypeDefault
renderComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>>Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.

Plus every <ul> prop. Source: landing/components/site-footer/column-list.tsx.

SiteFooter.ColumnTitle

PropTypeDefault
renderComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>>Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.

Plus every <h3> prop. Source: landing/components/site-footer/column-title.tsx.

SiteFooter.Columns

Plus every <div> prop. Source: landing/components/site-footer/columns.tsx.

PropTypeDefault
aria-labelstringrequiredDefines a string value that labels the current element.
renderComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>>Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render.

Plus every <a> prop. Source: landing/components/site-footer/social-link.tsx.

Plus every <div> prop. Source: landing/components/site-footer/social-links.tsx.