Frontend & UI

Build a single Underlined Tabs component, not a full page.

Build a single Tabs with Sliding Indicator component, not a full page.

Build a single Pill Tabs component, not a full page.

Build a single Segmented Control, not Tabs and not a full page.

Build a single Contained Tabs component, not a full page.

Build a single Folder-style Tabs component, not a full page.

Build a single Vertical Tabs component, not a full page.

Build a single Icon Tabs component, not a full page.

Build a single Icon + Label Tabs component, not a full page.

Build a single Scrollable Tabs component, not a full page.

Build a single Closable Tabs component like browser tabs, not a full page.

Build a single Draggable Tabs component, not a full page.

Build a single Content Switcher for alternate views of the same dataset, not a full page.

Build a single numbered Stepper for a multi-step wizard, not a full page.

Build a single Dot Stepper, not a full page.

Build a single Chevron Stepper (arrow/fishbone), not a full page.

Build a single Filled Chevron Stepper, not a full page.

Build a single Vertical Stepper, not a full page.

Build a single Progress Tracker for order/logistics, not a wizard stepper.

Build a single Primary Button, the main call to action, not a toolbar.

Build a single Secondary Button meant to sit beside a primary CTA.

Build a single Outline Button.

Build a single Ghost Button for toolbars.

Build a single Text Button, the lightest action.

Build a single Link Button that feels like navigation.

Build a single Icon Button.

Build a single Circular Icon Button for a compact add action.

Build a single Floating Action Button (FAB).

Build a single Destructive Button for irreversible actions.

Build a single Loading Button that blocks repeat submits.

Build a single Disabled Button that cannot be pressed.

Build a single Split Button.

Build a single Dropdown / Menu Button.

Build a single connected Button Group.

Build a single Toggle Button with pressed and unpressed states.

Build a single Toggle Group for formatting.

Build a single icon Toolbar.

Build a single Overflow / Kebab button.

Build a single Meatball Menu button.

Build a single Speed Dial.

Build a single labeled Text Input, not a form page.

Build a single Textarea, not a rich editor.

Build a single Search Field.

Build a single Password Field.

Build a single Number Input.

Build a single Spinbutton.

Build a single Select dropdown.

Build a single Multi-select.

Build a single Combobox (searchable select), not a plain Select.

Build a single Autocomplete text field.

Build a single Cascader for hierarchical paths.

Build a single Tree Select.

Build a Checkbox group.

Build a Radio Group.

Build a single Switch for binary on/off.

Build a Tri-state Checkbox.

Build a single horizontal Slider.

Build a Range Slider with two thumbs.

Build a Vertical Slider.

Build a Stepped / discrete Slider.

Build a Date Picker.

Build a Date Range Picker.

Build a Time Picker.

Build a DateTime Picker.

Build an inline Calendar month view, not a popover field.

Build a Week Picker that selects a full ISO week.

Build a Month Picker.

Build a Year Picker.

Build a six-digit OTP Input.

Build a Tag Input.

Build a Chip Input where values render as removable chips inside the field (same family as tag input, chip-forward).

Build a Mentions Input.

Build a compact Rich Text Editor (WYSIWYG).

Build a Markdown Editor with a preview toggle.

Build a compact Code Editor.

Build Inline Edit.

Build a Masked Input with a visible pattern.

Build a Phone Input.

Build a Currency Input.

Build a URL Input.

Build a Color Picker.

Build a star Rating Control 1–5.

Build a native-style File Input.

Build an Upload Button.

Build a Dropzone.

Build an Upload List / queue.

Use a dropdown menu anchored to an actions button..

Use a context menu on right-click with copy rename and delete..

Use a menubar with File Edit View Help and nested menus..

Use a navigation menu with section dropdowns..

Use a mega menu with grouped product columns..

Use an overflow menu triggered by a kebab icon..

Use breadcrumbs for hierarchical location..

Use pagination with page numbers and previous/next controls..

Use a sidebar navigation with Dashboard Projects Analytics Settings..

Use a compact navigation rail with icon destinations..

Use bottom navigation with Home Search Create and Profile..

Use a top navigation bar with logo, links and a login action..

Use in-page anchor navigation that scrolls between sections..

Use a basic card with title and body..

Use elevated cards with subtle shadows and rounded corners..

Use an outlined card with a 1px border and no shadow..

Use an interactive clickable card with hover and pressed states..

Use a selectable card with a selected treatment..

Use a metric / stat card with value, label and delta..

Use a media card with image on top and text below..

