Components
Accordions
No theme
This is the first item’s accordion body. It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item’s accordion body. It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Dark theme on container
This is the first item’s accordion body. It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item’s accordion body. It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Light theme on container
This is the first item’s accordion body. It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item’s accordion body. It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Dark theme on component
This is the first item’s accordion body. It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item’s accordion body. It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Light theme on component
This is the first item’s accordion body. It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
This is the second item’s accordion body. It is hidden by default, until the collapse
plugin adds the appropriate classes that we use to style each element. These classes control the overall
appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the
.accordion-body, though the transition does limit overflow.
Alerts
No theme
Success Success notification text goes here.
Info Information notification text goes here.
Warning Warning notification text goes here.
Error Error notification text goes here.
Dark theme on container
Success Success notification text goes here.
Info Information notification text goes here.
Warning Warning notification text goes here.
Error Error notification text goes here.
Light theme on container
Success Success notification text goes here.
Info Information notification text goes here.
Warning Warning notification text goes here.
Error Error notification text goes here.
Dark theme on component
Success Success notification text goes here.
Info Information notification text goes here.
Warning Warning notification text goes here.
Error Error notification text goes here.
Light theme on component
Success Success notification text goes here.
Info Information notification text goes here.
Warning Warning notification text goes here.
Error Error notification text goes here.
Back to top
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Badge
No theme
Notifications 4
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Dark theme on container
Notifications 4
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Light theme on container
Notifications 4
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Dark theme on component
Notifications 4
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Light theme on component
Notifications 4
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Breadcrumb
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
No theme
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Link
Link
Outline primary
Outline primary
Outline secondary
Outline secondary
Outline success
Outline success
Outline danger
Outline danger
Outline warning
Outline warning
Outline info
Outline info
Outline light
Outline light
Outline dark
Outline dark
YouTube YouTube Large button
Large button
Large split button Toggle Dropdown
Large split button Toggle Dropdown
Dark theme on container
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Link
Link
Outline primary
Outline primary
Outline secondary
Outline secondary
Outline success
Outline success
Outline danger
Outline danger
Outline warning
Outline warning
Outline info
Outline info
Outline light
Outline light
Outline dark
Outline dark
YouTube YouTube Large button
Large button
Large split button Toggle Dropdown
Large split button Toggle Dropdown
Light theme on container
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Link
Link
Outline primary
Outline primary
Outline secondary
Outline secondary
Outline success
Outline success
Outline danger
Outline danger
Outline warning
Outline warning
Outline info
Outline info
Outline light
Outline light
Outline dark
Outline dark
YouTube YouTube Large button
Large button
Large split button Toggle Dropdown
Large split button Toggle Dropdown
Dark theme on component
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Link
Link
Outline primary
Outline primary
Outline secondary
Outline secondary
Outline success
Outline success
Outline danger
Outline danger
Outline warning
Outline warning
Outline info
Outline info
Outline light
Outline light
Outline dark
Outline dark
YouTube YouTube Large button
Large button
Large split button Toggle Dropdown
Large split button Toggle Dropdown
Light theme on component
Primary
Primary
Secondary
Secondary
Success
Success
Danger
Danger
Warning
Warning
Info
Info
Light
Light
Dark
Dark
Link
Link
Outline primary
Outline primary
Outline secondary
Outline secondary
Outline success
Outline success
Outline danger
Outline danger
Outline warning
Outline warning
Outline info
Outline info
Outline light
Outline light
Outline dark
Outline dark
YouTube YouTube Large button
Large button
Large split button Toggle Dropdown
Large split button Toggle Dropdown
Card
No theme
Placeholder
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhere
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
An item
A second item
A third item
Dark theme on container
Placeholder
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhere
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
An item
A second item
A third item
Light theme on container
Placeholder
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhere
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
An item
A second item
A third item
Dark theme on component
Placeholder
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhere
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
An item
A second item
A third item
Light theme on component
Placeholder
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhere
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
An item
A second item
A third item
Carousel
No theme
Placeholder First slide
First slide label
Some representative placeholder content for the first slide.
Placeholder Second slide
Second slide label
Some representative placeholder content for the second slide.
Placeholder Third slide
Third slide label
Some representative placeholder content for the third slide.
Previous
Next
Dark theme on container
Placeholder First slide
First slide label
Some representative placeholder content for the first slide.
Placeholder Second slide
Second slide label
Some representative placeholder content for the second slide.
Placeholder Third slide
Third slide label
Some representative placeholder content for the third slide.
Previous
Next
Light theme on container
Placeholder First slide
First slide label
Some representative placeholder content for the first slide.
Placeholder Second slide
Second slide label
Some representative placeholder content for the second slide.
Placeholder Third slide
Third slide label
Some representative placeholder content for the third slide.
Previous
Next
Dark theme on component
Placeholder First slide
First slide label
Some representative placeholder content for the first slide.
Placeholder Second slide
Second slide label
Some representative placeholder content for the second slide.
Placeholder Third slide
Third slide label
Some representative placeholder content for the third slide.
Previous
Next
Light theme on component
Placeholder First slide
First slide label
Some representative placeholder content for the first slide.
Placeholder Second slide
Second slide label
Some representative placeholder content for the second slide.
Placeholder Third slide
Third slide label
Some representative placeholder content for the third slide.
Previous
Next
No theme
Close Close
Close
Close
Close
Close
Dark theme on container
Close Close
Close
Close
Close
Close
Light theme on container
Close Close
Close
Close
Close
Close
Dark theme on component
Close Close
Close
Close
Close
Close
Light theme on component
Close Close
Close
Close
Close
Close
Dropdowns
No theme
Action
Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Dark theme on container
Action
Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Light theme on container
Action
Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Dark theme on component
Action
Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Light theme on component
Action
Toggle Dropdown
Toggle Dropdown Action
Primary
Secondary
Success
Info
Warning
Danger
Primary
Secondary
Success
Info
Warning
Danger
Action
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Dark dropdown variant for retro-compatibility
Dropdown button
Action
Toggle Dropdown
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
List group
No theme
A list item
A list item
A list item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
A second button item
The current button
A disabled button item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
An item
A list item
A list item
A second button item
The current button
A disabled button item
Dark theme on container
A list item
A list item
A list item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
A second button item
The current button
A disabled button item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
An item
A list item
A list item
A second button item
The current button
A disabled button item
Light theme on container
A list item
A list item
A list item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
A second button item
The current button
A disabled button item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
An item
A list item
A list item
A second button item
The current button
A disabled button item
Dark theme on component
A list item
A list item
A list item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
A second button item
The current button
A disabled button item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
An item
A list item
A list item
A second button item
The current button
A disabled button item
Light theme on component
A list item
A list item
A list item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
A second button item
The current button
A disabled button item
A simple success list group item
A simple info list group item
A simple warning list group item
A simple danger list group item
A simple disabled info list group item
An item
A list item
A list item
A second button item
The current button
A disabled button item
Local navigation
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Modal
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Navbar
No theme
Ii
Dark theme on container
Ii
Light theme on container
Ii
Dark theme on component
Ii
Light theme on component
Ii
Navs & tabs
No theme
Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4
Dark theme on container
Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4
Light theme on container
Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4
Dark theme on component
Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4
Light theme on component
Content of Link A
Content of Link B
Content of Link C
Content of Link D
Content of Tab 2
Content of Tab 3
Content of Tab 4
Offcanvas
No theme
Button with data-bs-target
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Dropdown button
Dark theme on container
Button with data-bs-target
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Dropdown button
Light theme on container
Button with data-bs-target
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Dropdown button
Dark theme on component
Button with data-bs-target
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Dropdown button
Light theme on component
Button with data-bs-target
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Dropdown button
Orange navbar
No theme
Test
Dark theme on container
Test
Light theme on container
Test
Dark theme on component
Test
Light theme on component
Test
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Placeholders
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Popovers
No theme
And here’s some amazing content. It’s very engaging. Right?
Click to toggle popover
Dark theme on container
And here’s some amazing content. It’s very engaging. Right?
Click to toggle popover
Light theme on container
And here’s some amazing content. It’s very engaging. Right?
Click to toggle popover
Dark theme on component
And here’s some amazing content. It’s very engaging. Right?
Click to toggle popover
Light theme on component
And here’s some amazing content. It’s very engaging. Right?
Click to toggle popover
Progress
No theme
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Dark theme on container
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Light theme on container
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Dark theme on component
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Light theme on component
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Long label text for the progress bar, set to a dark color
Spinners
No theme
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Dark theme on container
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Light theme on container
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Dark theme on component
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Light theme on component
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Stepped process
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Stickers
No theme
69.99 €
39.99 €
Per month
39.99 € per month instead of 69.99 €
Dark theme on container
69.99 €
39.99 €
Per month
39.99 € per month instead of 69.99 €
Light theme on container
69.99 €
39.99 €
Per month
39.99 € per month instead of 69.99 €
Dark theme on component
69.99 €
39.99 €
Per month
39.99 € per month instead of 69.99 €
Light theme on component
69.99 €
39.99 €
Per month
39.99 € per month instead of 69.99 €
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Title bars
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Toasts
No theme
Hello, world! This is a toast message.
Dark theme on container
Hello, world! This is a toast message.
Light theme on container
Hello, world! This is a toast message.
Dark theme on component
Hello, world! This is a toast message.
Light theme on component
Hello, world! This is a toast message.
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Contents
Basic text elements
No theme
H1
H2
H3
H4
Paragraph
Link
First layer
Second layer
Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text
Keyboard input
Sample output
Address P: (123) 456-7890
Blockquote
Styles Blockquote
Abbr
Summary
Details
highlight
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as bold text too.
A generic square placeholder image with a gray border around it 200x200
Dark theme on container
H1
H2
H3
H4
Paragraph
Link
First layer
Second layer
Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text
Keyboard input
Sample output
Address P: (123) 456-7890
Blockquote
Styles Blockquote
Abbr
Summary
Details
highlight
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as bold text too.
A generic square placeholder image with a gray border around it 200x200
Light theme on container
H1
H2
H3
H4
Paragraph
Link
First layer
Second layer
Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text
Keyboard input
Sample output
Address P: (123) 456-7890
Blockquote
Styles Blockquote
Abbr
Summary
Details
highlight
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as bold text too.
A generic square placeholder image with a gray border around it 200x200
Dark theme on component
H1
H2
H3
H4
Paragraph
Link
First layer
Second layer
Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text
Keyboard input
Sample output
Address P: (123) 456-7890
Blockquote
Styles Blockquote
Abbr
Summary
Details
highlight
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as bold text too.
A generic square placeholder image with a gray border around it 200x200
Light theme on component
H1
H2
H3
H4
Paragraph
Link
First layer
Second layer
Third layer
Description lists
First description
Second title
Second description
Code example
Preformatted text
Variable text
Keyboard input
Sample output
Address P: (123) 456-7890
Blockquote
Styles Blockquote
Abbr
Summary
Details
highlight
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as bold text too.
A generic square placeholder image with a gray border around it 200x200
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Tables
No theme
Boosted tables basic and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables striped and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables when nested
# First Last Handle
Boosted nested table in active row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Dark theme on container
Boosted tables basic and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables striped and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables when nested
# First Last Handle
Boosted nested table in active row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Light theme on container
Boosted tables basic and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables striped and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables when nested
# First Last Handle
Boosted nested table in active row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Dark theme on component
Boosted tables basic and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables striped and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables when nested
# First Last Handle
Boosted nested table in active row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Light theme on component
Boosted tables basic and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables striped and hover look
# First Last Handle
1 Active Row @activeRow 2 Active Cell @activeCell 3 Random @random 4 Skye Island @scotland 5 Ring of Kerry @ireland
Boosted tables when nested
# First Last Handle
Boosted nested table in active row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Boosted nested table in striped row
# First Last Handle
1 Active Row @activeRow 2 Skye Island @scotland
Color
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Checkboxes & Radios
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Controls
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Helper
No theme
Helper for input
Input label
Helper for input
Dark theme on container
Helper for input
Input label
Helper for input
Light theme on container
Helper for input
Input label
Helper for input
Dark theme on component
Helper for input
Input label
Helper for input
Light theme on component
Helper for input
Input label
Helper for input
No theme
Button
Choose...
One
Two
Three
Options
Dark theme on container
Button
Choose...
One
Two
Three
Options
Light theme on container
Button
Choose...
One
Two
Three
Options
Dark theme on component
Button
Choose...
One
Two
Three
Options
Light theme on component
Button
Choose...
One
Two
Three
Options
Labels, fields & text
No theme
Form label
Form label
Form label
Form label
Form text helper
Dark theme on container
Form label
Form label
Form label
Form label
Form text helper
Light theme on container
Form label
Form label
Form label
Form label
Form text helper
Dark theme on component
Form label
Form label
Form label
Form label
Form text helper
Light theme on component
Form label
Form label
Form label
Form label
Form text helper
Quantity selector
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Range
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Select
No theme
Open this select menu
One
Two
Three
Open this select menu
One
Two
Three
Dark theme on container
Open this select menu
One
Two
Three
Open this select menu
One
Two
Three
Light theme on container
Open this select menu
One
Two
Three
Open this select menu
One
Two
Three
Dark theme on component
Open this select menu
One
Two
Three
Open this select menu
One
Two
Three
Light theme on component
Open this select menu
One
Two
Three
Open this select menu
One
Two
Three
Star rating
No theme
Star rating: rated 3 out of 5
Dark theme on container
Star rating: rated 3 out of 5
Light theme on container
Star rating: rated 3 out of 5
Dark theme on component
Star rating: rated 3 out of 5
Light theme on component
Star rating: rated 3 out of 5
Switches
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Validation
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Utilities
Background
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Borders
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Colors
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Link
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Helper
Color & Background (text-bg)
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Focus ring
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component
Icon link
No theme
Dark theme on container
Light theme on container
Dark theme on component
Light theme on component