---
name: "@wds"
slug: "wds"
description: "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."
category: "Component library (general)"
tags: ["accessibility", "buttons", "components", "design-system", "forms", "loaders"]
framework: "react"
license: "MIT"
author: "WebDevSimplified"
website: "https://wds-shadcn-registry.netlify.app/"
github: "https://github.com/WebDevSimplified/wds-shadcn-registry"
registry: "https://wds-shadcn-registry.netlify.app/r/registry.json"
pro: false
pro_url: null
github_stars: 286
component_count: 10
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://wds-shadcn-registry.netlify.app/
- GitHub: https://github.com/WebDevSimplified/wds-shadcn-registry
- Registry JSON: https://wds-shadcn-registry.netlify.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/wds
- This file: https://sh4dcn.vercel.app/md/wds.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/registry.json
pnpm dlx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/registry.json
bunx shadcn@latest add https://wds-shadcn-registry.netlify.app/r/registry.json
# clone the source repo
git clone https://github.com/WebDevSimplified/wds-shadcn-registry.git
# fetch the raw registry index
curl -s https://wds-shadcn-registry.netlify.app/r/registry.json
```

## Components (10)

| name | type | description | install |
| --- | --- | --- | --- |
| loading-swap | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @wds to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/wds.md) for the component list.
2. Fetch the machine-readable index: https://wds-shadcn-registry.netlify.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: wds).
```