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.

React & Rails Components packaged in a single "Kit"

Consistency in design is one of the most important tools we can use to build great user experiences. The “kits” in Playbook are identical no matter if they are built for Rails UI or React front ends. Whether your system is legacy or bleeding edge, consistency across interfaces is a very important advantage when working with large codebases.

The kits are also built to work with any industry. If it's a product then we have battle-tested kits ready to suit your needs. Get started by adding Playbook to your application in 5 min, or start browsing our library to spark inspiration.

Getting Started

Browse All Kits

Anna Black

Sales Representative

<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  orientation: "vertical",
  align: "center",
  size: "lg",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
}) %>

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