← Back to Home

All Components

704 components available

APPLICATION UI

application shells → multi column

Constrained Three ColumnConstrained With Sticky ColumnsFull Width Secondary Column On RightFull Width Three ColumnFull Width With Narrow SidebarFull Width With Narrow Sidebar And Header

application shells → sidebar

Brand SidebarBrand Sidebar With HeaderDark SidebarDark Sidebar With HeaderLight SidebarLight Sidebar With Constrained Content AreaLight Sidebar With HeaderLight Sidebar With Off White Background

application shells → stacked

Brand Nav With OverlapBranded Nav With Compact White Page HeaderBranded Nav With White Page HeaderDark Nav With Compact White Page HeaderDark Nav With OverlapDark Nav With White Page HeaderLight Nav On Gray BackgroundLight Nav With Bottom BorderTwo Row Navigation With Overlap

data display → calendars

Borderless Side By SideBorderless StackedDay ViewDoubleMonth ViewSmall With MeetingsWeek ViewYear View

data display → description lists

Left AlignedLeft Aligned In CardLeft Aligned On DarkLeft Aligned StripedLeft Aligned With Inline ActionsNarrow With Hidden LabelsTwo Column

data display → stats

Simple In CardsSimple On DarkWith Brand IconWith Shared BordersWith Trending

elements → avatars

Avatar Group Stacked Bottom To TopAvatar Group Stacked Top To BottomCircular AvatarsCircular Avatars With Bottom NotificationCircular Avatars With Placeholder IconCircular Avatars With Placeholder InitialsCircular Avatars With Top NotificationRounded AvatarsRounded Avatars With Bottom NotificationRounded Avatars With Top NotificationWith Text

elements → badges

FlatFlat PillFlat Pill With DotFlat With DotFlat With Remove ButtonPill With BorderPill With Border And DotSmall FlatSmall Flat PillSmall Flat Pill With DotSmall Flat With DotSmall Pill With BorderSmall With BorderWith BorderWith Border And DotWith Border And Dot On DarkWith Border And Remove ButtonWith Border On Dark

elements → button groups

BasicIcon OnlyWith Checkbox And DropdownWith DropdownWith Stat

elements → buttons

Buttons With Leading IconButtons With Trailing IconCircular ButtonsPrimary ButtonsPrimary Buttons On DarkRounded Primary ButtonsRounded Secondary ButtonsSecondary ButtonsSecondary Buttons On DarkSoft Buttons

elements → dropdowns

SimpleWith DividersWith IconsWith Minimal Menu IconWith Simple Header

feedback → alerts

With Accent BorderWith ActionsWith DescriptionWith Dismiss ButtonWith Link On RightWith List

feedback → empty states

SimpleWith Dashed BorderWith RecommendationsWith Recommendations GridWith Starting PointsWith Templates

forms → action panels

SimpleSimple WellWith Button At Top RightWith Button On RightWith InputWith LinkWith ToggleWith Well

forms → checkboxes

List With Checkbox On RightList With DescriptionList With Inline DescriptionSimple List With Heading

forms → comboboxes

SimpleWith Check On LeftWith ImageWith Secondary TextWith Status Indicator

forms → form layouts

Labels On LeftStackedStacked On DarkTwo ColumnTwo Column With Cards

forms → input groups

Input With Add OnInput With Corner HintInput With Disabled StateInput With Gray Background And Bottom BorderInput With Hidden LabelInput With Inline Add OnInput With Inline Leading Add On And Trailing DropdownInput With Inline Leading And Trailing Add OnsInput With Inline Leading DropdownInput With Inset LabelInput With Keyboard ShortcutInput With LabelInput With Label And Help TextInput With Leading IconInput With Leading Icon And Trailing ButtonInput With Overlapping LabelInput With Pill ShapeInput With Trailing IconInput With Validation ErrorInputs With Inset Labels And Shared BordersInputs With Shared Borders

forms → radio groups

CardsColor PickerList With DescriptionList With Descriptions In PanelList With Inline DescriptionList With Radio On RightSimple Inline ListSimple ListSimple List With Radio On RightSimple TableSmall CardsStacked Cards

forms → select menus

Branded With Supported TextCustom With AvatarCustom With Check On LeftCustom With Status IndicatorSimple CustomSimple NativeWith Secondary Text

forms → sign in forms

SimpleSimple CardSimple No LabelsSimple On DarkSplit Screen

forms → textareas

SimpleWith Avatar And ActionsWith Preview ButtonWith Title And Pill ActionsWith Underline And Actions

forms → toggles

Short ToggleSimple ToggleToggle With IconWith Left Label And DescriptionWith Right Label

headings → card headings

