Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Plan Inclusive List Features Block for React

A features section for a project suite that includes everything in every plan: a tally band (42 features, 0 locked) beside a full progress bar, then an accordion of three feature groups, each a two-column list of checks, names and one-line notes.

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, answering "what do I get?" with the whole list. A centred header carries the one Shine Button over a tally band: "42 features, 0 locked" beside a progress bar that is always full, for Fullkit, a project suite with no feature gates. Under it an accordion of three groups (core platform, collaboration and security) runs rail to rail, each trigger showing its group's name and a count badge. A group opens into a two-column list in shared hairlines: a check, the feature's name and one line about it. The groups open independently and the first is open on load. It's an accordion, a progress bar, badges and the Guides line kit, with your theme's tokens for every colour. For plans and pricing pages that include everything, and any product whose feature list is its argument.

FAQ

How do I change the groups and the count?

Edit GROUPS at the top of the file: each group has an id, a title and a list of features, each a name and a line. The tally band, the progress bar and every group's count badge are computed from those lists, so the numbers always agree with what is listed. Keep each group's count even so the two-column list has no hole, and set LOCKED if some features are held back.

Can more than one group be open?

Yes. The groups open independently, and the first is open when the page loads. The accordion has multiple.

How does it work from the keyboard?

Tab reaches each group's trigger and Enter or Space opens or closes it. Each trigger sits in a level-three heading under the section's level-two heading. The arrow keys also move between triggers on Ark and Radix; Base UI and React Aria use Tab.

Are the closed groups in the page?

On Ark, Base UI and React Aria, yes: a closed group's list stays in the markup, hidden, so search engines and find-in-page can reach it. On Radix a group's list is rendered only while it is open.

What moves, and what happens with reduced motion?

The header and the accordion fade up once on load, and a group opens with the accordion's own height transition. With reduced motion the fade is off and the section simply appears. The progress bar doesn't animate.

How does it fit on a phone?

The tally band stacks its number over the bar, the groups are full-width rows and each open group's list is one column. Only the first group is open on load, which keeps the section within about two and a half screens.

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

  • Pro

    Feature Unlock Pricing

    Charts and figures

    A field of feature chips for a podcast host: pick Hobby, Show or Network and the chips each plan includes light up, the ones it adds get a stronger outline, and the rest stay locked.

  • Pro

    Feature Matrix Pricing

    Comparison tables

    A feature matrix you can interrogate: search the features, hide the rows every plan shares with a switch, and watch a live count in the table's corner, over four chat plans and twenty-eight features.

  • Pro

    Compliance Badge Grid Features

    Metrics and charts

    Six control cards for a privacy-operations tool, each with a coverage ring counted from the data, a sentence of counts and a Passing or open-items badge.

  • Pro

    Segmented Accordion Mockup Features

    Tabs and accordions

    A features section for a block editor: a segmented control picks a job, an accordion lists its four features, and the one editor screen beside it rings and spotlights the part of the page the open row names.

  • Pro

    Anchored Headline Grid Features

    Headline-led

    A feature section for a developer portal with a display headline pinned to the start side and a two-by-two grid of features in shared hairlines, each cell leading with a small greyscale drawing.

All 170 features blocks