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.

Don't take our word for it.

200+  
components
1M+  
downloads
Weekly  
Release Updates

Don't take our word for it.

200+  
components
1M+  
downloads
Weekly  
Release Updates

200+

components

1M+

downloads

Weekly

release updates
Anna Black

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

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.