See Beta View

Kits




Dialog

Simple

Header Title is the Title Prop
Hello Body Text, Nice to meet ya.

Fixed Confirmation Toast

Default

Error Message



Items Successfully Moved



Scan to Assign Selected Items


Popover

Default

Click info for more details
 

Tooltip

Default

Hover here (Top)
Hover here (Bottom)
Hover here (Right)
Hover here (Left)

Button

Button Variants


Button Toolbar

Default


Circle Icon Button

Default





Icon Button

Default


Copy Button

Default


Table

Small

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Advanced Table

Default (Required Props)

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

List

Default

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Filter

Default

name

John Wick

city

San Francisco

Results:

1
sort by:
No Filter Selected

Results:

0
sort by:

Distribution Bar

Default




Legend

Default

Windows
Doors
Roofing
Siding
Solar
Gutters
Insulation
Other

Gauge

Default


Bar Graph

Default


Circle Chart

Default Style


Line Graph

Default


Date

Default

Jun 24

Aug 2, 2012

Sat
•
Dec 2, 2017


Jun 24

Aug 2, 2012

Sat
•
Dec 2, 2017

Date Range Inline

Default






Date Range Stacked

Default

18 JUN

2019

20 MAR

2020

Date Stacked

Default

Jun


Jun


Date Time

Default

Tue
•
Jun 24

Tue
•
Jun 24

Jun 24

Jun 24

Date Time Stacked

Default

Jun


Mar


Jun


Jun


Date Year Stacked

Default

24 JUN

2025


24 JUN

2025


24 JUN

2025

Time

Default










Time Range Inline

Default

11:49a 1:49p

11:49a 1:49p


11:49a 1:49p EDT

11:49a 1:49p EDT


11:49a 1:49p

11:49a 1:49p


11:49a 1:49p EDT

11:49a 1:49p EDT

Time Stacked

Default




Timestamp

Default

3:12a

Jun 24 · 3:12a

Jun 24, 2029 · 3:12a

Jun 24, 2024 · 3:12a

Weekday Stacked

Default


Contact

Default

(349) 185-9988
(555) 555-5555
email@example.com
(324) 562-7482
(349) 185-9988

Currency

Variants

Emphasized False
$

2,000

.50
Light
€

342

.00
Bold
$

45

/mo

Home Address Street

Default

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382
H#8250263
PHL

Label Pill

Default

Service Needed
76
Waiting
69
In Service
28
Fully Serviced
101
Inbox
197
Outbox
13
Inbox
218

Label Value

Default

Role
Administrator, Moderator

Email
anna.black@powerhrg.com

Bio
Proin pulvinar feugiat massa in luctus. Donec urna nulla, elementum sit amet tincidunt nec, mattis nec urna. Cras viverra lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae orci vehicula condimentum.

Person

Default

Kyle

Fadigan


Person Contact

Default

Pauline

Smith

email@example.com
(555) 555-5555
(324) 562-7482

Source

Default

BJ's Johnston-208

Retail


Referral-phrg

Inbound


BJ's Future CB

Anna Black
48582

Dashboard Value

Full Example

Decreased Value
1,428   appts
26.1%


Increased Value
938   homes
56.1%


Neutral Value
261   windows
86%


Pitch Rate
90.9   %

Stat Change

Default

28.4%

6.1%

102%

Stat Value

Default

1,048  
10.48  

Title Count

Default

Appointments

35.78

Appointments

7,399

Appointments

-379,503.372

Title Detail

Default

Email Notifications

Commits data and history

Email Notifications

Commits data and history

Email Notifications

Commits data and history

File Upload

File Upload


Toggle

Default State



Form Pill

Form Pill User

Anna Black

Anna Black



Anna Black


Form

Default

Select...
  • United States
  • Canada
  • Pakistan
Select...
  • United States
  • Canada
  • Pakistan

Form Group

Default

First Name
Middle Intial
Last Name

Passphrase

Default


Phone Number Input

Default


Text Input

Default

First Name
Last Name
Phone Number
Email Address
Zip Code

