Components
Every component in Jewel, one page each, with live examples, copy-paste code, usage notes and accessibility notes. Each is one CSS file, and a script only where CSS can’t do the job.
01 — A to Z
- AccordionSections that open in place, such as questions and answers.
- BadgeStatus and count labels, on their own or over photos.
- BreadcrumbsThe trail from the home page to this one.
- ButtonPrimary, ghost, text, icon and destructive buttons, plus a two-state toggle.
- ChartLine, area, bar, pie, donut and sparkline charts, from a table or from data.
- ChatThe shell for an AI assistant: conversation, prompts and composer.
- Checkbox, radio and switchCheckboxes, radio buttons and switches.
- Code snippetCode blocks with a copy button, and inline code.
- Data tableSortable, selectable tables of records.
- Date pickerType a date or pick one from a calendar.
- Drop zonePick one photo by dragging it in or browsing, with a preview.
- DropdownA button that opens a short menu of actions or choices.
- Empty stateWhat to show when there’s nothing here yet.
- FigurePhotos and artwork with a hairline caption.
- FilterTag buttons that show only matching items.
- Floating action buttonThe fixed button for the page’s main action, with an optional label.
- FooterThe small print at the foot of every page.
- HeaderThe sticky header, in four layouts, with a phone menu.
- Index listNumbered rows of projects or posts.
- LightboxA full-screen photo viewer with arrows, swipes and captions.
- Meta listLabel and value rows for the facts about something.
- NoticeInfo, update and error messages in the page.
- Password fieldA field with an eye button that shows and hides a password or token.
- ProgressA thin bar that shows how far along a task is.
- QuoteA pull quote with its source.
- SearchA search box with clear, a shortcut key and suggestions.
- SheetTearsheet, modal and drawer dialogs on a native dialog.
- Side navGrouped page links: a column on wide screens, a drawer on phones.
- Skeleton loaderGray blocks in the shape of content that’s loading.
- SpinnerA hairline ring for short waits of unknown length.
- StatKey numbers, stacked, inline or as one hero figure.
- StatusA dot and a word for the state of a pod, job or deploy.
- TabsSwitch between views of the same thing, in place.
- TagLabels, linked tags and pressable tags, in two sizes.
- Tag inputA field that turns typed words into tags.
- Text fieldText inputs, text areas and selects, with labels, hints and errors.
- TooltipA short hint for a control, on hover and keyboard focus.
- VideoA muted, looping clip with a play and pause control.