UI Design System

186 Components

186
Total Elements
54
Components
36
Modules
25
Pages
12
Templates
Filters:
Showing 186 of 186 elements
🔘

Primary Button

available

Main action button

ComponentsButtons
Click handlerLoading stateDisabled state
🔘

Secondary Button

available

Secondary action button

ComponentsButtons
Outline styleHover effectsRipple animation
🔘

Tertiary Button

available

Tertiary action button

ComponentsButtons
Ghost styleText onlyMinimal design
🔘

Icon Button

available

Button with icon

ComponentsButtons
Icon supportTooltipBadge
🔘

Floating Action Button (FAB)

available

Floating action button

ComponentsButtons
Fixed positionExpandable menuAnimation
🔘

Toggle Button

available

Toggle between states

ComponentsButtons
State managementIconsLabels
🔘

Dropdown Button

available

Button with dropdown menu

ComponentsButtons
Menu itemsIconsKeyboard navigation
📝

Text Input

available

Basic text input field

ComponentsInputs
PlaceholderValidationClear button
🔐

Password Input

available

Password input with visibility toggle

ComponentsInputs
Show/hide toggleStrength meterValidation
📧

Email Input

available

Email input with validation

ComponentsInputs
Email validationAutocompleteError states
🔢

Number Input

available

Number input with spinner

ComponentsInputs
Min/maxStep controlSpinner buttons
📅

Date Input

available

Date picker input

ComponentsInputs
Calendar popupDate rangeKeyboard input

Time Input

available

Time picker input

ComponentsInputs
Hour/minuteAM/PMKeyboard input
📆

DateTime Input

available

Combined date and time picker

ComponentsInputs
Date + TimeTimezone supportRange selection
🎨

Color Input

available

Color picker input

ComponentsInputs
Color paletteHex inputRGB/HSL
📊

Range Input

available

Range slider input

ComponentsInputs
Min/maxStep controlDual handle
📁

File Input

available

File upload input

ComponentsInputs
Drag & dropMultiple filesProgress bar
🔍

Search Input

available

Search input with suggestions

ComponentsInputs
AutocompleteClear buttonDebounce
☎️

Telephone Input

available

Phone number input

ComponentsInputs
Format maskCountry codesValidation
🌐

URL Input

available

URL input with validation

ComponentsInputs
URL validationProtocol supportError states

Dropdown Select

available

Single select dropdown

ComponentsSelectors
SearchGroupingCustom rendering
☑️

Multi-Select Dropdown

available

Multiple select dropdown

ComponentsSelectors
CheckboxesSearchTags
☑️

Checkbox

available

Checkbox input

ComponentsSelectors
Indeterminate stateLabelsDisabled state

Radio Button

available

Radio button input

ComponentsSelectors
GroupsLabelsDisabled state
⚙️

Toggle Switch

available

Toggle switch input

ComponentsSelectors
On/off stateLabelsDisabled state
📊

Slider

available

Slider selector

ComponentsSelectors
Min/maxStepDual handle

Rating Selector

available

Star rating selector

ComponentsSelectors
Half starsHover previewLabels
📢

Toast Notification

available

Toast message notification

ComponentsNotifications
Auto-dismissActionsPosition control
⚠️

Alert Dialog

available

Alert dialog box

ComponentsNotifications
Confirm/CancelCustom contentKeyboard support
📬

Snackbar

available

Snackbar notification

ComponentsNotifications
Action buttonAuto-dismissPosition
🪟

Modal

available

Modal dialog

ComponentsNotifications
BackdropKeyboard supportScrollable content
💬

Popover

available

Popover notification

ComponentsNotifications
PositioningArrowClick outside
💡

Tooltip

available

Tooltip hint

ComponentsNotifications
PositioningDelayArrow
📍

Top Navigation Bar

available

Top navigation bar

ComponentsNavigation
LogoMenu itemsUser menu
📋

Sidebar Navigation

available

Sidebar navigation

ComponentsNavigation
CollapsibleNested itemsIcons
📍

