<div align="center">
    <p><b>ni | spright</b></p>
</div>

# Spright Components

[![NPM Version](https://img.shields.io/npm/v/@ni/spright-components.svg)](https://www.npmjs.com/package/@ni/spright-components)

NI-styled web components following [Nimble Design System](https://nimble.ni.dev) patterns and built on the same technologies (FAST, native web components, etc.), but not part of the core design system.

The `spright-components` package is intended for components that do not belong in [`nimble-components`](/packages/nimble-components) due to being: ["molecules"](https://atomicdesign.bradfrost.com/chapter-2/), product-specific, data-connected, or not "general utility". Some examples:

- Molecule: a group of card buttons with a specific layout
- Product-specific: a configuration pane that uses product-specific terminology or connects to a product-specific data model
- Data-connected: a table that populates itself by making HTTP requests to a specific service
- Experimental components that are trying out new UX patterns to see if they should someday be promoted to Nimble.

## Why Spright?

"Spright" is an archaic variant of "sprite" that is the root of "sprightly"; think of it as a rapidly moving peer of Nimble.
