Playbook Design System

Playbook is the first design system built for both Rails & React interfaces. Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Development teams at Power Home Remodeling, the largest home remodeler in the US.

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.

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 22, 2023

🧠 Smart Multi-Line Truncation is Here!

Got text content that’s too long to fully display? No job’s too large for the new truncate prop. Pop it into the Body or Title kit, set the number of lines to truncate to, and your overflow text will… 👋

September 14, 2023

No More Custom CSS! The Global Text Align Prop is Here!

Gone are the days of adding custom CSS to align kits. With the global text-align prop, you can align any kit left, center, just by using textAlign=” ” as a prop!

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

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat