S
usmanfarooqi88/skrewwwDS
AccordionaccordionAccordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.
AlertalertAlert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.
Area Chartarea-chartArea Chart shows magnitude over ordered categories with a filled area under each line — a single series by default, or several series overlapped, stacked, or stacked to 100%. Static and non-tabbable, with the data also exposed as a hidden table.
AvataravatarAvatar is a circular visual identity for a user or entity with image, initials, or icon fallback.
BadgebadgeBadge is a compact non-interactive label for status, classification, or numeric counts at a glance.
Bar Chartbar-chartBar Chart compares categories with vertical or horizontal bars — a single series by default, or several series grouped, stacked, or stacked to 100%. Static and non-tabbable, with the data also exposed as a hidden table.
BreadcrumbbreadcrumbBreadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator.
ButtonbuttonButton is a primary interactive trigger for user actions — submit, confirm, navigate, or initiate a process.
Button Groupbutton-groupButton Group joins related independent Buttons with shared outer chrome and a 2px divider gap — layout only; each Button keeps its own behavior.
Calendar Daycalendar-dayCalendar Day is a single selectable day cell inside a month calendar grid.
Calendar Gridcalendar-gridCalendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation.
CardcardCard is a general-purpose content container grouping related information with a clear visual boundary.
Chart Cardchart-cardChart Card is a Card composed for a chart: an optional title/description/actions header, and a body that owns loading/empty/error presentation around a chart the consumer supplies as children.
Chart Metricchart-metricChart Metric is a labeled value with an optional directional delta, for use above a chart or standalone — the delta's direction drives only its icon, never a color.
CheckboxcheckboxCheckbox is a native checkbox for independent or multi-select choices, including indeterminate group states.
ComboboxcomboboxCombobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.
Credit Card Fieldcredit-card-fieldCredit Card Field is a compound UI control for card number, expiry, and CVC in one shell — visual pattern only, not a payment processor or PCI vault.
Data Tabledata-tableData Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.
Date Pickerdate-pickerDate Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection.
DialogdialogDialog is a modal overlay that interrupts workflow for focused attention, information, or a decision.
DividerdividerDivider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.
DrawerdrawerDrawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.
Empty Stateempty-stateEmpty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows.
File Uploadfile-uploadFile Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.
Form Fieldform-fieldForm Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.
Line Chartline-chartLine Chart shows a trend across ordered categories — a single series by default, or several series as separate lines. Static and non-tabbable, with an optional sparkline mode and the data also exposed as a hidden table.
LinklinkLink is semantic navigational text styled as inline or standalone links — not for primary actions.
List Itemlist-itemList Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content.
MenumenuMenu is a compact command surface for contextual actions — distinct from Select (form values) and Popover (supplementary content).
Number Inputnumber-inputNumber Input is direct numeric entry with optional steppers and min/max/step — not currency, quantity business logic, or a Slider.
PaginationpaginationPagination is a paged navigation control with Previous/Next boundaries, numbered pages, and optional ellipsis.
Phone Number Fieldphone-number-fieldPhone Number Field pairs a country/dial-code selector with a phone number input — UI pattern only, not SMS verification or carrier lookup.
PopoverpopoverPopover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.
Progress Barprogress-barReact progress bar for uploads and background tasks, with measured value/max progress, an indeterminate mode, a visible label, and optional percentage text.
RadioradioRadio is a native radio button for a single option inside a mutually exclusive group.
Radio Groupradio-groupRadio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors.
Search Fieldsearch-fieldSearch Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.
SelectselectSelect is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.
SkeletonskeletonSkeleton is temporary placeholder shapes that preserve layout while known content is loading.
SlidersliderSlider is a single-value control for selecting a number within min/max by dragging or keyboard-adjusting a thumb along a track.
SpinnerspinnerSpinner is an indeterminate loading indicator for operations without a meaningful completion percentage.
Split Buttonsplit-buttonSplit Button joins one primary Button action with a related Menu trigger using shared outer chrome — composition only; Button and Menu keep their own APIs.
StepperstepperStepper shows progress through a fixed, known-length, ordered sequence of named steps — a compound Stepper + Step API built against the verified live Navigation/Step Item component set.
SwitchswitchSwitch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.
TabletableTable is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).
TabstabsTabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus.
TagtagTag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.
Text Inputtext-inputText Input is a single-line text entry for short, free-form data such as names, emails, or search terms.
TextareatextareaTextarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.
TimelinetimelineTimeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppression purely positional.
ToasttoastToast is a transient floating notification for confirming actions or reporting short-lived events.
Toggle Grouptoggle-groupToggle Group is exclusive segmented selection (radiogroup) with joined chrome — Segmented Control is this presentation, not a separate component.
TooltiptooltipTooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.
Tree Viewtree-viewTree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabindex keyboard navigation and depth-based indentation.
Validation Messagevalidation-messageValidation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.