SimpleWith ActionWith Avatar Meta And DropdownWith Avatar And ActionsWith DescriptionWith Description And Action

headings → page headings

Card With Avatar And StatsWith ActionsWith Actions And BreadcrumbsWith Actions And Breadcrumbs On DarkWith Actions On DarkWith Avatar And ActionsWith Banner ImageWith Filters And ActionWith Logo Meta And ActionsWith Meta Actions And BreadcrumbsWith Meta Actions And Breadcrumbs On DarkWith Meta And ActionsWith Meta And Actions On Dark

headings → section headings

SimpleWith ActionWith ActionsWith Actions And TabsWith Badge And DropdownWith DescriptionWith Inline TabsWith Input GroupWith LabelWith Tabs

layout → cards

Basic CardCard Edge To Edge On MobileCard With FooterCard With Gray BodyCard With Gray FooterCard With HeaderCard With Header And FooterWellWell Edge To Edge On MobileWell On Gray

layout → containers

Constrained To Breakpoint With Padded ContentConstrained With Padded ContentFull Width On Mobile Constrained To Breakpoint With Padded Content Above MobileFull Width On Mobile Constrained With Padded Content AboveNarrow Constrained With Padded Content

layout → dividers

With ButtonWith IconWith LabelWith Label On LeftWith TitleWith Title And ButtonWith Title On LeftWith Toolbar

layout → list containers

Card With DividersCard With Dividers Full Width On MobileFlat Card With DividersSeparate CardsSeparate Cards Full Width On MobileSimple With DividersSimple With Dividers Full Width On Mobile

layout → media objects

Aligned To BottomAligned To CenterBasicBasic ResponsiveMedia On RightNestedStretched To FitWide Responsive

lists → feeds

Simple With IconsWith CommentsWith Multiple Item Types

lists → grid lists

Actions With Shared BordersContact CardsContact Cards With Small PortraitsHorizontal Link CardsImages With DetailsLogos Cards With Description ListSimple Cards

lists → stacked lists

Full Width With Constrained ContentFull Width With LinksIn Card With LinksNarrowNarrow With ActionsNarrow With Badges On DarkNarrow With Small AvatarsNarrow With Small Avatars On DarkNarrow With Sticky HeadingsNarrow With Truncated ContentSimpleSimple On DarkTwo Columns With LinksWith Badges Button And Actions MenuWith Inline Links And Actions MenuWith Inline Links And Avatar GroupWith Links

lists → tables

Full WidthFull Width With Avatars On DarkFull Width With Constrained ContentSimpleSimple In CardSimple On DarkWith Avatars And Multi Line ContentWith BorderWith CheckboxesWith Condensed ContentWith Grouped RowsWith Hidden Columns On MobileWith Hidden HeadingsWith Sortable HeadingsWith Stacked Columns On MobileWith Sticky HeaderWith Striped RowsWith Summary RowsWith Uppercase HeadingsWith Vertical Lines

navigation → breadcrumbs

ContainedFull Width BarSimple With ChevronsSimple With Slashes

navigation → command palettes

Dark With IconsSemi Transparent With IconsSimpleSimple With PaddingWith FooterWith GroupsWith IconsWith Images And DescriptionsWith Preview

navigation → navbars

Dark With Quick ActionDark With SearchSimpleSimple DarkSimple Dark With Menu Button On LeftSimple With Menu Button On LeftWith Centered Search And Secondary LinksWith Centered Search And Secondary Links DarkWith Quick ActionWith SearchWith Search In Column Layout

navigation → pagination

Card Footer With Page ButtonsCentered Page NumbersSimple Card Footer

navigation → progress bars

BulletsBullets And TextCirclesCircles With TextPanelsPanels With BorderProgress BarSimple

navigation → sidebar navigation

BrandDarkLightWith Expandable SectionsWith Secondary Navigation

navigation → tabs

Bar With UnderlineFull Width Tabs With UnderlineSimple On DarkTabs In PillsTabs In Pills On GrayTabs In Pills With Brand ColorTabs With UnderlineTabs With Underline And BadgesTabs With Underline And Icons

navigation → vertical navigation

On GraySimpleWith BadgesWith IconsWith Icons And BadgesWith Secondary Navigation

overlays → drawers

Contact List ExampleCreate Project Form ExampleEmptyFile Details ExampleUser Profile ExampleWide Create Project Form ExampleWide EmptyWide Horizontal User Profile ExampleWith Background OverlayWith Branded HeaderWith Close Button On OutsideWith Sticky Footer

overlays → modal dialogs

Centered With Single ActionCentered With Wide ButtonsSimple AlertSimple Alert With Left Aligned ButtonsSimple With Dismiss ButtonSimple With Gray Footer

