Relume Library only works on desktop
Switch to a desktop to start building.
Design and build better websites in hours, not days, with Relume Library
Sign up for free
Now open!
Vote on new
Relume components
Vote on what components you'd like to see added to our roadmap next month.
Vote with one click
Skip
What's New - November, 2023
Text Editing in Site Builder, Uncommon Components & More
We've shipped new components, features and updates for November Component Day.
Skip
Learn more
7 days left in your trial

Application UI Components

By Relume
Preferences
HomeAll ComponentsApplication UI Components
100
Components
Filters
Clear all
Categories
All
Application Shells
Sidebars
Topbars
Page Headers
Section Headers
Card Headers
Sign Up and Log In Pages
Sign Up and Log In Modals
Tables
Stacked Lists
Grid Lists
Stat Cards
Forms
Description Lists
+ .View more
Layout
Text Alignment
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Content Alignment
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Columns
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
- .View less
+ .View more
Elements
- .View less
+ .View more
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Interactions
Uses Interactions
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Filter Top
Filter Left
Menu Left
Menu Center
Menu Right
Logo Left
Logo Center
Image/Video Bottom
Image/Video Top
Image/Video Right
Image/Video Center
Image/Video Left
Table
5+ Columns
4 Columns
3 Columns
2 Columns
1 Column
Text Align Center
Text Align Left
Toggles
Radio Buttons
Checkboxes
Side Panel
Sidebar
Topbar
Progress Bar
Loading Animation
Table of Contents
Tags
Cards
Pagination
Filters
Modal
Image Lightbox
Mega Menu
Newsletter Sign Up
Hamburger Menu (Desktop)
Contact Details
Rich Text
Dropdown
Buttons
Form
Image
Text Only
Multiple Images
Video Lightbox
Background Image
Background Video
Icons
Logos
Slider
Tabs
Accordion
Search Bar
Map
Star Rating
Avatar Image
Featured Blog Posts
Author
Date
List
Sort by:
Name (A-Z)
Sorry, no components found
There are no components with this criteria. Try changing your search.
Clear filters
Request component
Submit requests on Slack
Have any requests or suggestions that would make Relume Library more useful for you? Join our Slack community and share them to the channel #component-requests.
Join our Slack
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 1
.
application-shells/application-shell1

Application Shell 1

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 2
.
application-shells/application-shell2

Application Shell 2

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 3
.
application-shells/application-shell3

Application Shell 3

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 4
.
application-shells/application-shell4

Application Shell 4

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 5
.
application-shells/application-shell5

Application Shell 5

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 6
.
application-shells/application-shell6

Application Shell 6

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 7
.
application-shells/application-shell7

Application Shell 7

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 8
.
application-shells/application-shell8

Application Shell 8

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 9
.
application-shells/application-shell9

Application Shell 9

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 10
.
application-shells/application-shell10

Application Shell 10

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 11
.
application-shells/application-shell11

Application Shell 11

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 12
.
application-shells/application-shell12

Application Shell 12

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 13
.
application-shells/application-shell13

Application Shell 13

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 14
.
application-shells/application-shell14

Application Shell 14

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 15
.
application-shells/application-shell15

Application Shell 15

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Application Shell 16
.
application-shells/application-shell16

Application Shell 16

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
July 3, 2023
Category
Application Shells
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Card Header 1
.
card-headers/card-header1_component

Card Header 1

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
September 5, 2022
Category
Card Headers
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Card Header 2
.
card-headers/card-header2_component

Card Header 2

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
September 5, 2022
Category
Card Headers
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Description List 1
.
description-lists/description-list1_component

Description List 1

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
October 3, 2023
Category
Description Lists
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Description List 2
.
description-lists/description-list2_component

Description List 2

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
October 3, 2023
Category
Description Lists
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Description List 3
.
description-lists/description-list3_component

Description List 3

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
October 3, 2023
Category
Description Lists
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Description List 4
.
description-lists/description-list4_component

Description List 4

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
October 3, 2023
Category
Description Lists
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Form 1
.
forms/form1_component

Form 1

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
October 3, 2023
Category
Forms
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Form 2
.
forms/form2_component

Form 2

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
October 3, 2023
Category
Forms
Power ups
Examples

Related UI Elements

View All
Interactions
Uncommon
A Level 3 Sidebar or Topbar should be used on its own.
Level 3
A Level 2 Sidebar should be paired with a Level 1 Topbar.
A Level 2 Topbar should be paired with a Level 1 Sidebar.
Level 2
A Level 1 Sidebar should be paired with a Level 2 Topbar.
A Level 1 Topbar should be paired with a Level 2 Sidebar.
Level 1
Form 3
.
forms/form3_component

Form 3

Save
Copy
Save
Saved
Saved
Copying...
Copying...
Upgrade
Watch Tutorial
Description
Description goes here
Created by
Relume
Last updated
October 3, 2023
Category
Forms
Power ups
Examples

Related UI Elements

View All