Bottom Navigation Bar

available

Bottom navigation bar

ComponentsNavigation
IconsLabelsActive state
🔗

Breadcrumbs

available

Breadcrumb navigation

ComponentsNavigation
Clickable itemsSeparatorsCurrent page
◄►

Pagination

available

Pagination controls

ComponentsNavigation
Previous/NextPage numbersDisabled states
📑

Tabs

available

Tab navigation

ComponentsNavigation
SwipeableIconsLazy loading
⬇️

Accordion

available

Accordion menu

ComponentsNavigation
Collapsible sectionsSingle/multiple openAnimations
1️⃣

Stepper

available

Step indicator

ComponentsNavigation
Linear/non-linearEditable stepsOptional steps
📊

Table

available

Data table

ComponentsData Display
SortingFilteringPagination
📝

List

available

List component

ComponentsData Display
DividersAvatarsActions
🗂️

Card

available

Card container

ComponentsData Display
Header/FooterMediaActions

Grid

available

Grid layout

ComponentsData Display
ResponsiveGapsAuto-flow
⏱️

Timeline

available

Timeline component

ComponentsData Display
Vertical/HorizontalIconsConnectors

Progress Bar

available

Progress bar

ComponentsData Display
PercentageStripedAnimated

Spinner

available

Loading spinner

ComponentsData Display
SizesColorsVariants

Skeleton Loader

available

Skeleton loading

ComponentsData Display
ShapesAnimationResponsive
🔴

Badge

available

Badge indicator

ComponentsData Display
ColorsSizesDot variant
🏷️

Tag

available

Tag component

ComponentsData Display
RemovableColorsIcons
👤

Avatar

available

Avatar component

ComponentsData Display
Image/InitialsSizesStatus
📊

Data Table

available

Advanced data table

ComponentsData Display
SortingFilteringSelection
◄►

Pagination Controls

available

Advanced pagination

ComponentsData Display
Jump to pageRows per pageInfo text
🔐

Login Module

available

User login functionality

ModulesAuthentication
Email/PasswordRemember meSocial login
📝

Registration Module

available

User registration

ModulesAuthentication
Form validationEmail verificationTerms acceptance
🔑

Password Recovery Module

available

Password reset flow

ModulesAuthentication
Email verificationToken validationNew password
🔐

Two-Factor Authentication Module

available

2FA setup and verification

ModulesAuthentication
SMS/Email/AppBackup codesDevice trust
👥

Social Login Module

available

Social media login

ModulesAuthentication
OAuthMultiple providersProfile sync
👤

User Profile Module

available

User profile management

ModulesUser Management
Edit profileAvatar uploadAccount info
⚙️

User Settings Module

available

User settings

ModulesUser Management
PreferencesNotificationsPrivacy
👥

User Roles and Permissions Module

available

RBAC management

ModulesUser Management
Role assignmentPermission matrixAudit log
📋

User Activity Log Module

available

Activity tracking

ModulesUser Management
Login historyAction logExport
🛍️

Product Listing Module

available

Product catalog

ModulesE-commerce
FilteringSortingPagination
📦

Product Detail Module

available

Product details page

ModulesE-commerce
ImagesReviewsRecommendations
🛒

Shopping Cart Module

available

Shopping cart

ModulesE-commerce
Add/RemoveQuantityTotals
💳

Checkout Module

available

Checkout process

ModulesE-commerce
ShippingPaymentReview
📜

Order History Module

available

Order management

ModulesE-commerce
Order listDetailsTracking
💰

Payment Gateway Module

available

Payment processing

ModulesE-commerce
Multiple providersSecureWebhooks
📝

Blog Module

available

Blog functionality

ModulesContent Management
PostsCommentsCategories
📄

Article Module

available

Article management

ModulesContent Management
Rich editorPublishingVersioning
💬

Comment Module

available

Comment system

ModulesContent Management
ThreadingModerationNotifications
📁

Category Module

available

Category management

ModulesContent Management
HierarchyTaggingFiltering
🏷️

Tag Module

