Comparison. An accessible feature and option comparison table.
- Technical content
- Static
- Stability · Initial
- ::postkit-comparison
Choose a rendering model
| Feature | Static HTML | Interactive React |
|---|---|---|
| Portable document | Yes | Yes |
| Client JavaScript | None | As needed |
| Interactive controls | No | Yes |
Usage.
<Comparison
title="Choose a rendering model"
columns='["Static HTML","Interactive React"]'
items='[{"label":"Portable document","values":[true,true]},{"label":"Client JavaScript","values":["None","As needed"]},{"label":"Interactive controls","values":[false,true]}]'
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| columnsRequired | JSON string | None | A JSON array of compared option labels. |
| itemsRequired | JSON string | None | A JSON array of feature rows and values. |
| title | string | None | The comparison heading. |
| description | string | None | Supporting comparison copy. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- title
- description
- scroller
- table
- head
- header
- row
- label
- value
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned