Button
A button in five faces, four tones and three sizes — or a square around one glyph — drawn on the platform's own <button>, or on its <a>, when the control navigates.
@pacit/components/button41 components
Every one of them running on this page — the same demo its own page opens with, not a screenshot of it. Each card leads to the live instance, the demo's own source, the parts and the tokens that are its public contract. Type to narrow the list — with no JavaScript the field stands quiet and all 41 are here.
41 of 41
Actions & navigation 5
Menu
A list of commands to choose from, walked by the keyboard and closed by the choice.
@pacit/components/menuBreadcrumb
The trail to the current page, told in links, with the page itself at the end of it.
@pacit/components/breadcrumbPagination
A pager that owns the current page of a collection and says when the reader moves.
@pacit/components/paginationText & numbers 7
Field
The wrapper around a form control — its label, its hint, its error, and the wiring between the three.
@pacit/components/fieldText
A text field on the platform's own <input> element, wired to the label and the error around it.
@pacit/components/fieldTextarea
A textarea as tall as its text, growing and shrinking as the reader types.
@pacit/components/fieldNumber
A number field with a step and bounds, and the keyboard the platform already gives it.
@pacit/components/fieldDatetime
A day and a time of it, typed into two texts under one label or picked in one panel holding a calendar and columns of hours and minutes.
@pacit/components/datetimeChoices 8
Checkbox
A box the reader ticks, with the third state a parent of many options needs.
@pacit/components/checkboxRadio
A group of mutually exclusive options, where the group is the form control and the options are its values.
@pacit/components/radioSwitch
A setting that takes effect the moment it is flipped, with no Save button beside it.
@pacit/components/switchSlider
A position on a numeric continuum, dragged with the pointer or walked with the arrows.
@pacit/components/sliderCalendar
One month of days as a grid, standing on the page rather than folded into a panel.
@pacit/components/dateColumns
A time of day as columns of hours and minutes, standing on the page rather than folded into a panel.
@pacit/components/timeOverlays 5
Dialog
A window over the page: what is behind it waits, focus stays inside, Escape closes it.
@pacit/components/dialogDrawer
A panel docked to an edge of the window that the page makes room for instead of disappearing under.
@pacit/components/drawerPopover
A panel of content anchored to a control, with the page behind it still answering.
@pacit/components/popoverToast
A short message on top of the page, said out loud without taking focus from anybody.
@pacit/components/toastTooltip
A sentence about a control — its description, or its name when it has none of its own.
@pacit/components/tooltipData & status 11
Table
A table you write yourself, in the platform's own markup, with the library's look, sortable headers and a frame that scrolls a table wider than its space.
@pacit/components/tableChart
A chart you compose in the template: a scene that owns the axes and the colours, and marks inside it that draw your rows. The data stand beside the picture as a table.
@pacit/components/chartDatatable
A table drawn from your rows and a typed list of columns: sorting by one key or several, a quick filter over what the cells show, and the empty and loading states, in the look of the platform table.
@pacit/components/tableAccordion
A stack of sections the reader opens and closes — one at a time, or as many as they like.
@pacit/components/accordionTree
A tree the reader walks with the keyboard: branches that open, leaves that get chosen.
@pacit/components/treeStepper
A map of a journey: the steps behind, the step now, and the steps still to come.
@pacit/components/stepperProgress
How far along a task is — or, when nobody can say, that it is under way at all.
@pacit/components/progressBadge
A short word wearing a tone: a status, a count, a label beside something that already has a name.
@pacit/components/badgeIcon
An icon from any set — a font, SVG drawings as data, a sprite, your own component — in a box the text sizes and colours; one line registers the set and dresses the library in it.
@pacit/components/iconAvatar
The picture beside a name, with initials and then a silhouette standing in when there is no picture.
@pacit/components/avatarSkeleton
The shape of content that has not arrived, holding the room it is going to take.
@pacit/components/skeletonLayout & theming 5
Container
A reading column: content capped at a maximum width, centred, with a gutter that follows the viewport.
@pacit/components/containerGrid
A grid that finds its own column count from the narrowest a card may get, with no media query to write.
@pacit/components/gridStack
A column of blocks standing one chosen step apart, the step taken from the spacing scale.
@pacit/components/stackHero
The library's one loud face, on the element that is already there: a rim, a word or a surface.
@pacit/components/hero