Use a horizontal card with media on the left and content on the right..

Use a dashboard widget card with a title and metric..

Use a static table for read-only tabular data..

Use a data table with sortable headers..

Use an interactive data grid with cell focus..

Use an editable table where cells become inputs on click..

Use an expandable table with nested row details..

Use a tree table with expandable hierarchical rows..

Use a simple selectable list..

Use a structured list with consistent columns per row..

Use a tree view with expand/collapse disclosure..

Use a description list for label-value pairs..

Use a vertical timeline of events..

Use a kanban board with draggable cards across columns..

Use a compact gantt chart with time bars..

Use a scheduler with hours as columns..

Use a calendar view with events on dates..

Use a masonry grid of uneven image tiles..

Use a carousel with previous/next controls..

Use a gallery grid that selects a featured image..

Use a numeric badge on a host control, not as a category tag..

Use a tag to represent a category..

Use a chip that can be dismissed..

Use filter chips with a selected check treatment..

Use a status badge with a color dot and short label..

Use a lozenge for compact status text such as IN PROGRESS..

Use an accordion of stacked disclosures..

Use a single collapsible section for advanced settings..

Use a disclosure / show-hide control with a chevron..

Build a single Tooltip.

Build a single Popover that can hold actions, not just text.

Build a single Hover Card that previews a person.

Build a single Modal Dialog.

Build a single Alert Dialog that must be answered.

Build a single Popconfirm anchored to a dangerous action.

Build a single right-side Drawer.

Build a single edge Sheet (not a modal, not a bottom sheet).

Build a single Bottom Sheet.

Use an alert with an icon and short warning copy..

Use an inline message next to the related field..

Use a full-width banner for system maintenance messaging..

Use a toast in the corner that auto-dismisses..

Use a snackbar with a single action such as Undo..

Use a notification card with title and body..

Use a spinner for indeterminate short waits..

Use skeleton placeholders matching the final layout..

Use shimmer loading with a moving highlight..

Use a labeled progress bar showing percent complete..

Use circular progress with a percent label..

Use an indeterminate progress animation when percent is unknown..

Use determinate progress bound to a known percentage..

Use an empty state with explanation and a create action..

Use an error state with retry..

Use a success result page with a confirmation and next step..

Use an exception page for 404 or 500..

Use resizable panels with a draggable gutter..

Use a split pane / split view for tree and editor..

Use a window splitter pattern with a keyboard-accessible gutter..

Use a draggable sortable list with drag handles..

Use a reorderable list with up/down or drag..

Use a resizable sidebar with a drag edge..

Use a master-detail layout with a selectable list and a detail pane..

Use an inspector / property panel with collapsible sections..

Use a filter bar of compact controls above a table..

Use faceted filters with counts per facet..

Use a query builder with field operator value rows..

Add a Cmd+K command palette with fuzzy search, keyboard navigation and grouped commands..

Use a command menu dialog grouped by category..

Use a chat composer with send..

Use message bubbles for assistant and user turns..

Use a conversation list with title and timestamp..

Use a prompt composer with a large field and send..

Use an agent status indicator with Running Thinking and Idle..

Use a tool call card showing tool name and compact arguments..

Use a collapsible reasoning / thinking panel..

Use a terminal panel with monospace output..

Use a diff viewer with added and removed lines..

Use a file tree / explorer tree..

Use a JSON tree viewer with expandable keys..

Use a log viewer with timestamp and level..

Use a markdown preview pane..

Use a code block with language label..

Use a code snippet with a copy button..

Use suggestion chips that fill the composer..

Use citation chips / source cards linking to evidence..

Use a tree view with expand and collapse..

Use a file explorer tree..

Build a treegrid with name and size columns and expandable rows..

Use pull-to-refresh on a mobile list..

Use swipe actions revealing Delete behind a row..

Use a long-press context menu on a list item..

Use pagination dots for paged cards..

Use swipeable cards with left/right actions..

Use safe-area padding for notch and home indicator..

Use a mobile navigation bar with back title and action..

Use a large-title navigation bar that compacts on scroll..

Use a three-pane layout: sidebar, editor and inspector..

Use an activity bar of icon destinations..

Use an explorer panel listing files..

Use editor tabs for open documents..

Use an editor pane with a monospace canvas..

Use a property panel of labeled fields..

Use a status bar with branch, problems and encoding..

Use a command bar of labeled icon actions..

Use a dockable panel that can pin to an edge..

Use a floating panel with a drag handle..