available

Tag management

ModulesContent Management
Auto-taggingCloudSuggestions
📊

User Analytics Module

available

User behavior tracking

ModulesAnalytics
EventsFunnelsCohorts

Performance Analytics Module

available

Performance metrics

ModulesAnalytics
Page speedCore Web VitalsErrors
🎯

Conversion Tracking Module

available

Conversion tracking

ModulesAnalytics
GoalsFunnelsAttribution
🧪

A/B Testing Module

available

A/B testing framework

ModulesAnalytics
ExperimentsVariantsStatistics
💬

Chat Module

available

Real-time chat

ModulesCommunication
MessagesTyping indicatorFile sharing
📧

Messaging Module

available

Messaging system

ModulesCommunication
ThreadsMentionsSearch
🔔

Notification Module

available

Notification system

ModulesCommunication
PushEmailIn-app
📨

Email Module

available

Email functionality

ModulesCommunication
TemplatesSchedulingTracking
📁

File Upload Module

available

File upload

ModulesFile Management
Drag & dropProgressValidation
⬇️

File Download Module

available

File download

ModulesFile Management
BatchResumeCompression
👁️

File Preview Module

available

File preview

ModulesFile Management
Multiple formatsZoomDownload
🔗

File Sharing Module

available

File sharing

ModulesFile Management
LinksPermissionsExpiration

Task List Module

available

Task listing

ModulesTask Management
FilteringSortingBulk actions
📝

Task Detail Module

available

Task details

ModulesTask Management
DescriptionAttachmentsComments
👥

Task Assignment Module

available

Task assignment

ModulesTask Management
UsersTeamsNotifications
📊

Task Progress Module

available

Progress tracking

ModulesTask Management
StatusTimelineReports
🏠

Home Page

available

Landing page

PagesLanding Pages
Hero sectionFeaturesCTA
ℹ️

About Page

available

About page

PagesLanding Pages
TeamMissionHistory
📞

Contact Page

available

Contact page

PagesLanding Pages
FormMapSocial
🎯

Services Page

available

Services page

PagesLanding Pages
Service cardsPricingCTA
🖼️

Portfolio Page

available

Portfolio page

PagesLanding Pages
GalleryFiltersDetails
🔐

Login Page

available

Login page

PagesAuthentication Pages
FormSocial loginForgot password
📝

Registration Page

available

Registration page

PagesAuthentication Pages
FormValidationTerms
🔑

Forgot Password Page

available

Password recovery

PagesAuthentication Pages
Email inputInstructionsSupport
🔐

Reset Password Page

available

Password reset

PagesAuthentication Pages
Token validationNew passwordConfirmation
👤

User Profile Page

available

User profile

PagesUser Pages
EditAvatarStats
⚙️

User Settings Page

available

User settings

PagesUser Pages
PreferencesSecurityPrivacy
📊

User Dashboard Page

available

User dashboard

PagesUser Pages
OverviewWidgetsQuick actions
🛍️

Product Listing Page

available

Product catalog

PagesE-commerce Pages
GridFiltersSort
📦

Product Detail Page

available

Product details

PagesE-commerce Pages
ImagesReviewsRelated
🛒

Shopping Cart Page

available

Shopping cart

PagesE-commerce Pages
ItemsTotalsCheckout
💳

Checkout Page

available

Checkout

PagesE-commerce Pages
StepsPaymentReview
📜

Order History Page

available

Order history

PagesE-commerce Pages
ListDetailsTracking
📝

Blog Page

available

Blog listing

PagesContent Pages
PostsFiltersPagination
📄

Article Page

available

Article page

PagesContent Pages
ContentSidebarRelated
📁

Category Page

available

Category page

PagesContent Pages
ItemsFiltersDescription
🏷️

Tag Page

available

Tag page

PagesContent Pages
ItemsRelated tagsCloud
📊

Admin Dashboard Page

available

Admin overview

PagesAdmin Pages
StatsChartsQuick actions
👥

User Management Page

available

User management

PagesAdmin Pages
ListEditDelete
📝

