@wds

Small, accessibility-focused shadcn registry from the Web Dev Simplified YouTube channel. Ships five components: Action Button, Loading Swap, Multi-Select, Number Input, and Password Input. Built for use alongside shadcn/ui with an emphasis on correct ARIA patterns and usability edge cases. Free and MIT-licensed; documented via Starlight. Use for: adding a handful of commonly-needed but tricky-to-get-right accessible form and action components (multi-select, numeric input, password visibility toggle) into a shadcn project without reinventing their accessibility handling.

10 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/registry.json

bun bunx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/registry.json

fetch registry curl -s https://wds-shadcn-registry.netlify.app/r/registry.json

Components

10 total

loading-swap component

Swaps content with a loading spinner without layout shift.

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/loading-swap.json

action-button component

A button that performs an action when clicked and optionally asks for user confirmation.

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/action-button.json

number-input component

An input that returns a number value and automatically handles invalid inputs.

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/number-input.json

multi-select component

A multi-select input that emulates the Shadcn Select component as closely as possible.

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/multi-select.json

password-input component

An input that can toggle visibility of the password text and check the strength of the password.

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/password-input.json

loading-swap-experimental component

Swaps content with a loading spinner without layout shift. (Includes experimental support for all Shadcn icon libraries)

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/loading-swap-experimental.json

action-button-experimental component

A button that performs an action when clicked and optionally asks for user confirmation. (Includes experimental support for all Shadcn icon libraries)

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/action-button-experimental.json

number-input-experimental component

An input that returns a number value and automatically handles invalid inputs. (Includes experimental support for all Shadcn icon libraries)

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/number-input-experimental.json

multi-select-experimental component

A multi-select input that emulates the Shadcn Select component as closely as possible. (Includes experimental support for all Shadcn icon libraries)

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/multi-select-experimental.json

password-input-experimental component

An input that can toggle visibility of the password text and check the strength of the password. (Includes experimental support for all Shadcn icon libraries)

npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/password-input-experimental.json