Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Brand kit tabs About Block for React

A brand kit for a brand-kit product: tabs for the mark, the theme's own colour tokens with a copy button, a type specimen, and do and don't pairs.

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 brand kit for React with Base UI, written for Brandcrate, a fictional brand-kit manager. Four tabs — Logo, Colour, Type and Usage — sit under a short header. Logo shows the mark on a card and on a muted ground, and a download of that same mark. Colour lists the theme's own tokens, each with a swatch and a copy button that copies the token, such as var(--foreground). Type sets a specimen in the theme's sans, serif and mono. Usage pairs a do with a don't. Closed panels stay mounted, so the block keeps the height of the tallest one. The page's rails and top rule come from the Guides spine, and the panel is framed with corner marks. It's built from Tabs, CopyButton and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should hand someone the kit the company actually uses. The mark and the rules are example data.

FAQ

How do I change the kit?

The tabs are fixed: Logo, Colour, Type and Usage. The mark is the Mark drawing and the MARK_SVG string, which is the file the download link saves. The swatches are TOKENS: a name, a token such as --foreground, and a swatch class. The copy button writes var(--token). The type specimen is the text in TypePanel. The pairs are RULES, each with a do and a dont.

How is it read by a screen reader?

The heading is the section's only h2. The tabs are a tab list named "Brand kit". Each panel has its own h3: The mark, Tokens, Type, Usage. Each swatch is decorative, and the token's name and variable are text beside it. The copy button's name is "Copy the Background token" and its kin. The lines are hidden from assistive technology.

How do the tabs work for a keyboard?

Arrow keys move between the tabs, and the panel follows. Tab moves into the open panel. The tab list scrolls sideways when the labels do not fit.

Is a closed panel in the HTML?

Yes. Every panel stays mounted, stacked in one grid cell. A closed panel is visually hidden and out of the pointer, and it still contributes its height, so switching tabs does not jump the page.

How does it fit on a phone?

The tab labels sit on one line and scroll if they overflow. The two logo tiles stack. The token rows keep the swatch, the name and the copy button. The usage pairs stack. Nothing else scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the tab list fade up once on load. Panels do not animate. With reduced motion the fade is off. Copying swaps the icon for a check, and the text stays on this browser's clipboard. The block has no autoplay and nothing loops.

  • Pro

    Voice Spectrums Brand Identity About

    Culture and values

    A brand voice for a writing studio as four spectrums: a marker on a hairline scale between two opposites, with a sentence we say and one we don't, beside a small greyscale specimen of the wordmark and type.

  • Pro

    Pull Quotes and Press Kit About

    Press and recognition

    A press page for a ticketing company: three pull quotes set as headlines with the outlet in serif lettering, and a press kit of three real files that download from the page, a boilerplate with a Copy button and a press contact.

  • Pro

    Do and Don't Design Principles

    Principles and process

    A design-principles section for a design-system manager: four principles in cells, each with its test as a question and the same screen sketched done well and done badly.

  • Pro

    Copyable Fact Sheet About

    Press and recognition

    A company fact sheet for a patient-records tool: six facts as a two-column description list in ruled rows, beside a boilerplate paragraph written from the same facts and a Copy button that puts it on the clipboard.

  • Pro

    Discipline Tabs Craft About

    Principles and process

    Tabs for four disciplines of a design-to-code tool: each panel lists three principles with a before and after sample and the figure that changed.

  • Pro

    Image Overlay About

    Company story

    A photo editor's tagline over its own product shot: a heading, a greyscale drawing of the editor in a framed figure with a caption panel floating over its foot and one ghost link, and a strip of figures since the first customer.

All 150 about blocks