vibecodng.com

Free MCP betaIndex and tools live

Measured entry

shadcn-input-group

inputunclassified

A source-distributed React and TypeScript input wrapper for placing text, buttons, icons, or other add-ons beside an input or textarea. It ships as copied shadcn registry code, composes the shadcn Button, Input, and Textarea, and relies on Tailwind utilities, class-variance-authority, the cn helper, radix-ui, clsx, and tailwind-merge.

Specimen
Harness screenshot of shadcn-input-group at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of shadcn-input-group at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of shadcn-input-group at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for shadcn-input-group
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical1
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal32.7 KB (98.2 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 826ms
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-1d3a274244dd/src/cut/components/ui/input-group.tsx".

Verdict

A solid fit for an existing shadcn codebase: it builds, mounts without a provider, and handles the tested layouts without overflow. Do not copy the demo as-is into production because its controls lack accessible labels. Add visible labels or equivalent accessible names before shipping.

Use it if

  • You need prefixes, suffixes, icons, or compact actions inside the same visual field as an input.
  • Your app already uses shadcn conventions and can reuse its Button, Input, Textarea, theme tokens, and cn helper.
  • You want source-owned primitives that support both inline and stacked add-ons without a provider.

Skip it if

  • You need a drop-in package with isolated styles instead of copied source tied to Tailwind and local shadcn primitives.
  • Your forms cannot guarantee an explicit accessible label for every grouped input or textarea.
  • You want a minimal dependency footprint for a simple prefix or suffix that could be implemented with local markup.

Install

Installation record for shadcn-input-group
Declared dependenciesradix-ui, clsx, tailwind-merge
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add Tailwind with the expected theme tokens, class-variance-authority, radix-ui, clsx, and tailwind-merge. Provide a compatible cn utility plus local Button, Input, and Textarea components, then replace the registry aliases with your own import paths. Add explicit labels when integrating the controls.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/shadcn-ui/ui
License
MIT
Record published
2026-08-16

Alternatives

Other published entries for the input pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.