Component Reference Gallery
Most components in the project rendered for reference
A living reference for the components this site ships. Each section renders a component or family of components as they appear with the current theme.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A paragraph with bold, italic, underline, strikethrough, highlight, inline code, and a link.
A blockquote for quoted material or a callout-style pull line.
- First list item
- Second list item
- Third list item
Buttons
Badges
DefaultSecondaryOutlineDestructiveGhostLink
Cards
Card title
A supporting description for the card.
Card body content. Cards carry their own padding and border, so they work anywhere a grouped surface is needed.
Inputs
Tabs
Content for the first tab.
Accordion
Body of the first item.
Breadcrumb
Table
| Name | Status | Value |
|---|---|---|
| Alpha | Active | 42 |
| Beta | Draft | 17 |
| Gamma | Archived | 8 |
Feedback
Heads up
An informational alert.
Progress
Skeleton
Overlays
Misc
JGPress ⌘ K for the command palette
Content components
Sample Content Header
A stand-in row so the header can be previewed.
export function Example() {
return <Paragraph>Hello</Paragraph>;
}