Kits




Avatar

Default

Terry Johnson

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Avatar Action Button

Default


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


Background

Light


Bread Crumbs

Default


Button

Button Variants


Button Toolbar

Default


Circle Icon Button

Default





Card

Default

Card content

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.

Bar Graph

Default


Circle Chart

Default Style


Distribution Bar

Default




Gauge

Default


Legend

Default

Windows
Doors
Roofing
Siding
Solar
Gutters
Insulation
Other

Line Graph

Default


Treemap Chart

Default


Dialog

Simple

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

Filter

Default

name

John Wick

city

San Francisco

Results:

1
sort by:
No Filter Selected

Results:

0
sort by:

Fixed Confirmation Toast

Default

Error Message



Items Successfully Moved



Scan to Assign Selected Items


Checkbox

Default


Date Picker

Default

Date Picker

File Upload

File Upload


Form

Default


Form Group

Default

First Name
Middle Intial
Last Name

Form Pill

Form Pill User

Anna Black

Anna Black



Anna Black


Multi Level Select

Default


Passphrase

Default


Phone Number Input

Default


Radio

Default




Rich Text Editor

Default


Select

Default


Selectable Card

Default


Selectable Card Icon

Default


Selectable Icon

Default


Selectable List

Default


Text Input

Default

First Name
Last Name
Phone Number
Email Address
Zip Code

Textarea

Default

Label

Label

Label

Toggle

Default State



Typeahead

Default

user



Use the above input to search for users on Github, and see the results as you type.
When you make a selection, you will see it appear in the list below

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.

Icon

Icon Default


Icon Circle

Default


Icon Stat Value

Default

64.18  
kw
Electric

24  
days
deadline

Icon Value

Default

93

5

15m

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

Flex

Default

Row


1
2
3
4


Column


1
2
3
4

Layout

Colors

Light
Body


Dark
Body


Gradient
Body

List

Default

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

Loading Inline

Light

Loading
Loading
Loading

Nav

Badge

Rectangle

+1
+4
+1000

Hashtag

Pill

Default

Default

Pagination

Default

  • 1
  • 3
  • 4
  • 5

  • Popover

    Default

    Click info for more details
     

    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

    Section Separator

    Line Separator


    Star Rating

    Default

    0

    3

    1.5

    5

    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

    Timeline

    Default

    Conversation started
    Trip #12422
    Refund issue #12422
    Conversation resolved


    Jackson Heights

    37-27 74th Street

    Greenpoint

    81 Gate St Brooklyn

    Date

    Default

    Oct 1

    Aug 2, 2012

    Sat
    Dec 2, 2017


    Oct 1

    Aug 2, 2012

    Sat
    Dec 2, 2017

    Date Range Inline

    Default






    Date Range Stacked

    Default

    18 JUN

    2019

    20 MAR

    2020

    Date Stacked

    Default

    Oct


    Oct


    Date Time

    Default

    Sun
    Oct 1

    Sun
    Oct 1

    Oct 1

    Oct 2

    Date Time Stacked

    Default

    Oct


    Mar


    Oct


    Oct


    Date Year Stacked

    Default

    1 OCT

    2023


    1 OCT

    2023


    1 OCT

    2023

    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

    11:34a

    Oct 1 · 11:34a

    Oct 1, 2027 · 11:34a

    Oct 1, 2022 · 11:34a

    Weekday Stacked

    Default


    Tooltip

    Default

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

    Body

    Default

    I am a body kit
    I am a body kit (Light)
    I am a body kit (Lighter)
    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


    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

    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   %

    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.

    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.

    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

    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

    User Badge

    Default