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 React, Base UI does not save the favorite.
Installation
Anatomy
Usage
<InputGroup className="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"
className={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.
