Lightweight, generated knowledge of current Muibook Web Components, public attributes, slots, base and semantic tokens, and selected composition examples. Use when creating or reviewing Muibook markup or choosing valid Muibook components without requiring the Muibook knowledge MCP.
Lightweight, generated knowledge of current Muibook Web Components, public attributes, slots, base and semantic tokens, and selected composition examples. Use when creating or reviewing Muibook markup or choosing valid Muibook components without requiring the Muibook knowledge MCP.
Muibook Components
Use this single-file snapshot of Muibook 27.1.0 when the full knowledge MCP is unavailable or unnecessary.
This skill provides component knowledge. When paired with redactd-canvas-muibook, that skill
owns the Redactd tree contract, validation, browser transport, and paste workflow.
Installation & Setup
Install the component library package:
npm install @muibook/components
Register the components in your project entry point:
import "@muibook/components";
Workflow
Search the component reference below for relevant tag names and purposes.
Use only the listed public attribute and slot names. Use the MCP when exact types, defaults, events, parts, or component tokens are required.
Prefer the listed semantic tokens for meaningful UI styling; use base tokens for foundations.
Adapt the embedded compositions when a selected example matches the requested interface.
When working from a wireframe, sketch, or screenshot, activate and follow the wireframe-to-muibook-components skill for visual interpretation rules.
For Redactd Canvas work, hand the selected components or composition tree to
redactd-canvas-muibook. The compositions below already use its canonical
{ id, type, props, children } shape, including slot placement in props.slot.
If the Muibook MCP is available, use its start_here tool for richer or newer guidance. Treat a newer MCP version as authoritative.
Boundaries
Do not invent components, attributes, slots, or token names.
Do not treat internal state or dynamic destination attributes as public props.
Do not expect exact attribute types, defaults, events, parts, component-specific tokens, full UX guidance, or the complete composition library in this lightweight skill; use the Muibook MCP for those needs.
Keep native custom-element tag names when writing HTML. When another tool maps names such as Button to mui-button, follow that tool's schema while preserving the verified public props.
Do not perform Redactd browser or API transport from this skill. Defer that workflow to
redactd-canvas-muibook.
Composition Rules
Build layouts with Muibook primitives such as Container, VStack, HStack, and Grid. Do not add generic wrapper elements solely to create layout, spacing, or margins.
Put named slot placement on the child through its documented native slot attribute. In Redactd trees, store that value in props.slot; never add slot as a top-level node field.
Let documented parent-child context do its work. Do not recreate joined corners, inherited sizing, Menu action normalization, Card surface usage, or similar component behavior with local overrides.
Every Badge must have a non-empty props.text string after trimming. Use a concise visible label; omit the Badge entirely when no meaningful label is available. Badge variants are exactly neutral, positive, warning, attention, and overlay. Omit variant for the default neutral treatment. Never use secondary, default, or error for Badge, even though secondary is valid on components such as Body and Button.
Prefer Slat over an ad hoc HStack for row-like wireframe items with primary content on the left and secondary metadata, value, status, timestamp, badge, count, or action on the right. Use SlatGroup for repeated rows such as activity feeds, settings rows, account details, notifications, transaction lists, project updates, search results, or compact records. Put primary content in slot="start" and trailing metadata/action in slot="end". Always explicitly set variant="row" on standard Slat items unless creating a section header (variant="header"), interactive row (variant="action"), or custom layout; Slat items inside SlatGroup or CardBody rely on explicit variant ("row", "header", or "action") for correct automatic alignment and card/group styles.
Use col="1fr auto" as the default col for Slat. Do not invent a custom Slat column string from an image prompt unless the source clearly requires non-default column tracks; the default Slat columns are preferred for accessory/start/end compositions.
For top-and-bottom positioning inside VStack (such as pushing a footer or action button to the bottom), set fill or height on VStack and apply style="align-self: end;" to the slotted child. Use fill when VStack sits inside a bounded parent (e.g. CardBody, Drawer, or Dialog); use height when specifying an explicit length (e.g. ).
Host State And Framework Boundaries
Use boolean attributes by presence in native HTML. Do not write disabled="false"; omit the attribute when false.
Use documented string values for enum attributes and use host JavaScript properties for structured values such as chart datasets.
Listen to composed host events and read documented event.detail values. Framework wrappers should attach listeners, pass attributes and properties, and forward refs without recreating shadow-DOM behavior.
Set value, checked, disabled, and similar state on the custom-element host. Prefer the host's public focus() method over reaching into its shadow root.
Structured Chart Data
When composing Muibook charts in Redactd, populate the structured Data field through
props.data, or the Series field through props.series for Comparison Chart. Redactd owns
passing that structured value to the underlying Muibook component. Do not stringify the array,
place JSON inside an HTML attribute, or generate JavaScript assignment code.
Data contracts
FinancialChart.props.data: [{ time, open, high, low, close, volume? }]
MarketSparkline.props.data: [{ time, value }]
FinancialBarChart.props.data: [{ time, value }]
ComparisonChart.props.series: [{ id, label, color?, data: [{ time, value }] }]
For every generated dataset:
Keep all measurements as finite JSON numbers, not formatted strings. Use 4.2, 101.28, or
18400000, not "4.2%", "101.28 USD", or "18.4M". Formatting belongs in component props and
composed labels.
Use one unique time value per datum within a dataset or comparison series. Sort points from
oldest to newest even though the components defensively sort copied input arrays.
Prefer ISO YYYY-MM-DD strings for daily and periodic illustrative data. Unix timestamps in
seconds or milliseconds are also accepted when supplied by the user. Do not mix time formats in
one generated dataset.
Match the cadence to the subject: daily points for illustrative market performance, monthly or
quarterly points for economic and business reporting, and the user's supplied cadence when one
exists.
Generate enough coherent points to make the requested pattern visible. Avoid random-looking
values, impossible OHLC relationships, duplicate dates, and placeholder sequences such as
1, 2, 3 unless that sequence is genuinely meaningful.
Treat generated values as illustrative data. Preserve user-supplied data exactly apart from
chronological ordering; do not silently change units, normalize values, or invent missing facts.
Financial Chart: OHLCV market data
Use Financial Chart for open/high/low/close market observations. Candlestick and area presentations
both consume the complete OHLC shape; area charts plot each datum's close. volume is optional
and should be non-negative when supplied.
For every datum:
high must be greater than or equal to both open and close.
low must be less than or equal to both open and close.
Keep all price fields in the same unit and use the matching currency label.
Keep consecutive points plausible for the requested market and interval. The next open may
differ from the previous close, but unexplained extreme gaps should not appear in illustrative
data.
Use Market Sparkline for compact prices, indexes, yields, rates, totals, and KPI trends when shape
and direction matter more than dense inspection. Supply raw numeric values and keep currency, visible
labels, trend, baseline, and scale as component or composition props rather than embedding them
inside the data.
A price or index trend can use ordinary positive values.
A yield or rate uses the numeric rate value, such as 4.38; a visible header can render 4.38%.
A baseline series still uses { time, value }; set the comparison point through props.baseline.
trend: "auto" compares the first and latest values. Do not pre-color individual data points.
Financial Bar Chart: periodic magnitudes and signed values
Use Financial Bar Chart for periodic economic or financial values such as inflation, interest rates,
volume, revenue, returns, and cash flow. Match formatting and color semantics to the data:
value-format: "percent" expects ordinary percentage values such as 4.2, not decimal fractions
such as 0.042 and not strings such as "4.2%".
value-format: "currency" expects full numeric currency values and uses currency for display.
value-format: "volume" expects full numeric quantities such as 18400000; do not abbreviate the
stored number to 18.4 merely because the rendered label uses compact notation.
Use variant: "neutral" when magnitude is the main message. Use variant: "directional" when
values above and below baseline carry positive/negative meaning. Negative values are valid.
Comparison Chart: named collections of time/value series
Comparison Chart uses props.series, never props.data. Every series needs a unique stable id, a
human-readable label, and its own chronological data array. Omit color to use the component's
theme-aware automatic series palette unless the user supplies an explicit series-color requirement.
Choose the mode before generating values:
mode: "absolute" preserves supplied values. Use it when all series share the same unit and scale,
such as actual versus forecast revenue. Set value-format and currency to match that unit.
mode: "indexed" rebases each series to 100 from its own first value. Supply the original raw
values—even when series have very different price levels—and let the component normalize them.
mode: "percent" calculates percentage change from each series' own first value. Supply raw values,
not precomputed percentage changes.
Indexed and percent series need a finite, non-zero first value so the component can calculate the
transformation.
Series may cover different date ranges. Align dates when point-for-point comparison matters; for
actual-versus-forecast data, sharing the handoff date can make continuity explicit.
Example indexed comparison using raw values with different magnitudes:
Chart headers are composable named-slot regions, not a fixed subcomponent or required anatomy.
Build them from the Muibook layout and content components that fit the information the user asks
for. The examples below are starting points to adapt, simplify, reorder, or extend; do not reproduce
every child merely because it appears in an example.
Put the outer header layout directly inside MarketSparkline, FinancialBarChart, or
ComparisonChart with props.slot: "header". Slot placement stays inside props, never on the
node itself.
Start with the smallest useful hierarchy: a visible title and optional supporting copy. Add an
instrument badge, current value, change, units, forecast, release date, actions, or other context
only when it supports the requested chart.
Use VStack for vertically grouped title, value, and supporting text. Use HStack for related
inline metadata or to place two meaningful groups at opposite sides of a wider header. Allow
wrapping when a split header or legend may run out of horizontal space.
Use Heading with level: "none" for prominent values or display labels that should not create a
document section. Use a semantic heading level when the chart title introduces a real section in
the surrounding page hierarchy.
Keep the chart's accessible label even when the same idea is visible in the composed header.
Pair trends and series colors with text; color and plot shape must not carry the meaning alone.
Market Sparkline defaults to scale: "none" so both axes stay hidden, including when it is
interactive. Set scale to both, time, or price only when the compact trend needs a visible
reference axis. Financial Bar Chart and Comparison Chart default to scale: "both". Across all
three components, the value/price scale appears on the right and the time scale along the bottom;
scale controls which axes are visible and does not reposition them.
ComparisonChart also exposes a legend slot. A compact legend may sit beside the title inside
the header; use a separate child with props.slot: "legend" when the legend needs its own row or
independent layout. Whichever placement is chosen, label every supplied series and keep legend
colors consistent with the series.
FinancialBarChart and ComparisonChart provide their own native padded header region and divider strokes.
Never use CardHeader or a table header (RowGroup[heading]) above or inside the chart.
Placing a CardHeader above a chart causes duplicate headers, conflicting borders, and mismatched padding.
Example Market Sparkline header with instrument context and a current value:
Treat a global top header plus side drawer as an app-shell fragment. The top header and Drawer are
siblings inside one vertical shell so opening a push Drawer affects only the Drawer page region, not
the global header above it.
Use a VStack shell with zero spacing when the header spans the full application width.
Place HeaderBar first. When the Drawer has an explicit width such as 320px, use that same value
for HeaderBar.props.left-width. Keep the explicit value on Drawer; do not omit or replace the
configured Drawer width.
Use a child with props.slot: "left" as the Drawer-aligned header region, commonly containing the
menu (or “hamburger”) action button with circular shape (shape: "circle", variant: "tertiary")
and product identity. Use icon-only buttons with shape: "circle" for top header bar actions such as
menu toggle, search, settings, and notifications.
Set HeaderBar.props.size instead of manually assigning height tokens. Use bottom-border: true
when the shell needs the standard separator and let HeaderBar own its surface and column borders.
Put search, page identity, and primary actions in HeaderBar's default region. Use props.slot: "right"
only for a separately aligned right panel region. Follow the Header Bar Composition Density Guide
for action, SearchInput, Dropdown, AvatarChip, and responsive choices.
Place the Drawer second. When the shell fills the viewport, set Drawer height to
calc(100dvh - var(--header-min-height-medium)) so the combined header and drawer region do not
exceed the viewport.
Keep Drawer navigation in its default slot. When using panel-padding="none" on Drawer (recommended for custom action stacks), add padding="var(--space-400)" to the VStack housing the action items so navigation links/buttons have proper inset. For navigation items, use tertiary Button or Link actions with align: "start", gap: "var(--space-200)" (for medium buttons), and exact Muibook icons in props.slot: "before" when icons are useful. Do not add redundant section titles like "Navigation".
Wrap adjacent page content in a plain direct Div child with props.slot: "page"; compose
Container, Stack, Grid, and product content inside that wrapper.
Use hide-header: true when the global header owns the shell chrome and the Drawer does not need
its built-in title/close row. Do not also generate a hidden Drawer title child.
Keep every slot only in props.slot; never add beside , , , or .
Header Bar Composition Density Guide
Treat these as starting points for coherent sizing, not fixed recipes. Header Bar content density can
change with the product, available width, action priority, input purpose, and whether identity copy
needs to remain visible. Components inside HeaderBar keep their own public size APIs; HeaderBar size
controls the bar height but does not require every child to use the same size.
Standard application shell
Start with HeaderBar size="medium" and a primary SearchInput size="medium".
Use circular icon-only Buttons for menu, search, settings, and notification actions. Tertiary is a
quiet default; secondary is useful when an action needs a clearer boundary, especially a
notification action carrying a Badge.
A common notification composition is a Button variant="secondary" shape="circle" with an exact
notification icon and Badge slot="badge" variant="attention". Badge size and placement are
inherited from Button; do not set them manually unless the design deliberately departs from the
automatic scale.
A common profile composition is an unsized Dropdown containing a tertiary action Button, an
unsized AvatarChip, and a down-chevron in slot="after". HeaderBar applies usage="header-bar";
Dropdown inherits HeaderBar size and passes it to Button, which passes it to AvatarChip. Let the
chevron inherit its size. Follow the Avatar Chip Profile Actions fragment for the complete tree.
Use gap="var(--space-400)" when the identity copy and chevron need the demonstrated Header Bar
spacing.
Group the notification Button and profile Dropdown in an HStack with
space="var(--space-500)" for the demonstrated standard composition. This is a recommended
separation between distinct controls, not a required HeaderBar spacing value.
When that full-height profile Dropdown is the final control in HeaderBar's main region, keep only
the main region's left inset and let the profile action meet the right edge. If the Dropdown is the
terminal content of slot="right", its wrapper does not need additional padding.
Compact shell or constrained main column
Use HeaderBar size="x-small" or size="small" when the whole shell is intentionally dense.
Search may use SearchInput size="small", an icon-only circular search Button, or move into a
separate surface. Choose based on whether search must remain immediately editable.
Keep supporting actions at x-small or small density. Tertiary actions reduce visual weight;
secondary actions retain a visible boundary.
Use Dropdown size="x-small" or size="small" with a matching AvatarChip when profile copy still
fits. Use an avatar-only circular trigger when the compact layout cannot support both identity
lines.
Spacious or workspace shell
Use HeaderBar size="large" when the header carries workspace context, larger identity, or a more
prominent command region.
Search can remain medium for familiar control density or increase to large when it is the dominant
task. Do not enlarge it solely because HeaderBar is large.
Actions and profile controls may remain medium while HeaderBar supplies the extra surrounding
space. Increase AvatarChip or Dropdown size only when the identity treatment benefits from the
added emphasis.
Responsive composition choices
Use Responsive around complete HeaderBar alternatives when the app-shell structure changes at a
viewport breakpoint.
Use nested Responsive variant="container" inside the main HeaderBar region when only search and
action composition should react to the available main-column width.
A compact alternative can replace an editable SearchInput with a search action and replace an
AvatarChip Dropdown trigger with an avatar-only trigger. These are options, not mandatory mobile
substitutions.
Prefer one live control tree when state must be preserved. Do not duplicate stateful search,
menus, form controls, IDs, or other state merely to create a visual breakpoint.
Composition options can be mixed. For example, a medium HeaderBar can explicitly use a small profile Dropdown,
a medium SearchInput, and medium circular actions; another valid product may use tertiary actions,
an avatar-only profile trigger, or no search at all.
Reference fragment (adapt the labels and page content to the requested product):
HeaderBar and Drawer deliberately remain independent components. The application shell owns their
shared state: Drawer is the source of truth for whether navigation is open and for its current
width, while HeaderBar reflects that state and can emit resize intent back to Drawer.
This is runtime integration guidance, not part of a static Redactd JSON tree. A generated tree
should describe the initial HeaderBar and Drawer composition; the consuming application should add
the event and state wiring appropriate to its framework.
Open and close state
Connect every menu action to the Drawer's public open() and close() methods.
Derive each trigger's aria-expanded value from the Drawer's open attribute. Re-sync from
mui-drawer-open and mui-drawer-close so programmatic and user-driven changes remain aligned.
When the left HeaderBar region only exists for an open Drawer, keep the identity group in the DOM
and add or remove slot="left" from that group. Removing the slot moves the same live content into
HeaderBar's main region and lets the unused side column collapse; restoring the slot re-establishes
drawer alignment without recreating the content.
Apply the same pattern to slot="right" for a right-side Drawer.
Width and resize state
Treat Drawer width as the shared persisted width. Mirror it to HeaderBar left-width or
right-width, including width changes made outside the HeaderBar.
When HeaderBar has resize-rail, listen for mui-header-bar-resize and write event.detail.width
to the aligned Drawer. Check event.detail.side before updating a side.
During mui-header-bar-resize-start, mark the Drawer as resizing so its normal width transition
does not lag behind pointer movement. Clear that state on mui-header-bar-resize-end.
Avoid separate competing width state in both components. One shared value prevents drift and
feedback loops.
Use AvatarChip when avatar, primary identity, and optional secondary identity should travel as one
profile trigger. AvatarChip owns identity layout; Button owns interaction, Dropdown owns disclosure,
and Menu owns account actions.
Owned by AvatarChip
Internal Avatar rendering, including image, initials fallback, label, and background treatment.
Primary and secondary identity layout, whether supplied through the simple primary and
secondary props or the matching named slots.
The internal gap and alignment between Avatar and identity copy.
Coordinated Avatar, primary text, and secondary text scaling from AvatarChip size.
Composed by the consumer
Button semantics, accessible action label, visual variant, action size, and interaction states.
Dropdown placement, disclosure state, and propagation of density to its action Button and Menu.
The optional down-chevron in Button's after slot. It is not part of AvatarChip.
Menu structure and its Profile, Settings, Sign out, or product-specific actions.
Layout around the control, including its relationship to notification and search actions.
Responsive replacement with an Avatar-only trigger when the identity copy no longer fits.
Do not add custom HStacks, Avatars, or text wrappers inside Button to reproduce the identity row that
AvatarChip already owns. Conversely, do not expect AvatarChip itself to provide Button, Dropdown,
chevron, Menu, or responsive disclosure behavior.
Composition rules
A profile Dropdown must contain one Button with props.slot: "action" and one direct Menu child.
Put AvatarChip inside the action Button; never place AvatarChip directly inside Dropdown.
Add a down-chevron with props.slot: "after" when the trigger needs an explicit menu affordance.
Omit chevron size so Button can apply its scale.
Outside HeaderBar, set Dropdown size when a deliberate density is required. Dropdown passes its
size to the trigger Button and Menu. AvatarChip may match that size explicitly; Button also keeps
composed AvatarChip density aligned.
variant: "secondary" gives a standalone profile action a visible boundary. variant: "tertiary"
is a valid quieter option and is the demonstrated HeaderBar treatment. Choose emphasis from the
surrounding action hierarchy rather than treating either variant as mandatory.
Inside HeaderBar, prefer leaving Dropdown, Button, AvatarChip, chevron, and Menu unsized when they
should inherit HeaderBar density. HeaderBar applies the contextual usage, Dropdown propagates size,
and AvatarChip maps its internal Avatar footprint to the matching action token.
In the demonstrated HeaderBar composition, use gap: "var(--space-400)" on the profile Button.
Button supplies size-aware logical edge spacing for AvatarChip and its trailing chevron.
When identity copy does not fit, use an Avatar-only action Button inside Dropdown. The Button size
remains authoritative and the Avatar adopts the matching action footprint. Avatar-only HeaderBar
actions stay compact rather than stretching to the full HeaderBar height.
Foundations if needed: --grey-50 to --grey-1400; --red|--orange|--green|--blue-100 to 1000
Do not invent --color-* aliases. Do not use raw #hex or color names.
Assets
Image src, SmartCard logo, partner, and bg-image must be absolute https://muibook.com/images/... URLs. Never emit a bare filename.
mui-action-toggle — Switches a prompt action between its compact trigger and expanded active content. Attributes: mode. Slots: default.
mui-addon — Adds compact leading or trailing supporting content to an input control. Attributes: slot, size. Slots: default.
mui-alert — Surfaces task-related feedback with an intent icon, message content and optional action. Attributes: variant, label, hide-label, size. Slots: default, action.
mui-avatar — Displays an image, initials, or slotted icon for a represented person or entity. Attributes: label, image, size, background, background-color, status, status-label, usage. Slots: default.
mui-avatar-chip — Composes an avatar, primary label, and secondary label into a compact profile identity pattern for media metadata, creator rows, and compact profile references. Attributes: primary, secondary, image, label, background, background-color, href, target, usage, size. Slots: primary, secondary.
mui-avatar-group — Stacks multiple avatars with controlled overlap and a separating ring. Attributes: size, overlap, label, fan. Slots: default.
mui-badge — Displays compact, non-interactive presentational labels, counts, or lightweight metadata. Use for labels such as Beta, Default, IMG, or Shared when they support the surrounding UI rather than acting as the primary state field for a record. Use Status for state values in tables and slats. Attributes: variant, size, color, usage. Slots: default.
mui-body — Renders body text with semantic size, weight and feedback color treatments. Attributes: size, weight, variant, truncate, clamp. Slots: default, before, after.
mui-button — Triggers an action with semantic button behaviour, visual emphasis variants, and optional leading or trailing content. Attributes: onclick, type, aria-label, disabled, pending, variant, stroke, stroke-ring-size, focus-ring, size, usage, width, shape, gap, align. Slots: default, before, after, badge.
ملف SKILL.md هذا كبير جدا، لذلك يعرض SkillsMP القسم الاول فقط هنا.عرض على GitHub
height="300px"
Explicitly define layout boundaries to prevent unpredictable canvas rendering. For VStack and HStack, always output width="auto" and height="auto" unless a specific dimension or fill is required.
For Grid, never leave col empty. It defaults to two columns (1fr 1fr), so omitting it can lead to unexpected layouts.
For Dialog and Drawer, omit width and height properties to inherit their design system defaults (350px and 320px respectively) unless explicitly overriding them for a specific use case.
For Drawer, use open plus side for overlay, push, and persistent drawers. The side property (left or right) should match the position of the menu icon trigger. Push and persistent drawers use slot="page" for adjacent page content; left-open, right-open, left-width, right-width, and the left/right slots are workspace-only.
A Drawer-only app shell may use Drawer as the root. When a global top header must remain full-width above the Drawer region, use a zero-space VStack root with HeaderBar first and Drawer second. Preserve an explicit Drawer width and apply the same value to HeaderBar left-width, keep the page in a direct plain wrapper with props.slot="page", and size the Drawer to the remaining shell height. Do not reconstruct HeaderBar with Grid or manual height, border, and surface styles. Follow the Header Bar With Drawer Region fragment and Header Bar Composition Density Guide below.
Before assigning an icon, inspect the available mui-icon-* component names in this reference or the selected component knowledge and use an exact existing name. If none semantically matches the requested concept, use Redactd _Icon with icon="mui-icon-rectangle" as the neutral fallback. Never invent an icon component or icon name.
In Drawer navigation, compose nav items as Button or Link with align="start", variant="tertiary" as the default (non-prominent) emphasis, and a slot="before" _Icon matching the item's meaning.
When composing a user profile or avatar pattern, use AvatarChip rather than constructing a custom avatar layout. For profile menus, follow the Avatar Chip Profile Actions fragment: Dropdown contains an action Button plus a direct Menu; AvatarChip belongs inside Button. Secondary is a useful standalone treatment, while tertiary is the demonstrated quieter HeaderBar treatment.
For equal Grid columns, use col: "repeat(N, minmax(0, 1fr))". Do not use numeric counts or repeated bare 1fr tracks.
Layout spacing values must use complete CSS token references such as var(--space-400); never use space-400, 400, or another bare scale value. Use var(--space-000) for zero spacing.
CSS length props and style values must include valid units or CSS functions. For height, width, max-height, min-height, padding, margin, gap, and similar CSS lengths, use values such as 320px, 20rem, 100%, 100vh, auto, or var(--space-500); never output bare numeric strings such as 320 or 20 unless the component API explicitly documents a number scale for that prop.
Prefer container-based responsiveness for reusable components and compositions. Use viewport responsiveness only for page-level or app-shell decisions that genuinely depend on browser width.
Use Grid for repeated Cards, page regions, forms, and other primary layout structure. When a collection should naturally reduce its column count as its container narrows, use intrinsic tracks such as col="repeat(auto-fit, minmax(min(100%, 18rem), 1fr))" and choose the minimum width to suit the content. Use repeat(N, minmax(0, 1fr)) only when the requested number of columns must remain fixed.
Use HStack wrap only for compact inline relationships such as actions, chips, metadata, legends, and small toolbar groups that remain meaningful across multiple horizontal lines. Wrapping does not turn HStack into VStack. Do not use a wrapping HStack as the default for main page regions, card collections, forms, or a deliberate horizontal-to-vertical layout change.
When substantial side-by-side regions need a deliberate horizontal-to-vertical change based on available parent space, prefer a one-tree intrinsic Grid when the content can simply reflow. Use Responsive variant="container" with HStack in show-above and VStack in show-below only when the composition itself must change. Because the Responsive alternatives duplicate their child tree, do not use that swap for stateful controls, forms, duplicate IDs, or content that must preserve one live instance; use a one-tree Grid or a purpose-built responsive component instead.
Card has no width size scale. Its width comes from Grid, Container, the parent layout, or an explicit constrained style. Set size on Card to propagate internal padding density to its direct Card Header, Body, and Footer sections: medium is the default, small is compact, large is spacious, and none is edge-to-edge. Set size directly on an individual section only when Card has no size. Card-aware Tables, Accordions, and Slats remain edge-to-edge inside Card Body and inherit the per-size content inset. Treat that inset as alignment behavior, not a requirement to derive child density from Card size. Choose Table, Accordion, or Slat size from the content, available width, readability, and touch-target needs. Card Body size-offset stories are diagnostic references rather than canonical compositions. Medium is the safe default for complete Slat groups; avoid none or small Cards for them unless the content has been validated. Tables and Accordions can work across Card sizes when their content remains usable. Use usage="grid" on repeated Cards when their headers and footers should align; direct children retain document order, Card Body receives the flexible row, and composed elements such as Rule remain auto-sized. Let Grid size repeated Cards rather than styling each Card width independently.
Use Heading levels 1-6 for document structure. Use level="none" only for prominent display text, such as a metric value, that must not enter the heading outline.
Compose forms with Form Section, Form Group, Field, and the appropriate form control. Keep labels, messages, validation, and control behavior in those components instead of rebuilding them from generic text and layout primitives.
When embedding a chart in a Card, use Card with size: "none" and usage: "grid", containing a direct child CardBody with size: "none" wrapping the chart. Let the chart own the full card boundary, internal header padding, and plot divider.
Compose the chart header directly in props.slot: "header" using an HStack (or Stack) with alignX: "space-between", alignY: "center", and space: "var(--space-300)" or "var(--space-400)":
Start (Left): Section Heading (e.g. size="4", level="2") or a title + subtitle stack.
End (Right): Interactive controls or range selector — such as a timeframe Dropdown (position: "right", size: "small") containing a trigger Button (slot: "action", size="small", variant="secondary", e.g. text "This week", with trailing dropdown _Iconmui-icon-down-chevronsize="x-small" in slot="after") and a Menu with action options ("Today", "This week", "Last 30 days", "Year to date").
Use header-stroke on Financial Bar Chart or Comparison Chart only when the requested composition
should visually join the populated header to the plot without the default divider.
slot
id
type
props
children
If the HeaderBar should move with or belong only to the page region, place it inside the Drawer page
wrapper instead. If there is no global header, Drawer can remain the root node.
mui-button-group — Arranges related buttons horizontally or as full-width stacked actions. Attributes: layout, align, right, space. Slots: default.
mui-calendar — A flexible, accessible calendar grid for selecting dates. Attributes: value, view, min-date, max-date. Slots: none.
mui-card — Frames related content in a bordered surface and coordinates spacing with its slotted card sections. Card size controls section padding; Card width comes from the parent layout or an explicit constrained style. Attributes: footer, borderless, size, usage. Slots: default.
mui-card-body — Displays the main content area of a card and adapts spacing for known layout components. Attributes: size. Slots: default.
mui-card-footer — Displays supporting actions or code content after the main card body. A contained Button Group removes the Footer's top padding while preserving its size-aware inline and bottom spacing. Attributes: size. Slots: default.
mui-card-header — Displays heading or summary content at the top of a card. Attributes: size. Slots: default.
mui-chip-rail — Displays a horizontal rail of chips with scroll overflow controls and edge masking. Attributes: size, bleed, bleed-inline-size, bleed-block-size, skip-label, aria-label. Slots: default.
mui-code — Displays code or formatted text in a monospace surface. Attributes: size, scrollable, wrap, inline, usage. Slots: default.
mui-color-input — Captures a hexadecimal colour value through a native colour picker with accessible labelling and supporting guidance. Attributes: value, name, id, label, description, size, disabled, hide-label, hide-value, hide-text, gap, copyable, no-copy. Slots: description, before, after.
mui-comparison-chart — Compares multiple financial time series as absolute, indexed, or percentage-change lines. Attributes: mode, label, value-format, currency, height, scale, interactive, attribution, loading, error, header-stroke. Slots: header, legend, footer.
mui-container — Constrains content to a centered or fixed-width layout band with optional size variants. Attributes: width, center, fluid, small, medium, x-medium, large, x-large, size. Slots: default.
mui-context-bar — Displays a compact prompt context row in the context-above or context-below slot of mui-prompt, usually for an active task, selected context, steering target, or attached instruction. Attributes: none. Slots: default, actions.
mui-date-picker — A composed date and time picker input. Attributes: value, type, label, description, hide-label, optional, size, variant, menu-slot, padding-block, padding-inline, surface. Slots: description.
mui-dropdown — Displays a triggered overlay menu with configurable alignment, direction, and persistent interaction behaviour. Attributes: zindex, position, vertical-position, persistent, size, offset, usage. Slots: action, default.
mui-field — Wraps a form control with shared label, sizing, and message feedback behavior. Attributes: variant, message, label, description, hide-label, size, optional, required. Slots: default, message.
mui-file-diff — A component representing a file and its diff stats. Attributes: filename, filepath, additions, deletions, result-slot, card-slot, result-slot-last. Slots: icon.
mui-file-icon — Renders a pinned VSCode Icons file-type SVG from the vscode-icons CDN. Attributes: icon, type, size, label, decorative. Slots: none.
mui-file-upload — Provides a file picker control that displays the current or newly selected file name. Attributes: accepted-file-types, current-file-name, acceptedfiletypes, currentfilename. Slots: none.
mui-financial-bar-chart — Displays time-based financial or economic values as a responsive histogram. Attributes: variant, label, value-format, currency, baseline, height, scale, interactive, attribution, loading, error, header-stroke. Slots: header, footer.
mui-financial-chart — Displays responsive candlestick or area market data with volume and time-range controls. Attributes: type, trend, symbol, currency, interval, height, selected-range, ranges, attribution, loading, error, header-stroke. Slots: none.
mui-form-group — Groups related form controls with optional headings and configurable layout spacing. Attributes: heading, heading-level, heading-space, hide-heading, hide-label, variant, space, aligny. Slots: default.
mui-form-message — Displays helper or validation copy for a form control with optional semantic icon content. Attributes: size, weight, variant. Slots: default, before, after.
mui-form-section — Groups related form controls in a labelled fieldset with optional header and footer content. Attributes: heading, heading-level, disabled, borderless. Slots: default, header, footer.
mui-form-section-footer — Provides consistent spacing for actions and optional divider content in a form section footer. Attributes: none. Slots: default.
mui-grid — Arranges slotted content in a configurable grid with token-based spacing and alignment controls. Attributes: col, space, alignx, aligny, padding, height, width, viewport, fill. Slots: default.
mui-header-bar — A standalone Web Component for top application shell and workspace page headers, with drawer-aligned side columns, token-bound heights, surface variants, and optional resize rails. Attributes: size, left-width, right-width, bottom-border, surface, resize-rail, resize-min-column-width, resize-min-main-width. Slots: left, default, right.
mui-heading — Renders heading typography with an independently configurable visual size and semantic level. Attributes: size, level, truncate, clamp. Slots: default.
mui-hint — Displays contextual tooltip content when its trigger receives hover or keyboard focus. Attributes: placement, open, delay, initial-delay, size, disable-on-touch. Slots: default, trigger.
mui-icon-toggle — Transitions between two slotted icons to communicate an active or expanded state. Attributes: toggle, rotate, morph, size. Slots: start, end.
mui-illustration-trash — Representative API for Muibook illustration elements. Attributes: size, color, motion. Slots: none.
mui-image — Frames a slotted image with optional cropping, focal positioning and caption content. Attributes: height, fit, crop, position, zoom, focal-x, focal-y, radius, aspect-ratio. Slots: image, caption.
mui-input — Captures a single text-like form value with label, validation state and composable affordance slots. Attributes: type, name, value, placeholder, id, label, description, disabled, required, readonly, read-only, autocomplete, autocorrect, autocapitalize, spellcheck, hide-label, variant, optional, max-length, size, align, input-mode, pattern, step, slot-layout, autofocus, menu-slot, padding-block, padding-inline, surface. Slots: description, before, after, inside-before, inside-start, inside-after, inside-end, hint.
mui-link — Provides anchor navigation as an inline link or action-styled link with optional supporting content. Attributes: target, href, variant, disabled, weight, stroke, stroke-ring-size, focus-ring, size, download, usage, width, align. Slots: default, before, after.
mui-list — Groups ordered or unordered list item content. Attributes: as. Slots: default.
mui-list-item — Renders one text item within a mui-list. Attributes: variant, size, weight. Slots: default.
mui-loader — Animates slotted content into view for loading and refresh states. Attributes: loading, animation, direction, duration. Slots: default.
mui-market-sparkline — Displays a compact financial time series as a line, area, or baseline chart. Attributes: type, trend, label, currency, height, baseline, scale, interactive, attribution, loading, error. Slots: header, footer.
mui-media-player — Renders native or embedded audio and video media from a supplied source, with optional Muibook controls for direct media files and composable metadata for titles, avatars, links, badges, and product actions. Attributes: src, type, autoplay, muted, loop, poster, artwork, media-title, height, no-radius, center-play, loading, controls, waveform. Slots: meta-before, meta-after.
mui-menu — Provides the visual surface and vertical layout for menu actions and grouped overlay content. Attributes: size, inset, width. Slots: default, top, bottom.
mui-message — Presents a persistent page-level notification with an intent icon, heading, and slotted supporting body content. Use Form Message for form guidance and Body with an info icon for lightweight inline notes. Attributes: variant, heading, icon, size. Slots: default.
mui-model-viewer — Renders interactive 3D models using Google's model-viewer custom element, with native model element support in Safari on visionOS 2+ as a progressive enhancement. Attributes: src, ios-src, poster, alt, controls, camera-controls, auto-rotate, ar, loading. Slots: default, poster.
mui-preview-chip — Displays a compact preview of pasted or attached prompt context and optionally opens fuller content. Attributes: value, badge, label, accent, bg-image, image-tint, inverted, badge-only, show-text, animated, animation-mode, variant, clickable, loading, loading-label. Slots: none.
mui-progress — Displays determinate progress or an indeterminate pending or syncing state. Attributes: progress, state. Slots: none.
mui-progress-ring — Displays circular determinate progress with optional generated center text. Use for compact progress summaries in dashboards, cards, tables, and responsive summaries. Attributes: progress, value, max, label, size, display, display-value, color, tooltip, tooltip-trigger, tooltip-placement. Slots: none.
mui-radio — Selects one labelled option, typically coordinated by mui-radio-group. Attributes: checked, disabled, id, name, value, aria-label, size. Slots: default.
mui-radio-group — Coordinates a labelled group of mui-radio choices and owns the selected value. Attributes: name, value, disabled, size, label, description, hide-label, optional. Slots: default, description.
mui-range-input — Selects a numeric value on a range track with optional formatted value feedback. Attributes: min, max, value, step, disabled, bubble, bubble-format, size, label. Slots: none.
