README

svelte-uswds

Svelte component library that implements the U.S. Web Design System (USWDS).

Documentation

Getting started

yarn add -D svelte-uswds
# OR
npm i -D svelte-uswds

Adding styles

In your root svelte file, link a stylesheet from a CDN using the svelte:head API.

<!-- App.svelte -->
<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/uswds@2.9.0/dist/css/uswds.min.css"
  />
</svelte:head>

Importing components

Script

<!-- App.svelte -->
<script>
  import { Accordion, AccordionItem } from "svelte-uswds";
</script>

Mark-up

<!-- App.svelte -->
<Accordion>
  <AccordionItem title="First Amendment" expanded>
    <p>
      Congress shall make no law respecting an establishment of religion, or
      prohibiting the free exercise thereof; or abridging the freedom of speech,
      or of the press; or the right of the people peaceably to assemble, and to
      petition the Government for a redress of grievances.
    </p>
  </AccordionItem>
  <AccordionItem title="Second Amendment">
    <p>
      A well regulated Militia, being necessary to the security of a free State,
      the right of the people to keep and bear Arms, shall not be infringed.
    </p>
  </AccordionItem>
</Accordion>

TypeScript

This library includes TypeScript definitions (types).

Limitations

This library does not support Internet Explorer.

You'll need to polyfill the Array.find and Array.findIndex.

Changelog

License

MIT

Usage no npm install needed!