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