Components
The building blocks: buttons, fields, overlays, layout, data and dates. Install @weft-js/warp and import what you use.
Actions
Forms
InputOne line of text: a name, an email, a URL.
TextareaSeveral lines of text that grow as people write.
SearchA text field for finding things, with a search icon and a clear button.
SelectPick one value from a list. A menu on a desktop, a sheet on a phone.
CheckboxA yes or no that takes effect when the form is saved.
RadioOne choice in a set. Give every radio in the set the same name.
RadioGroupPick exactly one from a short list where every option is on show.
SwitchTurns a setting on or off straight away, with no Save button.
SliderPick a number or a range by dragging, when about right is good enough.
SegmentedA row of two to five short options where exactly one is on.
FieldThe frame every field shares: label, icon, hint, error. Wrap your own control in it.
CompactSelectA small Select with no floating label, for table rows, pagers and toolbars.
NumberFieldA number you can type or step, with arrow keys and two buttons.
Overlays
Feedback
ToasterWhere toasts appear: short messages that come and go on their own.
AlertA message that stays in the page until it is dealt with.
ProgressShows how far along something is, as a bar or a ring.
SpinnerShows that something is working, when you can't say how long it will take.
SkeletonA grey placeholder where content will appear.
ShapeA ready-made loading placeholder for a list, card, table or block of text.
LiveStatusA small pill saying whether a live connection is working.
Content
CardA box that groups related things, and can be a link or a button.
BadgeA small label for a status or a count.
TagA label people added themselves, which they can often remove.
KbdOne key on the keyboard, drawn as a keycap.
TickerA number that rolls to its new value, digit by digit.
IconOne icon by name, from warp's set.
HeadingA real heading. Its level sets the page outline, and its size follows.
TextAny text, in one of warp's roles. A size, weight or colour is never a prop.
CodeA short piece of code inside a sentence.
CodeBlockA block of coloured code with a copy button.
SnippetOne command on one line, with a copy button.
MarkdownTurns Markdown into a styled, safe page of text.
Layout
GridEven columns that fit themselves: as many as suit the room, up to the most you allow.
StackPuts things in a column with even space between them.
RowPuts things side by side and wraps them when they run out of room.
SplitA fixed side next to a fluid main area, stacked when the container is narrow.
CenterA column of readable width, centred in whatever holds it.
CoverFills the screen and centres one thing, with a header and footer at the edges.
FrameA box that holds its shape, for images, video and previews.
InsetA sunken, padded area that sets something apart inside a page or card.
SpacerTakes up the free space in a Row or Stack, so what follows sits at the far end.
ShellThe frame of an app: header, navigation and main area, reshaping itself from phone to desktop.
Data
TableRows of data that people can sort, filter, select and page through.
DataGridA table you work in like a spreadsheet: move by cell, select ranges, edit, group and export.
ScrollGridA huge read-only grid that scrolls both ways: thousands of rows and columns, and only what you see exists.
VirtualListA very long list that stays fast, because only the rows on screen exist.
FeedA long stream of activity, with each event as a knot on a line.
PivotTableSums rows across two dimensions, with shaded cells and totals both ways.
KanbanA board of cards in columns, moved by dragging, by keyboard or from a menu.
Dates and time
CalendarA full calendar with month, week, day, agenda, timeline and year views.
DateFieldType a date or pick one from a calendar in a popover.
DateRangeFieldPick a start and end date, with presets like Last 30 days and an optional comparison.
DateTimeFieldOne field for a date and a time, with the calendar beside a list of times.
TimeFieldType a time or pick one from a list, in the 12 or 24 hour clock.
DurationFieldEnter a length of time in days, hours, minutes or seconds.
InlineCalendarA calendar that is always on the page, for one day, several days or a range.
MonthPickerPick a month from a year grid.
WeekPickerPick a whole week from a calendar.
PeriodPickerPick a year, quarter, month or week from one control.
RecurrenceFieldBuild a repeating schedule, with the rule in plain words and the next dates listed.
Rich fields
PhoneFieldA phone number with a country picker. Formats as people type and stores the full international number.
CountrySelectPick a country from a searchable list, named in the reader's language.
LanguageSelectPick a language. Each one also shows its own name, so people can find theirs.
CurrencySelectPick a currency by name, code or symbol.
TimeZoneSelectPick a time zone by city or offset. The reader's own zone comes first.
AddressFieldA postal address whose fields, order and labels follow the country.
PlaceLookupInputFind a place, like a city or an airport, through your own search.
PaymentCardInputA frame around your payment provider's card field, so it matches the rest of the form.
CardNumberTextShows a saved card safely: its brand, last four digits and expiry.
CodeInputA code field with colours, line numbers and Tab that indents.
JsonEditorA code field for JSON that points to the line with the mistake.
KeyValueEditorA small table of names and values, like environment variables or headers.
MentionsInputA text box where @ tags people and # links projects.
RichTextEditorFormatted text with a toolbar, Markdown shortcuts and / for blocks.
MarkdownEditorWrite Markdown beside a live preview.
SignaturePadSign by drawing or by typing a name.
Canvas and dithering
CanvasA canvas that handles sizing, sharp pixels, off-screen pausing and reduced motion for you.
CanvasStagePaints the page laid out inside it on one canvas, in any look: cards, buttons, fields, modals, type and scroll.
StageSelectA select a stage draws, list and all, in whatever look the stage around it has.
DitherStageA CanvasStage in the dithered look: every skin drawn in whole cells of the theme's inks.
DitherFieldA moving dithered texture for backgrounds, in the theme's colours.
DitherA still image or gradient, redrawn in dots of the theme's colours.
DitherGlyphA word or logo woven out of a moving dithered field.