Content Management Page

available

Content management

PagesAdmin Pages
ListEditPublish
📊

Analytics Page

available

Analytics

PagesAdmin Pages
ChartsReportsExport
👤

User Dashboard

available

User dashboard

DashboardsUser Dashboard
ProfileActivitySettings
⚙️

Admin Dashboard

available

Admin dashboard

DashboardsAdmin Dashboard
UsersContentAnalytics
💰

E-commerce Dashboard

available

E-commerce dashboard

DashboardsE-commerce Dashboard
SalesProductsOrders
📊

Analytics Dashboard

available

Analytics dashboard

DashboardsAnalytics Dashboard
MetricsChartsReports
📊

Chart Widget

available

Chart widget

WidgetsData Widgets
Multiple typesInteractiveExport
🔗

Graph Widget

available

Graph widget

WidgetsData Widgets
NodesEdgesInteractive
📋

Table Widget

available

Table widget

WidgetsData Widgets
SortingFilteringPagination
📝

List Widget

available

List widget

WidgetsData Widgets
ItemsActionsSearch
⚠️

Alert Widget

available

Alert widget

WidgetsNotification Widgets
TypesIconsActions
📢

Toast Widget

available

Toast widget

WidgetsNotification Widgets
Auto-dismissActionsStacking
🔴

Badge Widget

available

Badge widget

WidgetsNotification Widgets
CountsColorsDot
🖼️

Image Widget

available

Image widget

WidgetsMedia Widgets
ResponsiveLazy loadZoom
🎬

Video Widget

available

Video widget

WidgetsMedia Widgets
PlayerControlsSubtitles
🎵

Audio Widget

available

Audio widget

WidgetsMedia Widgets
PlayerPlaylistVisualizer

Loader Widget

available

Loader widget

WidgetsUtility Widgets
AnimationsSizesColors

Placeholder Widget

available

Placeholder widget

WidgetsUtility Widgets
ShapesColorsAnimation
☠️

Skeleton Screen Widget

available

Skeleton widget

WidgetsUtility Widgets
ShapesAnimationResponsive
📝

Code Editor

available

Code editor

ToolsDevelopment Tools
Syntax highlightingAutocompleteThemes
🐛

Debugger

available

Debugger tool

ToolsDevelopment Tools
BreakpointsWatchStack trace
🔗

Version Control

available

Version control

ToolsDevelopment Tools
GitBranchesCommits
🔨

Build Tools

available

Build tools

ToolsDevelopment Tools
CompilationBundlingOptimization
📐

Wireframing Tool

available

Wireframing

ToolsDesign Tools
ShapesGridsExport
🎨

Prototyping Tool

available

Prototyping

ToolsDesign Tools
InteractionsAnimationPreview
🎨

Design System

available

Design system

ToolsDesign Tools
ComponentsTokensDocumentation
📖

Style Guide

available

Style guide

ToolsDesign Tools
ColorsTypographyComponents
📊

User Analytics Tool

available

User analytics

ToolsAnalytics Tools
EventsFunnelsCohorts

Performance Analytics Tool

available

Performance analytics

ToolsAnalytics Tools
MetricsMonitoringAlerts
🎯

Conversion Tracking Tool

available

Conversion tracking

ToolsAnalytics Tools
GoalsAttributionReports
🧪

A/B Testing Tool

available

A/B testing

ToolsAnalytics Tools
ExperimentsStatisticsResults
📝

Blog Card

available

Blog card

CardsContent Cards
ImageTitleExcerpt
📄

Article Card

available

Article card

CardsContent Cards
ThumbnailTitleDate
🛍️

Product Card

available

Product card

CardsContent Cards
ImagePriceRating
👤

User Card

available

User card

CardsContent Cards
AvatarNameRole

Task Card

available

Task card

CardsAction Cards
TitleStatusAssignee
📅

Event Card

available

Event card

CardsAction Cards
DateTimeLocation
🔔

Notification Card

available

Notification card

CardsAction Cards
IconMessageAction
⚠️

