Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Circular Orbit Layout Features Block for React

A hub and six connections around a solid ring for an integration hub: hovering, focusing or tapping a node writes its title and sentence into the hub.

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 hub-and-orbit features section for React with Base UI. A tile at the centre of a hairline frame stands for the product; six nodes sit around a solid ring, each placed from its own index with CSS rotate and translate, so the layout is one rule and not six offsets. Hover, focus or tap a node and its title and sentence are written into the hub; the ring itself stands still. Below md the hub is a card above a two-by-three grid of the same nodes. It's built from Guides, with CSS for everything else, and it follows your theme. For integration hubs, platforms with connectors and any product whose story is one centre and the tools around it.

FAQ

How do I change the connections?

Edit CONNECTIONS at the top of the file: each has a name, an icon and a sentence. The ring is built for six, spaced 60 degrees apart from the top, clockwise; a different count means changing the angle in ON_RING and the number of items.

How does the hub change without the page shifting?

All six hub texts sit in one grid cell, and only the active one is visible, so the tile keeps the height of the tallest. Nothing around it moves when you point at another node.

How do keyboard and screen reader users get the text?

The nodes are buttons in a list, each with a heading around it and aria-pressed on the active one. The sentence is attached to each button as its description, so a screen reader reads it on focus; the hub itself is hidden from assistive technology because it only repeats that text.

Does anything move?

Only the fade-up when the page loads. The ring is static: it doesn't turn, and there is nothing to pause. With reduced motion the entrance is off.

What does it look like on a phone?

The ring would be too wide, so below md the hub becomes a card above the nodes, which sit two by three. Tapping a node writes its sentence into the card. Nothing scrolls sideways at 320 pixels.

Does the ring mirror in right-to-left languages?

No: the ring keeps its direction (dir="ltr"), because its order, from the top and clockwise, is a position and not a reading order.

  • Pro

    Layered Stack Diagram Features

    Diagrams and maps

    A flat stack ladder for an app platform: five bars from interface to infrastructure, each a step wider, linked by hover and focus to a list of what sits in every layer.

  • Pro

    Architecture Flow Diagram Features

    Diagrams and maps

    A request path for an edge-routing layer: five hops on one wire with a dot travelling along it, the time each hop spends under it, and a latency-budget bar that sums them.

  • Pro

    Venn Diagram Overlap Features

    Diagrams and maps

    A three-circle Venn diagram for a segment builder: seven zones with head counts, one radio group, a caption that names the chosen zone with a link to create it, and three legend cells.

  • Pro

    Split Integration Flow Hero

    Diagrams and maps

    A split hero for a metrics pipeline: the headline and a Shine Button beside a divider and a flow diagram in a hairline frame, with a closing band of three proof cells.

  • Pro

    Bento Grid Features

    Bentos

    A bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.

  • Pro

    Depth Layered Stack Features

    Diagrams and maps

    An exploded isometric stack of three greyscale planes (data, logic, view) in CSS 3D, with a ruled list of the layers beside it: hovering, focusing or tapping a layer lifts its plane and outlines it.

All 170 features blocks