overlays → notifications

CondensedSimpleWith Actions BelowWith AvatarWith Buttons BelowWith Split Buttons

page examples → detail screens

Sidebar On DarkStacked

page examples → home screens

Sidebar On DarkStacked

page examples → settings screens

Sidebar On DarkStacked

ECOMMERCE

components → category filters

Sidebar FiltersWith Centered Text And Dropdown Product FiltersWith Dropdown Product FiltersWith Expandable Product Filter PanelWith Inline Actions And Expandable Sidebar Filters

components → category previews

Three ColumnThree Column With DescriptionWith Background Image And Detail OverlayWith Image BackgroundsWith Scrolling CardsWith Split Images

components → checkout forms

Multi StepSingle Step With Order SummarySplit With Order SummaryWith Mobile Order Summary OverlayWith Order Summary Sidebar

components → incentives

2x2 Grid With Illustrations3 Column With Icons3 Column With Icons And Supporting Text3 Column With Illustrations And Centered Text3 Column With Illustrations And Header3 Column With Illustrations And Heading3 Column With Illustrations And Split Header4 Column With Illustrations

components → order history

Invoice ListInvoice List With Quick ActionsInvoice PanelsInvoice Table

components → order summaries

Simple With Full Order DetailsWith Large Images And Progress BarsWith Progress BarsWith Split Image

components → product features

With Alternating SectionsWith Fading ImageWith Header Images And DescriptionsWith Image GridWith Split ImageWith Square ImagesWith TabsWith Tiered ImagesWith Wide Images

components → product lists

Card With Full DetailsSimpleWith Border GridWith Color Swatches And Horizontal ScrollingWith Cta LinkWith Image Overlay And Add ButtonWith Inline PriceWith Inline Price And Cta LinkWith Supporting TextWith Tall ImagesWith Tall Images And Cta Link

components → product overviews

Split With ImageWith Image Gallery And Expandable DetailsWith Image GridWith TabsWith Tiered Images

components → product quickviews

With Color And Size SelectorWith Color Selector Size Selector And Details LinkWith Color Selector And DescriptionWith Large Size Selector

components → promo sections

Full Width With Background ImageFull Width With Background Image And Large ContentFull Width With Overlapping Image TilesWith Background ImageWith Fading Background Image And TestimonialsWith Image TilesWith Offers And Split ImageWith Overlapping Image Tiles

components → reviews

Avatars With Separate DescriptionMulti ColumnSimple With AvatarsWith Summary Chart

components → shopping carts

ModalPopoverSingle ColumnSlide OverTwo Column With Quantity DropdownWith Extended Summary

components → store navigation

With Centered Logo And Featured CategoriesWith Double Column And Persistent Mobile NavWith Featured CategoriesWith Image GridWith Simple Menu And Promo

page examples → category pages

With Image Header And Detail Product GridWith Large Images And Filters SidebarWith Product Grid And PaginationWith Text Header And Image Product GridWith Text Header And Simple Product Grid

page examples → checkout pages

Multi StepSingle Step With Order SummarySplit With Order SummaryWith Mobile Order Summary OverlayWith Order Summary Sidebar

page examples → order detail pages

Simple With Full Order DetailsWith Large Images And Progress BarsWith Progress Bars

page examples → order history pages

SimpleWith Invoice ListWith Invoice List And Quick ActionsWith Invoice PanelsWith Invoice Tables

page examples → product pages

With Expandable Product DetailsWith Featured DetailsWith Image GridWith Related ProductsWith Tabs And Related Products

page examples → shopping cart pages

Simple With Policy GridWith Policy Grid And Extended SummaryWith Related Products

page examples → storefront pages

With Dark Nav And FooterWith Image Tiles And Feature SectionsWith Offers And TestimonialsWith Overlapping Image Tiles And Perks

MARKETING

elements → banners

Bottom AlignedFloating At BottomFloating At Bottom CenteredLeft AlignedOn BrandOn DarkPrivacy Notice CenteredPrivacy Notice Full WidthPrivacy Notice Left AlignedPrivacy Notice Right AlignedWith Background GlowWith ButtonWith Link

elements → flyout menus

Full WidthFull Width Two ColumnsSimpleSimple With DescriptionsStacked With Footer ActionsStacked With Footer ListTwo Column

elements → headers

ConstrainedFull WidthOn Brand BackgroundOn Dark BackgroundWith Call To ActionWith Centered LogoWith Full Width Flyout MenuWith Icons In Mobile MenuWith Left Aligned NavWith Multiple Flyout MenusWith Right Aligned NavWith Stacked Flyout Menu

feedback → 404 pages

