import { ... } from '@ag.ds-next/react/prose';Usage
Prose components can be imported via the prose entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/prose';Props
| Prop | Type | Description |
|---|---|---|
| alignItems? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "stretch" | "baseline"> | |
| as? | ElementType<any> | |
| background? | ResponsiveProp<"body" | "info" | "success" | "error" | "warning" | "shade" | "bodyAlt" | "shadeAlt"> | |
| border? | ResponsiveProp<boolean> | |
| borderBottom? | ResponsiveProp<boolean> | |
| borderBottomWidth? | ResponsiveProp<"sm" | "md" | "lg" | "xl" | "none" | "xxl"> | |
| borderColor? | ResponsiveProp<"border" | "selected" | "muted" | "accent" | "info" | "success" | "error" | "warning"> | |
| borderLeft? | ResponsiveProp<boolean> | |
| borderLeftWidth? | ResponsiveProp<"sm" | "md" | "lg" | "xl" | "none" | "xxl"> | |
| borderRight? | ResponsiveProp<boolean> | |
| borderRightWidth? | ResponsiveProp<"sm" | "md" | "lg" | "xl" | "none" | "xxl"> | |
| borderTop? | ResponsiveProp<boolean> | |
| borderTopWidth? | ResponsiveProp<"sm" | "md" | "lg" | "xl" | "none" | "xxl"> | |
| borderWidth? | ResponsiveProp<"sm" | "md" | "lg" | "xl" | "none" | "xxl"> | |
| borderX? | ResponsiveProp<boolean> | |
| borderY? | ResponsiveProp<boolean> | |
| color? | ResponsiveProp<"text" | "inherit" | "action" | "selected" | "muted" | "accent" | "info" | "success" | "error" | "warning"> | |
| columnGap? | ResponsiveProp<Spacing> | |
| dark? | boolean | |
| display? | ResponsiveProp<"block" | "none" | "grid" | "table" | "flex" | "inline" | "inline-block" | "inline-flex" | "table-row-group" | "table-header-group" | "table-footer-group" | "table-row" | ... 5 more ... | "list-item"> | |
| flexDirection? | ResponsiveProp<"row" | "column" | "row-reverse" | "column-reverse"> | |
| flexGrow? | ResponsiveProp<number> | |
| flexShrink? | ResponsiveProp<number> | |
| flexWrap? | ResponsiveProp<"nowrap" | "wrap" | "wrap-reverse"> | |
| focus? | boolean | If true, the focus indicator will be shown when the element receives keyboard focus. |
| fontFamily? | ResponsiveProp<"body" | "monospace"> | |
| fontSize? | ResponsiveProp<FontSize> | |
| fontWeight? | ResponsiveProp<"normal" | "bold"> | |
| gap? | ResponsiveProp<Spacing> | |
| gridColumnEnd? | ResponsiveProp<number> | |
| gridColumnSpan? | ResponsiveProp<number> | |
| gridColumnStart? | ResponsiveProp<number> | |
| height? | ResponsiveProp<string | number> | |
| highContrastOutline? | boolean | If true, a solid outline will be visible in windows high contrast mode. |
| justifyContent? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"> | |
| light? | boolean | |
| lineHeight? | "heading" | "nospace" | "default" | |
| link? | boolean | |
| maxHeight? | ResponsiveProp<string | number> | |
| maxWidth? | ResponsiveProp<string | number> | |
| minHeight? | ResponsiveProp<string | number> | |
| minWidth? | ResponsiveProp<string | number> | |
| padding? | ResponsiveProp<Spacing> | |
| paddingBottom? | ResponsiveProp<Spacing> | |
| paddingLeft? | ResponsiveProp<Spacing> | |
| paddingRight? | ResponsiveProp<Spacing> | |
| paddingTop? | ResponsiveProp<Spacing> | |
| paddingX? | ResponsiveProp<Spacing> | |
| paddingY? | ResponsiveProp<Spacing> | |
| palette? | ResponsiveProp<"dark" | "light"> | |
| ref? | Ref<Comp extends "symbol" | "text" | "switch" | "image" | "pattern" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | ... 47 more ... | keyof HTMLElementTagNameMap ? ElementTagNameMap[Comp] : Comp extends new (...args: any) => any ? InstanceType<...> : undefined> | |
| rounded? | boolean | |
| rowGap? | ResponsiveProp<Spacing> | |
| textAlign? | ResponsiveProp<"left" | "right" | "center"> | |
| width? | ResponsiveProp<string | number> |
Source
You can view the full source code for this package on Github.