@noctuatech/uswds v1.3.12

USWDS

An implementaiton of the US Web Design System using web components.

https://designsystem.digital.gov/

Getting Started

npm i @noctuatech/uswds

<style>
  * {
    font-family:
      Source Sans Pro Web,
      Helvetica Neue,
      Helvetica,
      Roboto,
      Arial,
      sans-serif;
  }
</style>

<script type="module" src="https://esm.sh/@noctuatech/uswds@latest"></script>

<usa-config icon-path="/node_modules/@noctuatech/uswds/assets/usa-icons/">
  <usa-alert type="info">
    <h3 slot="heading">Informative status</h3>

    Lorem ipsum dolor sit amet,&nbsp;
    <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
    eiusmod.
  </usa-alert>
  
  <form>
    <usa-input name="username">
      First name
    </usa-input>

    <usa-input name="password">
      Last name
    </usa-input>

    <usa-button type="submit">Submit</usa-button>
  </form>
</usa-config>

Development

Install

npm i

Run Storybook

npm run storybook

Generate a new element

npm run gen element

USWDS Components Checklist

Form Components

• Button
• Button group
• Checkbox
• Combo box
• Date picker
• Date range picker
• File input
• Input mask
• Input prefix or suffix
• Memorable date
• Radio buttons
• Range slider
• Search
• Select
• Text input
• Time picker
• Validation

Navigation Components

• Accordion
• Breadcrumb
• In-page navigation
• Link
• Pagination
• Side navigation
• Step indicator

Content Components

• Alert
• Banner
• Card
• Collection
• Footer
• Header
• Icon
• List
• Modal
• Process list
• Prose
• Site alert
• Summary box
• Table
• Tag
• Tooltip
• Character count
• Identifier