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.
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
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
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.
See Knapsack in action with a guided, interactive tour
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.
Hero
Introductory content with a 50% opacity black box over it.
Input Field
Put things in things on the web.
Layout
An extensible pattern meant to provide layout flexibility.
Message
Interstitial information of varying degrees of severity (Look mom! I'm using my MBA!)
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.
Button variants
Each button variant has a particular function and its design signals that function to the user. It is therefore very important that the different variants are implemented consistently across products, so that they message the correct actions.
Mode
- Success - For the principal call to action on the page.
- Info - For secondary actions on each page.
- Warning - For less prominent, and sometimes independent, actions.
- Danger - For actions that could have destructive effects on the user’s data.
- Alert - For actions that could impact other settings indirectly.
- Special - For special or unique actions; often used in conjunction with a primary button.
Size
- Small - For use in small viewport experiences.
- Medium - For use in medium viewport experiences.
- Large - For use in large viewport experiences.
Type
- Solid - For use in combination with primary buttons, to present a prominently emphasized call to action.
- Outlined - For use in combination with secondary and tertiary actions, to present a de-emphasized user option.