# RealPlus Web Components — Usage Guide
> Generated from the component source. The structural facts (tags, attributes, slots) are
> extracted by the Custom Elements Manifest analyzer and cannot drift from what ships; the
> prose and examples are curated. See `manifest.json` for the machine-readable version.
## What this is
A library of presentational `rp-*` custom elements an LLM drops into report HTML. Load the
one bundle, write the tags, and the components render the polished, on-brand result. The
components are pure presentation — they never fetch data or own report logic; you supply
the data inline (as attributes/properties) or as nested children.
## Setup
Load the single bundle once per report — it registers every element and injects its own
styles. Then write component tags anywhere in the body.
```html
```
## Composition model
Two ways to configure a component, usable together:
- **Nested children (slots)** — *what pieces appear and where*. Place an `rp-media`, an
`rp-fields`, an `rp-chip` inside an `rp-card`.
- **Attributes** — *how pieces are arranged*: density, columns, alignment, variant.
Every component degrades gracefully: missing/partial/unknown input falls back to a safe
default and never breaks the layout. Unknown attribute values are ignored.
## Authoring pattern: data first, then render
**For reports with repeated content — several listing cards, many table rows — define the
data first as plain JavaScript, then render it into `rp-*` markup in a separate step.** Do
not hand-write each repeated card or row. Put a `