shadcn.io is an independent project built on shadcn/ui
A read-only repository link, with two buttons at the end. One is info. The other is favorite: its heart fills when it is on, and the button is marked pressed. Pressing it only toggles that heart.
Use it when a locked value still has a couple of actions. If favorite is the whole control, a Toggle is the simpler button. In Svelte, Ark UI does not save the favorite.
Installation
Anatomy
Usage
<InputGroup class="w-full max-w-sm bg-background"><InputGroupInput aria-label="Repository" placeholder="https://github.com/shadcn" readonly type="url" /><InputGroupAddon align="inline-end"><InputGroupButton aria-label="Info" size="icon-xs" variant="ghost"><InfoIcon aria-hidden="true" /></InputGroupButton></InputGroupAddon><InputGroupAddon align="inline-end"><InputGroupButton aria-label="Favorite" aria-pressed={favorited} onclick={handleFavoriteToggle} size="icon-xs" variant="ghost"><HeartIcon aria-hidden="true" class={favorited ? "fill-current" : undefined} /></InputGroupButton></InputGroupAddon></InputGroup>FAQ
Why are the two buttons in separate addons?
Each InputGroupAddon with align="inline-end" is placed after the input, in source order, so two addons line up at the end. One addon holding both buttons works too.
How does the heart fill?
A favorited flag toggles on each press, and the icon gets fill-current while it's on, so the heart fills with the text color.
How do screen readers know the favorite is on?
The button sets aria-pressed from the same flag, so it's announced as a toggle button, pressed or not pressed. Its name stays Favorite.
What does the info button do?
Nothing in the demo. Open a Tooltip or a Popover from it, as in API Key Info.
API Reference
Input Group
Sets aria-label="Repository", placeholder="https://github.com/shadcn", readonly, type="url", align="inline-end" and aria-label="Info". The rest is on the Input Group page.
