# Component & Pattern Management

Knapsack allows you to manage components across design, code, and documentation. Connect and compare properties and data to ensure consistency and alignment as your system scales. Visualize and organize patterns from a birds-eye-view to keep your teams organized across all the ways your system is used, managed, and experienced.

[Book Live Demo](/content/events/index.html)

[Contact Sales](/content/connect-with-us/index.html)

## Patterns Overview UI

A holistic view of your components and patterns across design, code, and documentation helps you efficiently manage statuses and orchestrate the bi-directional flow of work.

## Spec Alignment

Knapsack uses the Figma REST API and our deep integration with Git to collect property specifications in a centralized location where maintainers can easily manage alignment and focus their efforts.

[Explore Pattern Spec Alignment](https://docs.knapsack.cloud/site/ks-docs/latest/pages/pattern-spec)

## Suggested Connections

When new components are created or added to your source libraries in Figma or Git, Knapsack will automatically suggest connections to Pattern Pages in your workspace, minimizing manual maintenance and helping you keep everything organized, up-to-date, and ready for use.

[Explore Pattern Page Connections](https://docs.knapsack.cloud/site/ks-docs/latest/pages/connecting-code#template-suggestions)

## Status Management

Keep everyone on the same page with a centralized source of truth. Status updates let you know if a component is ready for production or needs to be updated.

[Explore Status Sets](https://docs.knapsack.cloud/site/ks-docs/latest/pages/status-sets-settings)

## Component Status

See below for real-time statuses on the current state of the component across teams, disciplines, and technologies

| Pattern   | Design         | React             | Web Components    | Mobile         |
|-----------|----------------|--------------------|-------------------|------------------|
| Author    | Needs Design   | Ready              | Ready             | Not Ready       |
| Button    | Needs Update   | Ready              | Needs Development  | Ready           |
| Card      | Ready          | Needs Update       | Needs Development  | Ready           |
| Footer    | Ready          | Ready              | Needs Development  | Not Ready       |
| Header    | Ready          | Ready              | Needs Development  | Not Ready       |
| Hero      | Ready          | Ready              | Needs Development  | Not Ready       |
| Input Field | Needs Update | Needs Development   | Won't Build       | Not Ready       |
| Layout    | Ready          | Ready              | Needs Development  | Not Ready       |
| Message   | Ready          | Needs Development   | Needs Development  | Not Ready       |
| Top Nav   | Ready          | Needs QA          | Needs Development  | Ready           |

# Available Components

**Author**

Byline and author info for standalone or in grids

**Button**

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

**Card**

Cards contain content and actions about a single subject.

**Footer**

Some people are really into these.

**Header**

Introductory content with a 50% opacity black box over it.

**Hero**

Kind of like Superman, but full width.  No Preview Available

**Input Field**

Put things in things on the web.

**Layout**

An extensible pattern meant to provide layout flexibility  No Preview Available

**Message**

Interstitial information of varying degrees of severity (Look mom! I'm using my MBA!)  No Preview Available

**New Component (in progress)**

**Prototyping Playground**

Use this prototyping playground to add coded components and elements to our landing page template to quickly build and launch a Home or advanced landing page using the available system.

**Top Nav**

How we all get around. The proverbial hat (or hamburger).

## More Features

Check out our other useful features

[**Dynamic Documentation**](/content/feature-listing/dynamic-documentation/index.html)

.png)

[**Design Tokens & Theming**](/content/feature-listing/design-tokens-theming/index.html)

.png)

[**Prototyping & Composition**](/content/feature-listing/prototyping-and-composition/index.html)

.png)

[**Permissions & Controls**](/content/feature-listing/permissions-and-controls/index.html)

.png)