Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Developer Hub Footer Block for React

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 Base 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.

  • Pro

    Documentation Footer

    Sitemaps and trails

    A documentation footer for a router library's docs: previous and next page cells, an Edit this page link with a pencil, four link groups and a legal band.

  • Pro

    Open Source Footer

    Social proof

    An open-source footer for a state-management library: link groups, then a project band with a star-count button, a licence badge, contributor avatars and a Good first issues link.

  • Pro

    Build Info Footer

    Trust and compliance

    A footer for a docs host with a data list of the running build (version, hash, environment, region, deploy time) and a button that copies it for a bug report.

  • Pro

    Brand Split Footer

    Brand-led

    A brand-first split footer for a design tool: a display wordmark, a tagline and the Shine Button on one half, three link columns and the legal row on the other.

  • Pro

    Sitemap Filter Footer

    Sitemaps and trails

    A sitemap footer for a documentation host: a search field that filters 36 links across six columns as you type, with a live count and a clear button.

  • Pro

    Left Right Install Snippet CTA

    Code and commands

    A split call to action between solid rails that shows the install as a diff: a headline, a sentence and two actions at the start, and at the end a tinted half with a package.json window where a placeholder dependency is struck out and the real one added.

All 100 footer blocks