UI Component Naming Guide examples

Standalone Tailwind HTML files. Open any file or paste it into an online HTML tester.

  1. App shell

    Navigation and app structure

  2. Page header

    Navigation and app structure

  3. Top navigation bar

    Navigation and app structure

  4. App bar

    Navigation and app structure

  5. Toolbar

    Navigation and app structure

  6. Sidebar

    Navigation and app structure

  7. Navigation rail

    Navigation and app structure

  8. Navigation drawer

    Navigation and app structure

  9. Offcanvas panel

    Navigation and app structure

  10. Bottom navigation

    Navigation and app structure

  11. Tab bar

    Navigation and app structure

  12. Tabs

    Navigation and app structure

  13. Breadcrumbs

    Navigation and app structure

  14. Pagination

    Navigation and app structure

  15. Stepper

    Navigation and app structure

  16. Wizard

    Navigation and app structure

  17. Mega menu

    Navigation and app structure

  18. Menu bar

    Navigation and app structure

  19. Dropdown menu

    Navigation and app structure

  20. Context menu

    Navigation and app structure

  21. Command palette

    Navigation and app structure

  22. Search bar

    Navigation and app structure

  23. Filter bar

    Navigation and app structure

  24. Sort control

    Navigation and app structure

  25. View switcher

    Navigation and app structure

  26. Container

    Layout and content containers

  27. Card

    Layout and content containers

  28. Panel

    Layout and content containers

  29. Section

    Layout and content containers

  30. Grid layout

    Layout and content containers

  31. Stack layout

    Layout and content containers

  32. Split view

    Layout and content containers

  33. Splitter

    Layout and content containers

  34. Master-detail layout

    Layout and content containers

  35. Accordion

    Layout and content containers

  36. Disclosure

    Layout and content containers

  37. Divider

    Layout and content containers

  38. Scroll area

    Layout and content containers

  39. Carousel

    Layout and content containers

  40. Sticky header

    Layout and content containers

  41. Hero section

    Layout and content containers

  42. Feature section

    Layout and content containers

  43. Dashboard widget

    Layout and content containers

  44. Aspect ratio box

    Layout and content containers

  45. Masonry grid

    Layout and content containers

  46. Modal dialog

    Overlays and transient surfaces

  47. Alert dialog

    Overlays and transient surfaces

  48. Sheet

    Overlays and transient surfaces

  49. Bottom sheet

    Overlays and transient surfaces

  50. Side sheet

    Overlays and transient surfaces

  51. Popover

    Overlays and transient surfaces

  52. Hover card

    Overlays and transient surfaces

  53. Tooltip

    Overlays and transient surfaces

  54. Toast

    Overlays and transient surfaces

  55. Snackbar

    Overlays and transient surfaces

  56. Notification banner

    Overlays and transient surfaces

  57. Action sheet

    Overlays and transient surfaces

  58. Lightbox

    Overlays and transient surfaces

  59. Full-screen takeover

    Overlays and transient surfaces

  60. Coach mark

    Overlays and transient surfaces

  61. Button

    Actions, feedback, and status

  62. Icon button

    Actions, feedback, and status

  63. Button group

    Actions, feedback, and status

  64. Split button

    Actions, feedback, and status

  65. Floating action button

    Actions, feedback, and status

  66. Speed dial

    Actions, feedback, and status

  67. Link

    Actions, feedback, and status

  68. Close button

    Actions, feedback, and status

  69. Copy button

    Actions, feedback, and status

  70. Badge

    Actions, feedback, and status

  71. Chip

    Actions, feedback, and status

  72. Avatar

    Actions, feedback, and status

  73. Avatar group

    Actions, feedback, and status

  74. Status indicator

    Actions, feedback, and status

  75. Progress bar

    Actions, feedback, and status

  76. Progress circle

    Actions, feedback, and status

  77. Meter

    Actions, feedback, and status

  78. Spinner

    Actions, feedback, and status

  79. Skeleton

    Actions, feedback, and status

  80. Alert

    Actions, feedback, and status

  81. Form

    Forms, inputs, and pickers

  82. Field

    Forms, inputs, and pickers

  83. Fieldset

    Forms, inputs, and pickers

  84. Text input

    Forms, inputs, and pickers

  85. Textarea

    Forms, inputs, and pickers

  86. Password input

    Forms, inputs, and pickers

  87. Number input

    Forms, inputs, and pickers

  88. Select

    Forms, inputs, and pickers

  89. Combobox

    Forms, inputs, and pickers

  90. Autocomplete

    Forms, inputs, and pickers

  91. Listbox

    Forms, inputs, and pickers

  92. Checkbox

    Forms, inputs, and pickers

  93. Checkbox group

    Forms, inputs, and pickers

  94. Radio group

    Forms, inputs, and pickers

  95. Switch

    Forms, inputs, and pickers

  96. Segmented control

    Forms, inputs, and pickers

  97. Toggle group

    Forms, inputs, and pickers

  98. Slider

    Forms, inputs, and pickers

  99. Range slider

    Forms, inputs, and pickers

  100. Date picker

    Forms, inputs, and pickers

  101. Time picker

    Forms, inputs, and pickers

  102. Date range picker

    Forms, inputs, and pickers

  103. Calendar

    Forms, inputs, and pickers

  104. Color picker

    Forms, inputs, and pickers

  105. File upload

    Forms, inputs, and pickers

  106. Drop zone

    Forms, inputs, and pickers

  107. Rich text editor

    Forms, inputs, and pickers

  108. Markdown editor

    Forms, inputs, and pickers

  109. Code editor

    Forms, inputs, and pickers

  110. OTP input

    Forms, inputs, and pickers

  111. List

    Data display and information architecture

  112. Table

    Data display and information architecture

  113. Data grid

    Data display and information architecture

  114. Tree view

    Data display and information architecture

  115. Tree grid

    Data display and information architecture

  116. Timeline

    Data display and information architecture

  117. Feed

    Data display and information architecture

  118. Description list

    Data display and information architecture

  119. Key-value table

    Data display and information architecture

  120. KPI stat

    Data display and information architecture

  121. Chart

    Data display and information architecture

  122. Sparkline

    Data display and information architecture

  123. Heatmap

    Data display and information architecture

  124. Map

    Data display and information architecture

  125. Kanban board

    Data display and information architecture

  126. Calendar view

    Data display and information architecture

  127. Gantt chart

    Data display and information architecture

  128. Gallery

    Data display and information architecture

  129. Media player

    Data display and information architecture

  130. Code block

    Data display and information architecture

  131. QR code

    Data display and information architecture

  132. Log viewer

    Data display and information architecture

  133. Data table toolbar

    Data display and information architecture

  134. File attachment list

    Data display and information architecture

  135. Inbox list

    Data display and information architecture

  136. Product card

    Commerce, mobile, collaboration, and AI patterns

  137. Product grid

    Commerce, mobile, collaboration, and AI patterns

  138. Product gallery

    Commerce, mobile, collaboration, and AI patterns

  139. Cart drawer

    Commerce, mobile, collaboration, and AI patterns

  140. Checkout form

    Commerce, mobile, collaboration, and AI patterns

  141. Order summary

    Commerce, mobile, collaboration, and AI patterns

  142. Price block

    Commerce, mobile, collaboration, and AI patterns

  143. Coupon field

    Commerce, mobile, collaboration, and AI patterns

  144. Quantity stepper

    Commerce, mobile, collaboration, and AI patterns

  145. Wishlist button

    Commerce, mobile, collaboration, and AI patterns

  146. Comparison table

    Commerce, mobile, collaboration, and AI patterns

  147. Product quick view

    Commerce, mobile, collaboration, and AI patterns

  148. Status bar

    Commerce, mobile, collaboration, and AI patterns

  149. System navigation bar

    Commerce, mobile, collaboration, and AI patterns

  150. Bottom app bar

    Commerce, mobile, collaboration, and AI patterns

  151. Page control dots

    Commerce, mobile, collaboration, and AI patterns

  152. Swipe action row

    Commerce, mobile, collaboration, and AI patterns

  153. Pull to refresh

    Commerce, mobile, collaboration, and AI patterns

  154. Infinite scroll

    Commerce, mobile, collaboration, and AI patterns

  155. Virtualized list

    Commerce, mobile, collaboration, and AI patterns

  156. Drag-and-drop list

    Commerce, mobile, collaboration, and AI patterns

  157. Keyboard accessory bar

    Commerce, mobile, collaboration, and AI patterns

  158. Safe area inset

    Commerce, mobile, collaboration, and AI patterns

  159. Comment thread

    Commerce, mobile, collaboration, and AI patterns

  160. Mention autocomplete

    Commerce, mobile, collaboration, and AI patterns

  161. Reaction bar

    Commerce, mobile, collaboration, and AI patterns

  162. Presence indicator

    Commerce, mobile, collaboration, and AI patterns

  163. Activity feed

    Commerce, mobile, collaboration, and AI patterns

  164. Changelog

    Commerce, mobile, collaboration, and AI patterns

  165. Chat message bubble

    Commerce, mobile, collaboration, and AI patterns

  166. Chat composer

    Commerce, mobile, collaboration, and AI patterns

  167. Prompt box

    Commerce, mobile, collaboration, and AI patterns

  168. Assistant response card

    Commerce, mobile, collaboration, and AI patterns

  169. Citation list

    Commerce, mobile, collaboration, and AI patterns

  170. Editable text

    Commerce, mobile, collaboration, and AI patterns