Customization & composition

import { Button } from '@wearables-ui-toolkit/mrbd';

<Button title="Reply" id="reply-btn" data-testid="reply" aria-label="Reply" />;

import { Container } from '@wearables-ui-toolkit/mrbd';

<Container className="my-layout-utility">{children}</Container>;

import { useRef } from 'react';
import { Container } from '@wearables-ui-toolkit/mrbd';

function Anchored() {
  const ref = useRef<HTMLDivElement>(null);
  return <Container ref={ref}>{/* ... */}</Container>;
}

import { useRef } from 'react';
import { Button, type ButtonHandle } from '@wearables-ui-toolkit/mrbd';

function SendButton() {
  const ref = useRef<ButtonHandle>(null);
  return (
    <Button
      ref={ref}
      title="Send"
      icon={sendIcon}
      onClick={() => {
        submit();
        ref.current?.animateActionTransition({ endingIcon: sentIcon });
      }}
    />
  );
}

import { Container, TextView, TextStyle } from '@wearables-ui-toolkit/mrbd';

<Container as="li">
  <TextView as="h2" textStyle={TextStyle.HEADING2}>
    Now playing
  </TextView>
</Container>;

import { Button, Container } from '@wearables-ui-toolkit/mrbd';

import { Button } from '@wearables-ui-toolkit/mrbd/Button';
import { Container } from '@wearables-ui-toolkit/foundation/components/Container';

• @wearables-ui-toolkit/mrbd/styles.css — a self-contained compatibility bundle of Foundation and Meta Ray-Ban Display component styles.
• @wearables-ui-toolkit/mrbd/react-router — the optional react-router integration, which needs the optional react-router-dom peer dependency.

• Style through documented props, theme values, and class hooks. Do not target generated class names, query descendant nodes, or write CSS against internal DOM because that structure is not a public API and can change without notice.
• Supply a ContainerMaterial or ShapeProvider where the component accepts one. Do not replace component-owned material, shape, focus, or press behavior with application CSS. See Materials, motion, focus, and portals.
• Preserve the role, tabIndex, and managed ARIA state computed by an interactable. These values are required for its accessibility behavior.
• Use semantic tokens, TextStyle, and exported motion constants. Avoid hardcoded colors, spacing, radii, typography, durations, and viewport dimensions so themes and responsive layouts remain consistent.
• When no semantic component fits, build on Container, StaticContainer, or InteractableBase to inherit focus, material, and interaction behavior. Avoid imitating a missing component with look-alike markup.
• Render one App and use the toast container, focus provider, and floating portal root it supplies. Duplicating these owners breaks global coordination.