72 components from @zudo-sg/demo-ui, discovered from their .stories.tsx files. Each tile previews the component's first variant, rendered here on the server.
This is body copy (p). The Prose* components format MDX's general elements. Links render like this.
Inline text can be bold, italic, an inline link, or inline code.
h4 is a body-sized bold heading.
h5 / h6 render as muted, understated minor headings.
A blockquote is set apart from body copy with a left rule and muted text. It can hold multiple paragraphs.
| Token | Purpose | Value |
|---|---|---|
| color-bg | Page background | white |
| color-surface | Card surface | light-grey |
| color-accent | Accent | blue |
Full MDX general-element contract, demoed through the Prose* components rather than raw HTML.
6 variants
A quoted passage, set apart from the surrounding body copy.
MDX `blockquote` element override — muted italic text with a left rule.
1 variant
MDX `dl`/`dt`/`dd` element overrides — a definition list with bold terms and muted descriptions.
1 variant
MDX `h3` element override — subsection heading with an accent-colored left rule.
1 variant
MDX `li` element override — muted marker with nested-list spacing resets.
1 variant
## Getting started
Install the package, then render markdown straight from a string.
- Zero-config defaults
- Full **TypeScript** support
```ts
export function greet(name: string): string {
return `Hello, ${name}!`;
}
```
> Edits to this field re-render live once wired into the canvas inspector.
Renders a markdown string client-side (fence highlighting, sanitized output).
1 variant
MDX `ol` element override — decimal-numbered list.
1 variant
Regular body copy, unadorned.
MDX `p` element override — plain paragraph; flow spacing is owned by the consumer's content-flow stylesheet.
1 variant
| Token | Purpose |
|---|---|
| color-bg | Page background |
| color-accent | Accent color |
MDX table override with explicit sections and bordered cells.
1 variant
MDX `ul` element override — disc-marked list.
1 variant
Auto-fit/auto-fill responsive grid primitive for card-style listings, switching column density by minimum track width.
3 variants
Container (~88rem)
Sample Co. is a demo company. This band shows the container's maximum width — resize the browser to see the inline padding expand and contract fluidly (via clamp()).
Centers page content in a single ~88rem-wide column, with fluid inline padding that expands on wider viewports.
1 variant
Company-profile "label / value" definition list — rows separated by hairline rules, the whole table framed in one rounded border.
3 variants
Kansai branch
000-0000
1-1-1 Example, Example City
Nagoya branch
000-0000
1-1-1 Example, Example City
Fukuoka sales office
000-0000
1-1-1 Example, Example City
Example research lab
000-0000
1-1-1 Example, Example City
Example plant
000-0000
1-2-1 Example, Example City
Chubu sales office
000-0000
1-3-1 Example, Example City
Example Enterprises Ltd.
United Kingdom
Example Taiwan Ltd.
Taiwan
Example America Inc.
United States
Company locations listed by group (department/region), each group heading rule-marked in accent, locations laid out in an auto-fill grid.
2 variants
IR "financial highlights" metrics summary grid. A metric with no `value` renders `pendingLabel` instead of an invented figure.
3 variants
A sample card component. Flat, white/light-gray surfaces with an accent color, using a border rather than a shadow to separate layers.
Flat surface container with a border and rounded corners, in three variants and three padding sizes.
4 variants
Responsive auto-fit grid wrapper for a run of Cards in a content body.
1 variant
Fill in and submit the form below. Our team will review it and follow up with you. Fields marked Required must be filled in.
Review the details below before sending. Use "Back to edit" to make changes.
We've received your message and will follow up at the email address you provided.
Self-contained inquiry form (input -> confirm -> complete). This preview shows the SSR input panel only — the input -> confirm -> complete transitions (and the optional async submit-adapter error path) are driven by the paired ContactFormEnhancer island, which a consuming app mounts separately (see the component's JSDoc). Without it, this is a fully-functional static form whose `<form>` has no `action`.
1 variant
Fill in and submit the form below. Our recruiting team will review it and email you with next steps. Fields marked Required must be filled in.
Review the details below before sending. Use "Back to edit" to make changes.
We've received your entry. Our recruiting team will follow up at the email address you provided with details on next steps. Thank you for applying.
Self-contained recruiting entry form (input -> confirm -> complete). This preview shows the SSR input panel only — the transitions are driven by the paired RecruitFormEnhancer island, mounted separately by a consuming app (see the component's JSDoc).
2 variants
Click Browse to pin the category walk open, click outside (or press Escape) to close.
Render-null a11y island for SiteHeader's Browse category walk: syncs aria-expanded, adds click-to-pin, and Escape/outside-click to close. The panel already opens on hover/focus via pure CSS.
1 variant
Click the search icon (⌕) to focus the input, press Escape to collapse it again.
Render-null a11y island for SiteHeader's search toggle: syncs aria-expanded to real focus-within state, focuses the input on click/tap, and Escape collapses it. The input already expands on focus-within via pure CSS — mount this alongside SiteHeader (via the consumer's own Island with ssrFallback={null}) to layer the enhancement on top.
1 variant
Hover the Browse button, or Tab from it through the section destinations, to open the no-JavaScript category walk.
Full-width sticky desktop header: brand lockup, a real section-tree Browse disclosure, theme control, and utility navigation.
2 variants
Precision plastic molding manufacturing and sales.
Founded 1983 · Example Prefecture
Contracted logistics operations for the group.
Founded 2003
Contract analysis services.
Founded 2020 · Example Prefecture
Card grid listing a company's group/subsidiary companies, each with its business, founding year, and (optional) location.
3 variants
Vertical "year / event" company history timeline — accent year in the left column, a connecting rule + node in the middle, event copy on the right.
2 variants
Three strengths that shape how we build new business.
A wide supplier and customer network built over decades of electronics trading.
In-house chemical manufacturing expertise applied to new material development.
Sitting between trading and manufacturing lets us move faster on new opportunities.
Numbered card grid for a "where we create value" positioning section — an accent number badge over a title and body.
2 variants
Four categories spanning electronics and chemicals.
Sensors and modules for advanced systems.
Precision components sourced from a trusted network.
Industrial equipment and systems integration.
Specialty chemical materials for industry.
Product-top card grid, one card per business category with a tagline and a short list of representative items.
2 variants
Decades of relationships across component and material suppliers.
Direct control over quality and lead times for chemical materials.
Serving automotive, medical, and industrial customers alike.
Technical staff who work alongside customers on product fit.
Enumerated "large number + title + body" strengths list, stacked vertically with hairline dividers between entries.
2 variants
Certified across our core manufacturing sites.
Continuous improvement of environmental impact and goal tracking.
Management-certification list (e.g. ISO), each entry a code badge, name, and scope description.
3 variants
01
A rooftop solar installation supplying part of the plant's own power needs.
02
Ground-mounted panels feeding the research center's grid connection.
03
Warehouse-roof solar generation offsetting logistics operations.
04
A regional branch site contributing to the group's renewable capacity.
05
An overseas subsidiary site with its own solar generation program.
Sustainability-style "initiative" card grid, each card numbered and top-rule accented.
3 variants
Sample Co.
A demo company combining two imaginary product lines into one storefront.
First-view hero band: eyebrow + display heading + lead + CTA row over a soft accent-tinted background.
2 variants
We combine trading and manufacturing expertise across four product lines.
Section header block: optional eyebrow, heading, and an optional intro paragraph.
3 variants
Sample Tagline
A demo positioning statement describing what this fictional company does.
A page's main hero band — pins shared Hero to its largest heading scale for a top-level landing page.
2 variants
Sample Tagline
A demo company combining a trading business and a manufacturing business under one roof.
01
Sourcing and distributing components across a wide network of manufacturing partners.
02
Producing specialty chemical materials used across industrial and consumer applications.
Two-pillar positioning section for a company with two distinct sides (e.g. two business lines). Fixed 2-column layout, collapsing to 1 column on narrow screens.
2 variants
Four segments, one company — a quick look at what we do.
Top-page card grid summarizing a company's business segments, each linking through to its own detail page.
2 variants
Five specialized lines, each with its own site and product lineup.
Vacuum equipment, gauges, and integrated solutions.
Specialty materials for advanced manufacturing processes.
Laser sources, optics, and application engineering.
Conferencing hardware and workplace collaboration tools.
A skincare and cosmetics brand under the group.
Card-grid portal listing a company's business lines, each linking through to its own line landing page. Supports filtering to a subset via `only`, and a `bare` mode for embedding in body copy.
3 variants
Our products show up in daily life and industry in ways you might not expect.
LiDAR optical filters and image-processing chips support advanced driver assistance.
Camera modules and interactive whiteboards support digital classrooms.
Components embedded in medical devices, plus hygiene-focused chemical products.
Power device and conditioner components support stable renewable operation.
Top-page excerpt showing a handful of "where our products show up" scenes, teasing through to a fuller scene gallery page.
2 variants
Recruit
We're looking for people who want to tackle real-world challenges across two industries.
Full-width "we're hiring" band pairing a heading/lead with a single prominent CTA to a recruiting page. Same soft accent-tinted band idiom as Hero.
2 variants
Sustainability
Guided by our vision of coexistence between people, technology, and nature.
Expanding a product lineup that supports climate action and resource circulation.
Solar power and LED lighting across our domestic sites reduce energy use.
Employment support and forest volunteering connect us with local communities.
Top-page excerpt of a company's sustainability initiatives, shown as accent cards, teasing through to the full sustainability page.
2 variants
Grid of navigation cards teasing a site's top-level sections, each with a short description and an internal- or external-link affordance.
2 variants
Company-at-a-glance summary band (founding year, capital, headcount, ...). Auto-fit grid with hairline dividers, no media queries.
3 variants
Vacuum Solutions — example-brand.com
Gauges, pumps, and integrated systems, backed by hands-on engineering support.
Shared hero for business-line landing pages, reused across every line with per-line copy. Pair with a `[data-line]` ancestor so its accent color follows that line's theme.
2 variants
Small colored pill for a news item's category, derived from the accent token via color-mix (no dedicated per-category palette).
2 variants
4 results
No matching pages found. Try a different keyword.
SSR-rendered cross-site search results list. Renders a full, correct list from `docs`/`query` alone — the companion `SearchResultsEnhancer` island (see its own story) adds live client-side filtering on top.
3 variants
3 results
No matching pages found. Try a different keyword.
Render-null progressive-enhancement island for SearchResults. Renders nothing itself — on mount it live-filters the result list as the user types and keeps `?q=` in the URL in sync, by attaching behavior to the `data-search-*` hooks SearchResults already renders.
1 variant
Note
An accent-tinted callout that highlights a note in the flow of body copy.
Call-out box for notes/asides in body copy, in an accent-tinted or neutral tone.
4 variants
No components match your search.