import {River, RiverBreakout} from '@primer/react-brand'Examples
Default
Loading
GridLine variant
The gridline variant adds lateral padding and applies a full-bleed visual background by default. Use position to align media and padding to control its inset.
Loading
Image to text ratio
Loading
Video
Loading
Alternative heading levels
Loading
Duotone
Loading
River breakout
Loading
Component props
River Required
| Name | Type | Default | Description |
|---|---|---|---|
align | 'start', 'end', 'center' | start | Alignment of text content relative to the Visual position |
imageTextRatio | '50:50', '60:40' | 50:50 | The aspect ratio applied to the image in relation to the adjacent text. Affects overall layout proportions. |
variant | 'default', 'gridline' | default | Visual variant. Use gridline to add lateral padding for bordered grid layouts. |
className | string | Sets a custom class on the root element | |
id | string | Sets a custom id | |
ref | React.RefObject | Forward a Ref to the underlying DOM node |
River.Visual Required
| Name | Type | Default | Description |
|---|---|---|---|
fillMedia | boolean | true | Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements. |
children | ReactElement | Bring your own component (BYOC) img or ReactElement (E.g. Next.js Image component) | |
position | 'default''center''block-end''block-end-inline-start''block-end-inline-end' | 'default' | Positions media within the gridline visual region. Explicit positions remain fixed across viewports; default preserves responsive behavior. |
padding | 'default''none''all' | 'default' | Controls media inset within the gridline visual region. none fills the visual region and removes corner radius regardless of rounded; all adds padding on every side. |
hasShadow | boolean | false | Shadow applied to the children. Set be false when the child node has a transparent background. |
className | string | Sets a custom class on the root element | |
id | string | Sets a custom id | |
ref | React.RefObject | Forward a Ref to the underlying DOM node | |
rounded | boolean | true | Toggle visually rounded corners. Enabled by default. |
RiverBreakout.Visual Required
RiverBreakout.Visual supports the children, fillMedia, hasShadow, rounded, and standard HTML props listed above. The position and padding props are specific to River.Visual.
River.Content and RiverBreakout.Content Required
Label, Text,Heading, Link are the only children accepted. They can be composed in any order, but their rendered output will always be in a predetermined order.
| Name | Type | Default | Description |
|---|---|---|---|
children | Text,Heading, Link | Content that corresponds to the adjacent visual. | |
className | string | Sets a custom class on the root element | |
id | string | Sets a custom id | |
ref | React.RefObject | Forward a Ref to the underlying DOM node |
RiverBreakout
| Name | Type | Default | Description |
|---|---|---|---|
className | string | Sets a custom class on the root element | |
id | string | Sets a custom id | |
ref | React.RefObject | Forward a Ref to the underlying DOM node |
RiverBreakout.A11yHeading Required
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | The heading text that will be read aloud to screen readers, but is visually hidden. |