Typography@knitui/components

Blockquote

Blockquote renders a styled quotation block with a solid accent border on the inline-start edge, an optional icon badge floated over the top-left corner, and an optional cite attribution line. Accent color comes from the active theme ramp; recolor via the theme prop. radius rounds the inline-end corners.

WebiOSAndroid3 style slots3 own props11 examples

Stories Source Tests Open in Storybook

import { Blockquote } from "@knitui/components";

Playground

Loading playground…

sizeControls token-driven padding, body text, and cite spacing/type.

radiusRounds the inline-end corners of the blockquote frame.

iconSizeWidth and height of the icon badge from the `$size` scale. Numbers are also supported.

themeActive theme accent — recolors the border and icon via the palette ramp.

cite

children

Playground

<Blockquote
  radius="md"
  size="md"
>
  The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.
</Blockquote>

Examples

Default

A plain quote with no icon or attribution.

Loading example…

DefaultSource Storybook

With Cite

A string cite prop renders a dimmed attribution line beneath the quote.

Loading example…

With CiteSource Storybook

With Icon

An icon node is rendered in a circular badge floated over the top-left corner.

Loading example…

With IconSource Storybook

Sizes

All seven token sizes drive padding, text, and cite spacing.

Loading example…

SizesSource Storybook

Shadows

Elevation via the shared shadow ladder — inherited from Box, so every component accepts it; no shadow unless set.

Loading example…

ShadowsSource Storybook

Icon Sizes

Icon badge size can be adjusted; the badge repositions itself relative to its size.

Loading example…

Icon SizesSource Storybook

Radii

All radius values — only the inline-end corners are rounded; the bordered edge stays square.

Loading example…

RadiiSource Storybook

Custom Cite Node

A non-string cite renders any React node as-is in place of the default cite text.

Loading example…

Custom Cite NodeSource Storybook

Themed

The accent color follows the active theme — same component, different hue.

Loading example…

ThemedSource Storybook

Styles

Per-slot styles targets individual parts — here the text body and cite line.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`cite`	`ReactNode`	—	Attribution for the quote, rendered beneath it.
`disabled` system	`boolean \| undefined`	—
`icon`	`ReactNode`	—	Icon displayed in a badge at the top-left of the quote.
`iconSize`	`BlockquoteIconSize \| undefined` unset · xxs · xs · sm · md · lg · xl · xxl	`"xl"`	Width and height of the icon badge from the `$size` scale. Numbers are also supported.
`radius` system	`string \| number \| undefined` xs · sm · md · lg · xl · none · full	`md`	Rounds the inline-end corners of the blockquote frame.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"md"`	Controls token-driven padding, body text, and cite spacing/type.
`styles` system	`SlotStyles<BlockquoteStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the border and icon via the palette ramp.

Style slots

Every part of Blockquote can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`cite`	`styles={{ cite: { … } }}`
`icon`	`styles={{ icon: { … } }}`
`text`	`styles={{ text: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.