shadcn.io is not affiliated with official shadcn/ui
Split Feature Flags Hero Block for Vue
A split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.
Installation
Overview
A split hero for Flagpost, a feature-flag service. An announcement link, the headline, a Shine Button with an outline second action and three short ticks sit on the start side. On the end side a narrow flags dashboard is held in a hairline frame with + marks on its corners. Its tabs switch between Production, Staging and Dev, each with its own five flags: a monospace key, a description, a rollout meter and percentage in foreground tones, and a Switch. The hero follows the theme and the Shine Button is its only primary control, so the switches are on in the foreground colour. For feature flag platforms, experimentation tools, A/B testing services and progressive delivery products.
FAQ
How do I change the environments and their flags?
Edit ENVIRONMENTS at the top of the file. Each environment is a tab: its id, the tab's label, and its own flags, each with a key, a description, a rollout from 0 to 100 and whether it starts enabled. The rollout sets the meter's fill and the percentage next to it. Give every environment the same number of flags, and the dashboard keeps its height when you switch tabs.
Do the tabs and the switches really work?
Yes. The environment strip is our Tabs: the arrow keys move between environments and each tab shows its own panel of flags. Every flag has a Switch that starts on or off from the data and flips with a click or the space bar. The switches keep no state in the block, so a flipped switch goes back to its data when you leave its tab and come back.
How do I connect the dashboard to my flag service?
Load the environments from your service instead of the ENVIRONMENTS constant, make each switch controlled (the Switch docs show how), and send the new value to your service when it changes. The Synced badge is the place to say that a change is saving or has failed.
How does a screen reader read the dashboard?
The dashboard is a figure named Feature flags dashboard. Its tab list is named Environment, and each row reads its key, its description and its percentage as a rollout (30% rollout), then a switch named after the key, on or off. The window's title bar and the meters are decoration: hidden from screen readers. The ticks are hidden too, and the headline is the block's one h1.
How does the hero fit on a phone?
The two columns stack below the lg breakpoint with the text first, then a rule with + marks and the dashboard in its frame, so the Shine Button stays on the first screen. Below sm the rollout meters step aside and the percentage stays; the key and the description shorten with an ellipsis, so the percentage and the switch stay at the end of the row. The Synced badge wraps above the tabs if they don't fit side by side. Nothing scrolls sideways down to 320 px.