Common Components - denshya/frontend GitHub Wiki

Name	Description
Button	Triggers an action or event when clicked.
Checkbox	Lets users select one or more options from a set.
Radio Button	Allows selecting a single option from a group.
Dropdown	Reveals a list of options when clicked.
Toggle Switch	Switches between two states (e.g., on/off).
Text Field	Single-line input field for entering text.
Password Field	Input field that conceals entered characters.
Date Picker	Pops up a calendar for selecting a date.
Time Picker	Lets users choose a specific time.
Color Picker	Opens a palette to select a color.
Slider	Selects a value by dragging a handle along a track.
File Uploader	Facilitates selecting and uploading files.
Autocomplete	Suggests options based on user-typed input.
Tag Picker	Allows selecting multiple tags or categories.
Search Field	Input field dedicated to entering search queries.
Numeric Input	Restricts input to numerical values only.
Textarea	Multi-line input field for longer text.
Input Group	Combines multiple inputs (e.g., text + button) into a single unit.
Range Input	Lets users select a numeric range via two handles.
Masked Input	Formats user input according to a predefined pattern.

Name	Description
Navbar	Horizontal bar with links to main sections.
Sidebar	Vertical panel for navigation or supplementary content.
Breadcrumb	Shows the user’s path within a site hierarchy.
Tabs	Organizes content into separate, switchable views.
Pagination	Divides content into pages with navigation controls.
Accordion	Expands or collapses sections to show/hide content.
Hamburger Menu	Icon that toggles a hidden navigation menu (common on mobile).
Mega Menu	Large dropdown featuring multiple columns of links or options.
Context Menu	Right-click or long-press menu showing context-specific actions.
Carousel	Rotating set of images or content panels.
Kebab Menu	Three vertical dots indicating extra options.
Meatballs Menu	Three horizontal dots indicating additional options.
Wizard Navigation	Sequence of steps guiding the user through multi-stage tasks.
Steps	Visual indicator of progress through discrete steps.
Footer Navigation	Links grouped in the page footer for secondary navigation.

Name	Description
Badge	Small label highlighting status, counts, or categories.
Avatar	Displays a user’s profile image or initials.
Card	Container grouping related content and actions.
Table	Presents structured data in rows and columns.
List	Ordered or unordered list of items.
Popover	Small overlay anchored to an element for extra information.
Tooltip	Brief message shown on hover or focus to explain an element.
Progress Bar	Visual indicator of task completion as a bar.
Skeleton Loader	Placeholder UI indicating content is loading.
Data Grid	Advanced table with sorting, filtering, and editing capabilities.
Chart	Graphical representation of data (e.g., line, bar, pie).
Tree View	Hierarchical list with expandable/collapsible branches.
Timeline	Shows events in chronological order.
Tag	Removable label representing categories or keywords.
Chip	Compact element grouping a piece of information (often removable).
Statistic	Displays a single key metric or KPI.
Media Object	Layout component combining an image/avatar with textual content.

Name	Description
Image	Displays pictures or graphics.
Video Player	Embedded component for video playback.
Audio Player	Embedded component for audio playback.
Gallery	Grid or masonry layout to display multiple images.
Lightbox	Overlay view that enlarges images or other media on top of content.
Caption	Text label describing an image or media element.
PDF Viewer	Renders PDF documents within the UI.
VR/360 Viewer	Displays panoramic or 360° interactive media.
Embed	Container for third-party embeds (e.g., YouTube, Tweet).
Media Card	Card specialized for presenting media (image/video + controls).

Name	Description
Grid	Two-dimensional layout using rows and columns.
Flex	One-dimensional layout distributing space among items.
Container	Wrapper that constrains and centers content horizontally.
Stack	Arranges items vertically or horizontally with equal spacing.
Split View	Divides area into resizable panes (e.g., code editor + preview).
Masonry Layout	Positions items optimally with variable heights in a grid-like pattern.
Hero Section	Full-width, prominent banner area, often with background image/text.
Single-Column Layout	Simple one-column vertical flow of content.
Multi-Column Layout	Distributes content into two or more columns.
Media Object Layout	Aligns an image/avatar next to text or other content.

Name	Description
Header	Defines introductory content or navigation at the top.
Footer	Defines footer information (e.g., copyrights, links) at the bottom.
Main	Encapsulates the primary content of a page.
Section	Thematic grouping of content, typically with its own heading.
Article	Self-contained composition, such as a blog post or news item.
Aside	Content tangentially related to the main content (e.g., sidebar).
Nav	Container for primary site or page navigation links.
Figure	Grouping for self-contained content, like an image with caption.
Figcaption	Provides a caption or legend for the content in a <figure>.
Details	Creates a disclosure widget that can be toggled open/closed.
Summary	Defines a summary or caption for a <details> element.
Fieldset	Groups related form controls within a form.
Legend	Caption for the content of a <fieldset>.
Label	Describes a form control, linked via for attribute.
Form	Container for user input controls and submission logic.

Name	Description
Panel	Sectioned area grouping related content or controls.
Modal	Overlay dialog that grabs focus for a specific task or input.
Drawer	Slide-out panel from the side to reveal navigation or extra options.
Dialog	Interactive window prompting for decisions or additional input.
Toast	Transient notification that appears briefly (often in a corner).
Alert	Prominent message to capture user attention for warnings or errors.
Snackbar	Brief message at the bottom of the screen, often with an action.
Banner	Persistent message area (e.g., for announcements) usually at top or bottom.

Name	Description
Spinner	Animated indicator showing content is loading or processing.
Notification	Alerts users to new information or updates (e.g., in-app notifications).
Loader	Generic term for any loading indicator (spinner, bar, skeleton).
Progress Circle	Circular version of a progress bar indicating task completion.
Back-to-Top Button	Button that appears to scroll back to top when the user scrolls down.
Inline Validation	Immediate feedback on form field validity (e.g., error message).
Live Region	ARIA-based area announcing dynamic content changes for screen readers.

Name	Description
Steps	Visual representation of a multi-step process or flow.
Divider	Horizontal or vertical line separating content or sections.
Spacer	Invisible element used to insert flexible space between items.
Breadcrumb Trail	Textual path showing current location in a site’s hierarchy.
Link	Clickable text or icon navigating to another resource.
Icon	Small graphic used to represent an action, object, or concept.
Back Button	Navigation control that returns the user to a previous view or state.
Tag Cloud	Visual representation of tag metrics with varying font sizes.
Filter Chip	Interactive label that filters content when selected.
Contextual Help	Inline help pop-ups or side panels providing guidance.
TextRotator	A TextRotator is a UI component that cycles through a list of strings at a set interval, displaying one at a time. It can be used in dynamic input placeholders (e.g. changing hints like “Search users”, “Find docs”) or in headings (e.g. “We help you [grow | build | launch]”). Transitions can be animated for smooth effect. Ideal for subtle attention cues or showcasing multiple messages in limited space.