https://github.com/noctua-technology/uswds
Noctua's implementation of the US Web Design System
https://github.com/noctua-technology/uswds
uswds webcomponents
Last synced: about 2 months ago
JSON representation
Noctua's implementation of the US Web Design System
- Host: GitHub
- URL: https://github.com/noctua-technology/uswds
- Owner: Noctua-Technology
- License: mit
- Created: 2024-11-18T14:51:53.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-14T15:56:10.000Z (about 2 months ago)
- Last Synced: 2025-04-14T16:50:57.845Z (about 2 months ago)
- Topics: uswds, webcomponents
- Language: TypeScript
- Homepage: https://noctua-technology.github.io/uswds/
- Size: 2.59 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# USWDS
An implementaiton of the US Web Design System using web components.
https://designsystem.digital.gov/
## Getting Started
```sh
npm i @noctuatech/uswds
```
```html
* {
font-family:
Source Sans Pro Web,
Helvetica Neue,
Helvetica,
Roboto,
Arial,
sans-serif;
}
Informative status
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod.
First name
Last name
Submit
```
## Development
### Install
```sh
npm i
```
### Run Storybook
```sh
npm run storybook
```
### Generate a new element
```sh
npm run gen element
```
## USWDS Components Checklist
### Form Components
- [x] Button
- [x] Button group
- [x] Checkbox
- [x] Combo box
- [ ] Date picker
- [ ] Date range picker
- [x] File input
- [x] Input mask
- [x] Input prefix or suffix
- [ ] Memorable date
- [x] Radio buttons
- [x] Range slider
- [x] Search
- [x] Select
- [x] Text input
- [ ] Time picker
### Navigation Components
- [x] Accordion
- [x] Breadcrumb
- [x] In-page navigation
- [x] Link
- [x] Pagination
- [x] Side navigation
- [x] Step indicator
### Content Components
- [x] Alert
- [ ] Banner
- [x] Card
- [x] Collection
- [ ] Footer
- [ ] Header
- [x] Icon
- [ ] List
- [x] Modal
- [x] Process list
- [ ] Prose
- [x] Site alert
- [x] Summary box
- [ ] Table
- [x] Tag
- [ ] Tooltip