Alert Card

available

Alert card

CardsAction Cards
TypeMessageClose
🖼️

Gallery Card

available

Gallery card

CardsMedia Cards
ImagesLightboxCaptions
🎬

Video Card

available

Video card

CardsMedia Cards
ThumbnailPlay buttonDuration
☠️

Skeleton Card

available

Skeleton card

CardsUtility Cards
AnimationShapesResponsive

Placeholder Card

available

Placeholder card

CardsUtility Cards
IconTextAction
📝

Text Input Form

available

Text input form

FormsBasic Forms
LabelsValidationError messages
🔐

Password Input Form

available

Password form

FormsBasic Forms
Visibility toggleStrength meterConfirmation
📧

Email Input Form

available

Email form

FormsBasic Forms
ValidationAutocompleteError states
🔢

Number Input Form

available

Number form

FormsBasic Forms
Min/maxStepSpinner
1️⃣

Multi-Step Form

available

Multi-step form

FormsAdvanced Forms
StepsProgressValidation

Form Validation Form

available

Form with validation

FormsAdvanced Forms
Real-timeError messagesSuccess state
📤

Form Submission Form

available

Form submission

FormsAdvanced Forms
Loading stateError handlingSuccess message
🔐

Login Form

available

Login form

FormsSpecialized Forms
Email/PasswordRemember meForgot password
📞

Contact Form

available

Contact form

FormsSpecialized Forms
NameEmailMessage
🏠

Landing Page Template

available

Landing page template

TemplatesPage Templates
HeroFeaturesCTA
📝

Blog Page Template

available

Blog template

TemplatesPage Templates
PostsSidebarPagination
📦

Product Page Template

available

Product template

TemplatesPage Templates
ImagesDetailsReviews
👤

User Profile Template

available

Profile template

TemplatesPage Templates
AvatarInfoStats
🔘

Button Template

available

Button template

TemplatesComponent Templates
VariantsSizesStates
📝

Input Template

available

Input template

TemplatesComponent Templates
TypesStatesValidation
🗂️

Card Template

available

Card template

TemplatesComponent Templates
LayoutsContentActions

Grid Layout Template

available

Grid layout

TemplatesLayout Templates
ResponsiveGapsAlignment
↔️

Flexbox Layout Template

available

Flexbox layout

TemplatesLayout Templates
DirectionWrapAlignment
🧱

Masonry Layout Template

available

Masonry layout

TemplatesLayout Templates
ColumnsGapsResponsive
📨

Newsletter Template

available

Newsletter template

TemplatesEmail Templates
HeaderContentFooter
🎉

Promotional Template

available

Promotional template

TemplatesEmail Templates
OfferCTAFooter
🎨

Material Icons

available

Material Design icons

Icon PacksGeneral Icon Packs
500+ iconsMultiple sizesOutlined/Filled
🎨

Font Awesome

available

Font Awesome icons

Icon PacksGeneral Icon Packs
1000+ iconsSolid/RegularBrands
🎨

Ionicons

available

Ionicons

Icon PacksGeneral Icon Packs
1000+ iconsiOS/MD styleOutlined/Filled
🎨

Bootstrap Icons

available

Bootstrap icons

Icon PacksGeneral Icon Packs
1500+ iconsSVGCustomizable
🏢

Brand Logos

available

Brand logos

Icon PacksBrand Icon Packs
100+ brandsOfficial colorsMultiple formats
👥

Social Media Icons

available

Social media icons

Icon PacksBrand Icon Packs
50+ platformsOfficial colorsConsistent style
💳

Payment Gateway Icons

available

Payment icons

Icon PacksBrand Icon Packs
30+ providersOfficial brandingMultiple sizes
⚕️

Medical Icons

available

Medical icons

Icon PacksSpecialized Icon Packs
200+ medical iconsHealthcare symbolsProfessional
🛍️

E-commerce Icons

available

E-commerce icons

Icon PacksSpecialized Icon Packs
100+ shopping iconsProduct symbolsConsistent style