Rich Text Editor

Default


Textarea

Default

Label

Label

Label

Typeahead

Default


Date Picker

Default

Date Picker

Dropdown

Default

Select...
  • United States
  • Canada
  • Pakistan

Multi Level Select

Default


Select

Default


Selectable Card

Default


Selectable Card Icon

Default


Selectable Icon

Default


Radio

Default




Checkbox

Default


Selectable List

Default


Icon

Icon Default


Icon Circle

Default


Icon Stat Value

Default

64.18  
kw
Electric

24  
days
deadline

Icon Value

Default

93

5

15m

User Badge

Default




Image

Default


picture of a misty forest
picture of a misty forest
picture of a misty forest
picture of a misty forest
picture of a misty forest
picture of a misty forest

Star Rating

Default


Flex

Default

Row


1
2
3
4


Column


1
2
3
4

Layout

Colors

Light
Body


Dark
Body


Gradient
Body

Card

Default

Card content

Section Separator

Line Separator


Background

Light


Collapsible

Default

Main Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.

Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.

Overlay

Default

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Draggable

Default

1
2
3

Highlight

Default

This is the Highlight Kit .
Hello this is a highlight wrapped.
This is text highlighted in the Body Kit using the text prop.

Message

Default

Mike Bishop

Anna Black

20 seconds ago
How can we assist you today?


Wade Winningham

Patrick Welch

9 minutes ago
We'll escalate this issue to a Senior Support agent.


Becca Jacobs

Lucille Sanchez

4 hours ago
Application for Kate Smith is waiting for your approval


Beverly Reyes

2 days ago
We're so sorry you had a bad experience!


Keith Craig

2 days ago
Please hold for one moment, I'll check with my manager.


2 days ago
We're so sorry you had a bad experience!


2 days ago
picture of a misty forest


2 days ago
picture of a misty forest
Please hold for one moment, I'll check with my manager.

Bread Crumbs

Default


Nav

Default


Pagination

Default

  • 1
  • 3
  • 4
  • 5

    • Empty State

    Default

    Empty State Image

    Title Explains

    Body text goes into detail with possible steps for user to take

    Loading Inline

    Default

    Loading
    Loading
    Loading

    Progress Pills

    Default


    Progress Simple

    Default


    Progress Step

    Default



    • step 1
    • step 2
    • step 3
    • step 4
    • step 5


    • step 1
    • step 2
    • step 3

    Timeline

    Default

    Conversation started
    Trip #12422
    Refund issue #12422
    Conversation resolved


    Jackson Heights

    37-27 74th Street

    Greenpoint

    81 Gate St Brooklyn

    Skeleton Loading

    Default


    Badge

    Rectangle

    +1
    +4
    +1000

    Online Status

    Colors


    Pill

    Default

    Default

    Hashtag

    Hashtag Types

    P#470297


    H#123456


    A#345678


    #123456

    Body

    Default

    I am a body kit
    I am a body kit (Light)
    I am a body kit (Lighter)
    I am a body kit (Link)
    I am a body kit (Error)
    I am a body kit (Success)

    Caption

    Default

    Caption
    Caption Large
    Subcaption

    Detail

    Default

    I am a detail kit

    Title

    Default UI

    Default Title

    Title 1

    Title 2

    Title 3

    Title 4


    Link

    Color


    Avatar

    Default

    Terry Johnson

    Terry Johnson Standing

    Terry Johnson Standing

    Terry Johnson Standing

    Terry Johnson Standing

    Terry Johnson Standing

    Multiple Users

    Default

    Patrick Welch
    Lucille Sanchez
    Beverly Reyes
    +2


    Shawn Palmer
    Andrew Murray

    Multiple Users Stacked

    Default

    Patrick Welch


    Patrick Welch
    Lucille Sanchez


    Patrick Welch
    +4

    User

    Default

    Anna Black

    Anna Black

    Remodeling Consultant
    Anna Black

    Anna Black

    Remodeling Consultant
    Anna Black

    Anna Black


    Anna Black


    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
    © 2023-24, ALL RIGHTS RESERVED