Component library
The parts I reuse, running rather than screenshotted.
Every entry renders live on its own page with its states exposed as controls, so you can try it before deciding it is the right thing. Most are plain CSS and carry no dependency at all.
Actions
No depsButton
The three-weight button set — a solid primary, an outlined secondary and the clay accent — sized to sit on a line of text.
ActionLinkFocus ringTry itActions
No depsCopy button
Copy to clipboard with the failure path treated as a real path, and the result announced rather than implied by an icon.
Clipboardrole=statusSecure contextTry itForms
No depsField
Label, control, hint and error as one unit, wired together so the error is announced rather than just coloured.
FormValidationaria-describedbyTry itForms
No depsFile upload
A drop zone and an upload queue — each row fills with a gradient as the bytes land, draws a check when it finishes, and slides its actions down from underneath.
DropzoneReveal drawerrole=progressbarTry itForms
No depsSwitch
A real checkbox with role="switch" and appearance: none — so the label, the space key, form submission and the browser's own focus ring all still work.
role=switchappearance-noneImmediateTry itForms
No depsSegmented control
Two to four exclusive options in one rail, built on real radios, with a thumb that slides without measuring anything.
RadiogroupSliding thumbNo measurementTry itData display
No depsBadge
The mono uppercase chip used for tags and states — the eyebrow treatment shrunk to sit inline.
TagStateMonoTry itData display
No depsStat tile
A metric, its change and an optional sparkline — with the direction written in the words rather than left to an arrow and a colour.
Metrictabular-numsNot colour-onlyTry itDisclosure
No depsDisclosure
An accordion built on <details>, so it opens with no JavaScript and stays keyboard-operable by default.
AccordiondetailsNo JSTry itOverlay
No depsTooltip
A tooltip with no positioning library — the popover attribute puts it in the top layer and CSS anchor positioning places it against the trigger.
Anchor positioningPopover APITop layerTry itOverlay
No depsDialog
A modal built on <dialog>.showModal(), which hands you the focus trap, the backdrop, Escape and the inert page for free.
<dialog>Focus trap@starting-styleTry itNavigation
No depsTabs
The APG tab pattern with the keyboard behaviour actually implemented — roving tabindex, arrow keys, Home and End.
ARIARoving tabindexKeyboardTry itFeedback
No depsToast
Transient notifications that land in the right live region — polite for the ordinary ones, assertive for the errors, and never the reverse.
Live regionsrole=alertSC 2.2.1Try itFeedback
No depsProgress
A determinate bar and a correct indeterminate one in the same component, because the difference between them is one attribute and getting it wrong misreports the job.
role=progressbarIndeterminateReduced motionTry itFeedback
No depsSkeleton
Loading placeholders in three shapes, announced once for the whole region instead of once per grey box.
aria-busyLayout shiftLoadingTry itAI
No depsPrompt box
The chat entry box for an AI product — a blue-to-purple gradient border, a textarea that grows with the prompt, a tool row, a live character count, and a border that pulses once when the prompt goes.
ChatGradient borderCompositorTry itAI
No depsStreamed reply
An assistant reply that arrives a word at a time, with the typing indicator and the caret — staggered in CSS, with the whole message in the DOM from the first frame.
StreamingStaggerLive regionsTry itMotion
No depsScroll reveal
Content that settles into place as it enters the viewport, driven by a CSS scroll timeline rather than an observer.
Scroll-drivenReduced motionProgressive enhancementTry itMotion
No depsAccent beam
A light travelling around a card's border — a conic gradient rotated with @property, on one composited layer.
@propertyConic gradientCompositorTry itMotion
No depsMarquee
A ribbon of names that loops seamlessly, pauses when you reach for it, and turns into a plain scrollable row under reduced motion.
Infinite loopReduced motionCompositedTry it
Next step
Tell me where the business is losing time.
No pitch deck and no discovery-call funnel. Describe the bottleneck and I will tell you plainly whether it is worth building something for, and roughly what that would take.