Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Developer Hub Footer Block for Ark UI

A developer-hub footer for a secrets manager: SDK tabs (TypeScript, Python, Go) with an install command, a copy button and the version, beside three link groups.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A developer-hub footer for React with Ark UI. An even split behind a divider that runs from the page's top rule to the end of the page. The start half is the wordmark, one sentence and the SDK tabs: TypeScript, Python and Go, each showing its install command in a well that follows your theme, with a copy button, the SDK's version and what it needs. The end half holds three link groups (Resources, Community, Company) in the nav labelled Footer and, at its foot, the copyright and the policies under a rule. It's built from Tabs, Copy Button, Guides and your theme's tokens.

FAQ

How do the SDK tabs work?

They are a standard tab list: one tab per SDK, and the arrow keys move between them. Only the open tab's panel is shown. Every panel is also kept unseen in the same grid cell (hidden from assistive technology and the keyboard), so the well keeps the height of the tallest panel and the footer never jumps when you switch.

What does the copy button copy?

The install command of the open tab, and nothing else. The icon turns into a check for three seconds, and a polite status says "Copied" to screen readers; if the browser refuses the clipboard (a page not served over HTTPS), it shows a cross and says "Couldn't copy".

How do I add or change an SDK?

Edit the SDKS array at the top of the file: each entry has an id, a label, the command, needs (the minimum runtime) and the version. The package names and versions in the block are made up: replace them with yours.

Why isn't the code well dark?

The block follows your theme, so the well is a tinted panel with a ring in a light theme and a dark one in a dark theme. Nothing sets a dark scope on it.

How does it fit on a phone?

The start half comes first, a rule separates it from the groups (two by two on the smallest screens, three in a row from sm), and the legal row stacks. A long command wraps inside the well rather than scrolling sideways.

All 100 footer blocks