PulseUI Examples

Configure theme

Buttons

Default
Outlined
Small
Combined
Button upload

Dropdowns

Default
Outlined
Small
Combined

Forms

Inputs

Default
With Form.Field

Text areas

Default
With Form.Field

Selects

Default
With Form.Field

Radios

Checkboxes

Switches

Tables

First name

Federico

Last name

Baldini

Date of birth

20/01/1996

First name

Mario

Last name

Rossi

Date of birth

10/12/1990

First name

Luciano

Last name

Pavarotti

Date of birth

10/12/1990

Progress bars

Default

Titles

Title as h1

Title as h2

Title as h3

Title as h4

Title as h5
Title as h6

Typograhpies

Typography as small

Typography as medium

Typography as large

Typography as extraLarge

Typography as boldSmall

Typography as boldMedium

Typography as boldLarge

Typography as boldExtraLarge

Typography as leadSmall

Typography as leadMedium

Typography as leadLarge

Typography as leadExtraLarge

Chips

PrimarySecondaryTertiaryErrorWarningSuccessNeutral

Tooltips

A very nice tooltip to see here when hovering!
A very nice tooltip to see here when hovering!
A very nice tooltip to see here when hovering!

Alerts

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla
With title

Neutral

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla

Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla

Modals

Default
With close on outside click

Menu

Drawer

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla. Nullam sagittis lectus ut velit blandit iaculis. Etiam posuere, nunc ac iaculis fringilla, tellus sem tincidunt ipsum, ac mattis lacus velit a tellus.

Toasts

Default
With useToast

Cards

Default
Header
Title

Subtitle

Content
Footer
Grid
Header
Title

Subtitle

Content
Footer
Header
Title

Subtitle

Content
Footer
Header
Title

Subtitle

Content
Footer
Header
Title

Subtitle

Content
Footer

Tabs

  • First
  • Second
  • Third
  • Fourth
First section

Avatars

Default
With image
With initials

Comments

Default
Federico Baldini
Just now

This has been very useful for my research. Thanks as well!

Group
  • Federico Baldini
    Just now

    This has been very useful for my research. Thanks as well!

  • Federico Baldini
    Just now

    This has been very useful for my research. Thanks as well!

  • Federico Baldini
    Just now

    This has been very useful for my research. Thanks as well!

  • Federico Baldini
    Just now

    This has been very useful for my research. Thanks as well!

Group with separator
  • Federico Baldini
    Just now

    This has been very useful for my research. Thanks as well!

  • Federico Baldini
    Just now

    This has been very useful for my research. Thanks as well!

  • Federico Baldini
    Just now

    This has been very useful for my research. Thanks as well!

Loaders

Inline

Segments

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla. Nullam sagittis lectus ut velit blandit iaculis. Etiam posuere, nunc ac iaculis fringilla, tellus sem tincidunt ipsum, ac mattis lacus velit a tellus. Donec viverra, odio a bibendum imperdiet, turpis ipsum vestibulum ligula, at suscipit diam ipsum id nunc. Integer accumsan, libero id mollis imperdiet, metus velit finibus enim, eget suscipit lectus nisi vel nunc. Vivamus facilisis diam id finibus hendrerit. Sed quis lorem vitae odio commodo fermentum. Nullam eu condimentum tellus. Sed non efficitur lectus, eget scelerisque nunc. Donec id ullamcorper risus. Etiam sed mattis orci, ac rhoncus eros. In lobortis dolor dolor, consequat lobortis nunc ullamcorper non.
Grid
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla. Nullam sagittis lectus ut velit blandit iaculis. Etiam posuere, nunc ac iaculis fringilla, tellus sem tincidunt ipsum, ac mattis lacus velit a tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla. Nullam sagittis lectus ut velit blandit iaculis. Etiam posuere, nunc ac iaculis fringilla, tellus sem tincidunt ipsum, ac mattis lacus velit a tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla. Nullam sagittis lectus ut velit blandit iaculis. Etiam posuere, nunc ac iaculis fringilla, tellus sem tincidunt ipsum, ac mattis lacus velit a tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in euismod nulla. Nullam sagittis lectus ut velit blandit iaculis. Etiam posuere, nunc ac iaculis fringilla, tellus sem tincidunt ipsum, ac mattis lacus velit a tellus.

Gradient segments

Default
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Breadcrumbs

Default
With background