Simple Simple
Logo
v1.0.0
Components
Dropdown
Add Project Member View Activity Settings
Workspace Tools
Team Operations
Account Settings
English English German Deutsch Italian Italiano Hindi हिन्दी Spanish Español Russian Русский
Notifications
9 Alerts
Backup completed successfully
Just now
New bug reported in Payment Module
8 minutes ago
User Avatar Olivia Bennett shared a new report in Weekly Planning
2 minutes ago
User Avatar Lucas Gray mentioned you in Sprint Standup
14 minutes ago
Security policy update required for your account
22 minutes ago
You've received a new support ticket
18 minutes ago
System maintenance starts at 12 AM
1 hour ago
View All Notifications
Welcome back!
Profile Notifications Balance: $985.25 Account Settings Support Center
Lock Screen Log Out
user-image
Maxine Kennedy
Admin Head
UI Essentials

Core UI Elements

Explore essential components like buttons, alerts, images, badges, and more to build consistent, responsive interfaces.

Buttons
Default Buttons
Rounded Buttons
Outline Buttons
Soft Buttons
Ghost Buttons
Button Sizes
Disabled Buttons
Block Buttons
Toggle Buttons
Button Tags
Link
Icon Buttons
Button Groups
Avatar & Image Styles
image

.img-fluid

image

.rounded

image

.rounded

image

.rounded-circle

image

.img-thumbnail

image

.rounded-circle .img-thumbnail

Avatar Sizes
image

.avatar-xs

xs

.avatar-xs

xs

.avatar-xs

image

.avatar-sm

sm

.avatar-sm

sm

.avatar-sm

image

.avatar-md

md

.avatar-md

md

.avatar-md

image

.avatar-lg

LG

.avatar-lg

LG

.avatar-lg

image

.avatar-xl

XL

.avatar-xl

XL

.avatar-xl

Avatar Sizes with Rounded
image

.avatar-xs

xs

.avatar-xs

xs

.avatar-xs

image

.avatar-sm

sm

.avatar-sm

sm

.avatar-sm

image

.avatar-md

md

.avatar-md

md

.avatar-md

image

.avatar-lg

LG

.avatar-lg

LG

.avatar-lg

image

.avatar-xl

XL

.avatar-xl

XL

.avatar-xl

Avatar Groups
K
H
L
G
K
H
L
G
D
9+
Badge Variations
Basic Badges
Default Primary Secondary Success Danger Warning Info Light Dark
Basic Pill Badges
Default Primary Secondary
Outline Badges
Primary Secondary Success
Outline Pill Badges
Primary Secondary Success
Lighten Badges
Primary Secondary Success
Lighten Pill Badges
Primary Secondary Success
Label Badges
Default Primary Secondary
Square Badges
0 1 2 3
Circle Badges
0 1 2 3
Positioned
Headings with Badges

h1.Example heading New

h2.Example heading New

h3.Example heading New

h4.Example heading New

h5.Example heading New
h6.Example heading New
Accordions Variations
Default Accordions

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.

This is the third 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.
Flush Accordions

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
Always Open Accordions

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.

This is the third 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.
Accordion Without Arrow

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.

This is the third 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.
Bordered Accordions

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.

This is the third 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.
Custom Icon Accordion

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.

This is the third 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 Variations
Default Alert
Dismissing Alert with Solid Colors
Link Color
Additional Content
Cards Variations

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button
Basic Card with Title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button
Card with Background Color

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button
Card with Background Color + Gradient

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button
Card with Header
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Card with Sub Header
Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Featured Card Title
Go somewhere
2 days ago
Advanced Card
Card with Action Tools

With supporting text below as a natural lead-in to additional content.

Go somewhere
Card with Action Tools & Background Colors

With supporting text below as a natural lead-in to additional content.

Go somewhere
Card with Action Tools

With supporting text below as a natural lead-in to additional content.

Go somewhere
Bordered Card
Card with Colored Border

With supporting text below as a natural lead-in to additional content.

Button
Card with Simple Border

With supporting text below as a natural lead-in to additional content.

Button
Card with Double Border

With supporting text below as a natural lead-in to additional content.

Button
Stretched Link
...
Card with stretched link
Go somewhere
...
Card with stretched link

Some quick example text to build on the card up the bulk of the card's content.

...
Card with stretched link
Go somewhere
...
Card with stretched link

Some quick example text to build on the card up the bulk of the card's content.

Card Group
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

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago
Videos Variations
Responsive embed video 21:9
Responsive embed video 1:1
Responsive embed video 16:9
Responsive embed video 4:3
Typography Variations
Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Headings

Heading 1 Sub Heading

Heading 2 Sub Heading

Heading 3 Sub Heading

Heading 4 Sub Heading

Heading 5 Sub Heading
Heading 6 Sub Heading
Naming a Source

"Design is not just what it looks like and feels like. Design is how it works."

Steve Jobs in Design Philosophy
Inline Text Elements

Styling for common inline HTML5 elements.

Your title goes here

You can use the mark tag to highlight text.

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 thedocument.

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 italicized text.

Nulla attr vitae elit libero, a pharetra augue.

Unordered
  • Fully responsive design
  • Built with Bootstrap 5 framework
  • Clean and modern UI components
  • Cross-browser compatibility
  • Multiple form elements and validations
    • Rich input controls
    • Step-based form wizards
    • Real-time validation
    • Customizable styles
  • Advanced chart and graph libraries
  • Integrated data tables and sorting
  • Developer-friendly code structure
Ordered
  1. Install all dependencies
  2. Configure project environment settings
  3. Set up folder structure and routing
  4. Integrate UI components and layout
  5. Implement core modules
    1. Authentication & Authorization
    2. Dashboard widgets and metrics
    3. User profile management
    4. Notification & messaging systems
  6. Connect backend APIs and test data flow
  7. Optimize performance and responsive design
  8. Final testing and deployment
Unstyled
  • Install project dependencies
  • Configure build settings
    • Update environment variables
  • Setup project structure and routes
  • Launch local development server
Abbreviations

attr

HTML

Alignment

"Design is not just what it looks like and feels like. Design is how it works."

Steve Jobs in Steve Jobs Biography

"Simplicity is the ultimate sophistication."

Leonardo da Vinci in Design Philosophy
Inline
  • This is a list item.
  • And another one.
  • But they're displayed inline.
Blockquotes

"Good design is obvious. Great design is transparent."

Joe Sparano in Design Principles

Use text utilities as needed to change the alignment of your blockquote.

"First, solve the problem. Then, write the code."

John Johnson in Developer Wisdom

"Simplicity is the soul of efficiency."

Austin Freeman in Efficiency in Design
Description List Alignment
Dashboard
An overview panel that displays key metrics and activity summaries.
Form Validation

Includes validation for all major input types with real-time feedback.

Built-in support for custom rules and error messages.

Responsive Grid
Utilizes Bootstrap’s flexible grid layout for consistent responsiveness across devices.
User Management Module
Easily manage roles, permissions, and user profiles from a single interface.
Nested Features
Email Notifications
Customizable alerts and triggers integrated into app workflows.
© Simple By Coderthemes
59.5GB of 200GB Free.
Admin Customizer

Easily configure layout, styles, and preferences for your admin interface.

Color Scheme
Light
Dark
Topbar Color
Light
Dark
Sidenav Color
Light
Dark
Sidebar Size
Default
Collapse
Layout Position
Buy Now