Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Brand kit tabs About Block for React Aria

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 React Aria, 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.

All 150 about blocks