SimpleSplit With ImageWith Background ImageWith Navbar And FooterWith Popular Pages

page examples → about pages

DarkWith Image TilesWith Timeline And Stats

page examples → landing pages

With Background Image Hero And Pricing SectionWith Large Screenshot And TestimonialWith Mobile Screenshot And Testimonials GridWith Screenshots And Stats

page examples → pricing pages

With Comparison TableWith Four TiersWith Three Tiers And Testimonials

sections → bento grids

Three Column Bento GridTwo Row Bento GridTwo Row Bento Grid On Dark

sections → blog sections

Single ColumnSingle Column With ImagesThree ColumnThree Column With Background ImagesThree Column With ImagesWith Featured PostWith Photo And List

sections → contact sections

CenteredSide By Side GridSimple CenteredSimple Four ColumnSplit With ImageSplit With PatternSplit With Pattern On DarkWith Testimonial

sections → content sections

CenteredSplit With ImageTwo Columns With ScreenshotWith Image TitlesWith Sticky Product ScreenshotWith TestimonialWith Testimonial And Stats

sections → cta sections

Centered On Dark PanelDark Panel With App ScreenshotSimple CenteredSimple Centered On BrandSimple Centered On DarkSimple JustifiedSimple Justified On Light BrandSimple StackedSplit With ImageTwo Columns With Photo On DarkWith Image Tiles

sections → faq sections

Centered AccordionCentered Accordion On DarkOffset With Supporting TextSide By SideThree ColumnsThree Columns On DarkThree Columns With Centered IntroductionTwo ColumnsTwo Columns On DarkTwo Columns With Centered Introduction

sections → feature sections

Centered 2x2 GridContained In PanelOffset 2x2 GridOffset With Feature ListSimpleSimple 3x2 On DarkSimple Three Column With Large IconsSimple Three Column With Large Icons On DarkSimple Three Column With Small IconsSimple Three Column With Small Icons On DarkWith Code Example PanelWith Large Bordered ScreenshotWith Large Bordered Screenshot On DarkWith Large ScreenshotWith Large Screenshot On DarkWith Product ScreenshotWith Product Screenshot On DarkWith Product Screenshot On LeftWith Product Screenshot PanelWith Testimonial

sections → footers

4 Column Simple4 Column Simple On Dark4 Column With Call To Action4 Column With Call To Action On Dark4 Column With Company Mission4 Column With Company Mission On Dark4 Column With Newsletter4 Column With Newsletter Below4 Column With Newsletter Below On Dark4 Column With Newsletter On DarkSimple CenteredSimple Centered On DarkSimple With Social LinksSimple With Social Links On Dark

sections → header

CenteredCentered On DarkCentered With Background ImageCentered With EyebrowSimpleSimple On DarkSimple With Background ImageSimple With EyebrowWith CardsWith Stats

sections → heroes

Simple CenteredSimple Centered With Background ImageSplit With Code ExampleSplit With ImageSplit With ScreenshotSplit With Screenshot On DarkWith Angled Image On RightWith App ScreenshotWith App Screenshot On DarkWith Image TilesWith Offset ImageWith Phone Mockup

sections → logo clouds

GridGrid On DarkSimpleSimple Left AlignedSimple Left Aligned On DarkSimple On DarkSimple With Call To ActionSimple With Call To Action On DarkSimple With HeadingSimple With Heading On DarkSplit With Logos On RightSplit With Logos On Right On Dark

sections → newsletter sections

Centered CardSide By Side On CardSide By Side With DetailsSimple Side By SideSimple Side By Side On BrandSimple Side By Side On DarkSimple Stacked

sections → pricing

Four Tiers With ToggleSingle Price With DetailsThree TiersThree Tiers With DividersThree Tiers With Emphasized TierThree Tiers With Feature ComparisonThree Tiers With Logos And Feature ComparisonThree Tiers With ToggleThree Tiers With Toggle On DarkTwo TiersTwo Tiers With Emphasized TierTwo Tiers With Extra TierWith Comparison TableWith Comparison Table On Dark

sections → stats sections

SimpleSimple GridSimple Grid On DarkSimple On DarkSplit With ImageSteppedTimelineWith Background ImageWith DescriptionWith Two Column Description On Dark

sections → team sections

Dark Version With Large ImagesFull Width With Vertical ImagesGrid With Large Round ImagesGrid With Round ImagesWith Image And Short ParagraphWith Large ImagesWith Medium Images On DarkWith Small ImagesWith Vertical Images

sections → testimonials

GridOff White GridSide By SideSide By Side On DarkSimple CenteredWith Background ImageWith Large AvatarWith Overlapping ImageWith Star Rating