shadcn.io is not affiliated with official shadcn/ui
Live Parse Capabilities Features Block for Ark UI
A framed panel for a language-understanding API: three example sentences in a segmented control re-parse live into an intent, entities and a confidence, beside a ruled list of five measured capabilities.
Installation
Overview
A live-parse feature section for React with Ark UI, written for Parsewell, a fictional language-understanding API. It is not a bento: a framed panel, split in two by a divider with + marks on its corners, shows one product doing one thing. At the start, a segmented control picks one of three example sentences (a rescheduled visit, a refund, a table booking); the sentence is shown with its entities marked, and under it the API's answer: the intent, each entity with its label, a confidence meter and how long the parse took. At the end, a ruled list of five capabilities (intent accuracy, entity recall, typo tolerance, out-of-scope rejection and speed), each a figure over a meter bar. The three parses share one grid cell, so the panel keeps its height whichever is open, and a polite status line announces the intent after a change. It is built from Segment Group and Guides with CSS transitions and your theme's tokens, and there is no primary colour in it. For API and AI products that want to show their output, not describe it.
FAQ
How do I change the example sentences?
Edit EXAMPLES at the top of the file. Each example is an id, a label for the control, an intent, a confidence in tenths of a percent (982 shows as 98.2%) and its spans: the pieces of the sentence in order, where a span with an entity is marked in the sentence and listed under Entities with that label. The entity list is read from the spans, so the sentence and its answer can't disagree.
Where do the capability figures come from?
From CAPABILITIES, a list of labels and values in tenths of a percent. The figure and its bar are drawn from the same number, so they always match. Replace them with your own measurements and say on the page what they were measured on; the defaults are written for a held-out set of English sentences.
Does the panel jump when I pick another example?
No. All three parses are rendered in one grid cell, so the cell is as tall as the tallest, and the ones not shown are invisible, inert and hidden from assistive technology. Only the open parse is read out, and a visually hidden status line says which intent was found and with what confidence.
Is the control keyboard accessible?
Yes. The three examples are a segmented control named "Example sentence": Tab reaches it, the arrow keys move between the examples and the choice applies at once. Its focus ring is visible and the selected example is marked by the sliding indicator.
How does it fit on a phone?
The two halves stack, the parse first and the capability list under it, with a hairline between them. The segmented control scrolls sideways inside its own row if the three labels don't fit, and nothing else scrolls: the sentence wraps and the entities list stays in one column down to 320 px.