BY THE NUMBERS

Don't take our word for it.

Explore All Components

200＋

components

1M＋

downloads

Weekly

Release Updates

Don't take our word for it.

Explore All Components

200＋

components

1M＋

downloads

Weekly

Release Updates

BY THE NUMBERS

200＋

components

1M＋

downloads

Weekly

release updates

Anna Black

LVL II • Sales Representative

import React from 'react'

const UserDefault = () => {
  return (
    <User
        align="center"
        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
        name="Anna Black"
        orientation="vertical"
        size="lg"
        title="Remodeling Consultant"
    />
  )
}

export default UserDefault

DESIGN, DEVELOP, DELIVER

Solutions written in multiple languages.

Create solutions to repetitive problems, for multiple languages and access to anywhere!

Playbook gives designers and developers the frameworks they need to create engaging product experiences.

Playbook was created for Power by Power. Playbook is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.

Endlessly flexible presentational UI components with encapsulated styles and constraint based theme props.

100+ highly customizable ViewComponents. Build design driven UI in Rails with ViewComponents.

Finally a Design System built for SwiftUI. Get cross device consistency by using Playbook for SwiftUI.

Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values.

Explore Playbook Solutions

NEWEST FROM PLAYBOOK

Playbook is always shipping.

Move Fast. Follow Momentum.

September 6, 2024

Star Ratings and Page-Turning Upgrades 💫

Our Star Rating kit now shines brighter with added interactivity and hover effects! ⭐ And don’t forget to flip through content with our Pagination kit, now available in React in addition to Rails.

August 31st, 2024

⭐ Improving Usability, Flexibility, and Accessibility ⭐

This release brings several enhancements and new kits aimed at improving user experience, customization, and visual clarity! To make things easier on devs, Playbook now allows you to import our custom themes directly into your apps to style Highcharts charts. In this release, we also introduced different size options for form pills, offering more flexibility for you. We added a new form control for star ratings, provided a new error variant for badge notifications to bring clarity for error states, and added a loading state for buttons in the Dialog. Check out all the other great improvements in 14.2.1 here: **Kit Enhancements:** - Export Highchart Theming Files [\#3615](https://github.com/powerhome/playbook/pull/3615) ([nidaqg](https://github.com/nidaqg)) - Form Pill 3 Of 5: Sizes [\#3607](https://github.com/powerhome/playbook/pull/3607) ([elisashapiro](https://github.com/elisashapiro)) - Adding Star Rating Form Controls [\#3600](https://github.com/powerhome/playbook/pull/3600) ([carloslimasd](https://github.com/carloslimasd)) - Badge Notification Error Variant [\#3596](https://github.com/powerhome/playbook/pull/3596) ([kangaree](https://github.com/kangaree)) - Add Beta Flag to Kit Generator In Playbook [\#3589](https://github.com/powerhome/playbook/pull/3589) ([skduncan](https://github.com/skduncan)) - Loading State Of a Button Within a Dialog \(react\) [\#3579](https://github.com/powerhome/playbook/pull/3579) ([kangaree](https://github.com/kangaree)) - Add Minwidth Global Prop [\#3551](https://github.com/powerhome/playbook/pull/3551) ([markdoeswork](https://github.com/markdoeswork)) **Fixed Bugs:** - Fixing Phone Number Input Kit Flag Misalignment [\#3626](https://github.com/powerhome/playbook/pull/3626) ([carloslimasd](https://github.com/carloslimasd)) - Bug Fix: Rails Advanced Table Dark Mode [\#3602](https://github.com/powerhome/playbook/pull/3602) ([anthonymig88](https://github.com/anthonymig88)) **New Kits:** - Gantt Chart Beta Kit [\#3614](https://github.com/powerhome/playbook/pull/3614) ([nidaqg](https://github.com/nidaqg)) - New Pagination Kit In React [\#3552](https://github.com/powerhome/playbook/pull/3552) ([nickamantia](https://github.com/nickamantia)) **Improvements:** - Upgrade View\_component Gem [\#3613](https://github.com/powerhome/playbook/pull/3613) ([phylum](https://github.com/phylum)) - Initial Rc Github Action [\#3611](https://github.com/powerhome/playbook/pull/3611) ([jasperfurniss](https://github.com/jasperfurniss)) - Rte Advanced Previewer + Output Styles \(react\) [\#3578](https://github.com/powerhome/playbook/pull/3578) ([elisashapiro](https://github.com/elisashapiro)) - Bumping Axecore Dependency to 4.10.0 [\#3620](https://github.com/powerhome/playbook/pull/3620) ([jasperfurniss](https://github.com/jasperfurniss))([skduncan](https://github.com/skduncan)) - Testing Dependency Update with New Release Flow [\#3617](https://github.com/powerhome/playbook/pull/3617) ([jasperfurniss](https://github.com/jasperfurniss)) - Dialog Kit Loading State Buttons [\#3599](https://github.com/powerhome/playbook/pull/3599) ([markdoeswork](https://github.com/markdoeswork)) - Bump React-joyride from 2.5.3 to 2.8.2 [\#3594](https://github.com/powerhome/playbook/pull/3594) ([dependabot[bot]](https://github.com/apps/dependabot)) - Upgrade Ci-kubed to 8.3.0 [\#3585](https://github.com/powerhome/playbook/pull/3585) ([benlangfeld](https://github.com/benlangfeld))

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Connect

© 2023-24, ALL RIGHTS RESERVED