Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Category Rail Detail Panel Features Block for React

A features section for a knowledge base as a working tree: a rail of three categories and six features beside a detail panel with the selected feature's sentence, three ticks and a small drawing.

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 features section for React with Base UI, built on a tree. A rail at the start lists three categories (Write, Organize, Find) as branches and two features each as leaves; the end side is a detail panel that follows the selection with a title, a sentence, three ticks and a small drawing of the feature at work: an editor with a command menu, a page tree, a search with results. A rule and a divider that meets the page's top rule with a plus mark split the two, and an "Expand all" button opens every branch. All six panels share one grid cell, so choosing a feature never moves the page. It's built from Tree View, Button, Badge, Kbd and the Guides line kit, with your theme's tokens for every colour and no primary button. For knowledge bases, docs tools and any product whose features fall into a few families.

FAQ

How do I change the features and categories?

Edit LEAVES (each feature's title, sentence, ticks, the three rows its drawing lists and its category) and the collection that builds the tree, keeping each leaf's id the same in both. The drawing follows the leaf's category: Write draws an editor, Organize a page tree and Find a search, so a new feature in an existing category reuses its drawing.

How does it work from the keyboard?

Tab enters the tree, Up and Down move between rows, Right opens a category and Left closes it, and Enter selects a feature. "Expand all" is an ordinary button before the tree. Typing a letter jumps to the next row that starts with it.

Does the page jump when I choose a feature?

No. Every panel is rendered in the same grid cell and only the selected one is visible, so the cell is as tall as the tallest panel and nothing moves. The hidden panels are invisible to assistive technology too.

Why a tree and not tabs?

A tree groups features into families and lets you collapse the ones you don't need, which tabs can't. The tree, its expand and collapse and its selection all come from the Tree View component, which is built on Ark UI's tree view on every base.

What moves, and what happens with reduced motion?

The header and the panel fade up once on load, branches open with a short height transition, and the detail panels cross-fade in 300 milliseconds. With reduced motion all three are off and the changes are instant.

How does it fit on a phone?

The tree sits above the detail panel, with only the first category open so the panel stays near the top; a hairline separates them. The panel's drawing sits under the ticks, and the keyboard hint is hidden.

  • Pro

    Indexed Sidebar Detail View Features

    Tabs and accordions

    A features section for a parts catalog in vertical tabs lettered A to F: each family opens a spec sheet of four specs beside a small bar chart of the price at each quantity break.

  • Pro

    Vertical Tab Accordion Preview Features

    Tabs and accordions

    A features section for an admin console in three panes: a vertical tab rail of five categories, an accordion of that category's features, and a console screen on the end side that outlines the row of the open feature.

  • Pro

    Hover Accordion Mockup Split Features

    Tabs and accordions

    A features section for an operations console: an accordion of four features whose open row swaps the console screen drawn in a framed figure beside it, by pointer, focus or tap.

  • Pro

    Tab Swap Split Showcase Features

    Tabs and accordions

    A features section for a release tool: a line tab switch (Plan, Ship, Review) that swaps one split band, with a drawing flush to the start rail and the copy on the end side.

  • Pro

    Showcase File Explorer Hero

    Code and terminal

    A showcase hero for a code editor: a centred headline, a Shine Button and three ticks above a wide editor window in a hairline frame, with a working file tree beside a sketched editor pane.

  • Pro

    Accordion FAQ Features

    Tabs and accordions

    A features section for an API gateway told as six capability questions in an accordion beside a sticky side header, each answer a sentence and a small drawing of the capability at work.

All 170 features blocks