Typography Components
Blockquote
Displays quoted content with a left border accent. Inherits appearance from the parent by default for seamless embedding in themed containers.
Basic Usage
Display a styled quotation with a left border accent. Blockquote inherits appearance from the parent by default.
The only way to do great work is to love what you do.
Design is not just what it looks like and feels like. Design is how it works.
BasicUsage.tsx
<Col> <Blockquote>The only way to do great work is to love what you do.</Blockquote> <Blockquote>Design is not just what it looks like and feels like. Design is how it works.</Blockquote></Col>Appearances
Apply appearance props to color the blockquote. The default is inherit, which picks up the parent color.
Primary appearance blockquote.
Brand appearance blockquote.
Accent appearance blockquote.
Secondary appearance blockquote.
Success appearance blockquote.
Danger appearance blockquote.
Warning appearance blockquote.
Info appearance blockquote.
Appearances.tsx
<Col> <Blockquote primary>Primary appearance blockquote.</Blockquote> <Blockquote brand>Brand appearance blockquote.</Blockquote> <Blockquote accent>Accent appearance blockquote.</Blockquote> <Blockquote secondary>Secondary appearance blockquote.</Blockquote> <Blockquote success>Success appearance blockquote.</Blockquote> <Blockquote danger>Danger appearance blockquote.</Blockquote> <Blockquote warning>Warning appearance blockquote.</Blockquote> <Blockquote info>Info appearance blockquote.</Blockquote></Col>Sizes
Blockquote supports five sizes: xs, sm, md (default), lg, xl.
Size xs: The best way to predict the future is to create it.
Size sm: The best way to predict the future is to create it.
Size md: The best way to predict the future is to create it.
Size lg: The best way to predict the future is to create it.
Size xl: The best way to predict the future is to create it.
Sizes.tsx
<Col> <Blockquote primary xs>Size xs: The best way to predict the future is to create it.</Blockquote> <Blockquote primary sm>Size sm: The best way to predict the future is to create it.</Blockquote> <Blockquote md primary>Size md: The best way to predict the future is to create it.</Blockquote> <Blockquote lg primary>Size lg: The best way to predict the future is to create it.</Blockquote> <Blockquote primary xl>Size xl: The best way to predict the future is to create it.</Blockquote></Col>Inside a Card
Blockquote inherits the parent appearance, making it blend seamlessly inside themed containers.
Inherits primary from the card.
Inherits success from the card.
Inherits danger from the card.
InsideaCard.tsx
<Row flexWrap> <Card primary> <Blockquote>Inherits primary from the card.</Blockquote> </Card> <Card success> <Blockquote>Inherits success from the card.</Blockquote> </Card> <Card danger> <Blockquote>Inherits danger from the card.</Blockquote> </Card></Row>With Rich Content
Blockquotes can contain multiple paragraphs and nested components.
Steve Jobs
Innovation distinguishes between a leader and a follower. Stay hungry, stay foolish.
WithRichContent.tsx
<Blockquote primary> <Text bold>Steve Jobs</Text> <Text>Innovation distinguishes between a leader and a follower. Stay hungry, stay foolish.</Text></Blockquote>Testimonial Pattern
Use blockquotes with attribution for testimonials and customer quotes.
VaneUI made our design system migration incredibly smooth. The boolean props API is intuitive and the theming is powerful.
— Sarah Chen, Lead Engineer
We shipped our new dashboard in half the time thanks to VaneUI components.
— Alex Rivera, Product Manager
TestimonialPattern.tsx
<Col> <Blockquote brand> <Text italic>VaneUI made our design system migration incredibly smooth. The boolean props API is intuitive and the theming is powerful.</Text> <Text bold sm>— Sarah Chen, Lead Engineer</Text> </Blockquote> <Blockquote success> <Text italic>We shipped our new dashboard in half the time thanks to VaneUI components.</Text> <Text bold sm>— Alex Rivera, Product Manager</Text> </Blockquote></Col>Variants
Use filled for solid background blockquotes or outline (default) for the left-border accent style.
Outline (default) — with a left border accent.
Filled — solid background for emphasis.
Outline info — informational note.
Filled info — strong callout.
Variants.tsx
<Col> <Blockquote primary>Outline (default) — with a left border accent.</Blockquote> <Blockquote filled primary>Filled — solid background for emphasis.</Blockquote> <Blockquote info>Outline info — informational note.</Blockquote> <Blockquote filled info>Filled info — strong callout.</Blockquote></Col>Blockquote Props
Font Weight
Font weight props for controlling text weight
thin
Thin font weight (100)
extralight
Extra light font weight (200)
light
Light font weight (300)
normal
Normal font weight (400)
medium
Medium font weight (500)
semibold
Semibold font weight (600)
bold
Bold font weight (700)
extrabold
Extra bold font weight (800)
black
Black font weight (900)
Font Style
Font style props for controlling text style
italic
Italic font style
notItalic
Not italic (normal) font style
Text Decoration
Text decoration props for controlling text underline/strikethrough
underline
Add underline decoration below text
lineThrough
Add strikethrough/line-through decoration across text
noUnderline
Remove text decoration (no underline, strikethrough, etc.)
overline
Add overline decoration above text
Text Transform
Text transform props for controlling text case
uppercase
Transform text to uppercase
lowercase
Transform text to lowercase
capitalize
Capitalize first letter of each word
normalCase
Normal text case (no transformation)
Font Family
Font family props for controlling text font
sans
Sans-serif font family (default)
serif
Serif font family
mono
Monospace font family
heading
Heading font family (defaults to sans, independently customizable via --font-heading CSS variable)
Text Align
Text alignment props for controlling text position
textLeft
Align text to left
textCenter
Align text to center
textRight
Align text to right
textJustify
Justify text
Truncate
Truncate props for controlling text overflow with ellipsis
truncate
Single line truncation with ellipsis
lineClamp2
Truncate at 2 lines with ellipsis
lineClamp3
Truncate at 3 lines with ellipsis
lineClamp4
Truncate at 4 lines with ellipsis
lineClamp5
Truncate at 5 lines with ellipsis
noTruncate
Remove truncation
Size
Size props for controlling component dimensions
xs
Extra small size
sm
Small size
md
Medium size (default)
lg
Large size
xl
Extra large size
Hide
Hide props for responsive element visibility
mobileHide
Hide element on mobile devices and below (max-mobile: 48rem)
tabletHide
Hide element on tablet devices and below (max-tablet: 64rem)
desktopHide
Hide element on desktop devices and below (max-desktop: 80rem)
Items
Items props for controlling flex item alignment (align-items)
itemsStart
Align items to start (top/left)
itemsEnd
Align items to end (bottom/right)
itemsCenter
Align items to center
itemsBaseline
Align items to baseline
itemsStretch
Stretch items to fill container
Justify
Justify props for controlling flex content alignment (justify-content)
justifyStart
Pack items toward the start of the main axis
justifyEnd
Pack items toward the end of the main axis
justifyCenter
Center items along the main axis
justifyBetween
Distribute items with space between them
justifyAround
Distribute items with space around them
justifyEvenly
Distribute items with equal space around them
justifyStretch
Stretch items to fill the main axis
justifyBaseline
Align items along their baseline on main axis
Position
Position props for controlling CSS position property
relative
Relative positioning
absolute
Absolute positioning
fixed
Fixed positioning
sticky
Sticky positioning
static
Static positioning
Display
Display props for controlling CSS display property
inline
Inline display - flows with text
block
Block display - takes full width, new line
inlineBlock
Inline-block display - inline but with block properties
flex
Flex display - flexbox container
inlineFlex
Inline-flex display - inline flexbox container
grid
Grid display - CSS grid container
inlineGrid
Inline-grid display - inline grid container
contents
Contents display - element's box is removed, children display as if parent didn't exist
table
Table display - behaves like table element
tableCell
Table-cell display - behaves like td element
hidden
Hidden display - element is not visible
Overflow
Overflow props for controlling content overflow behavior
overflowAuto
Auto overflow - show scrollbars if needed
overflowHidden
Hidden overflow - clip content without scrollbars
overflowClip
Clip overflow - hard clip without scrollbars
overflowVisible
Visible overflow - content extends beyond bounds
overflowScroll
Scroll overflow - always show scrollbars
overflowXAuto
Auto overflow on X-axis only
overflowYAuto
Auto overflow on Y-axis only
overflowXHidden
Hidden overflow on X-axis only
overflowYHidden
Hidden overflow on Y-axis only
overflowXClip
Clip overflow on X-axis only
overflowYClip
Clip overflow on Y-axis only
overflowXVisible
Visible overflow on X-axis only
overflowYVisible
Visible overflow on Y-axis only
overflowXScroll
Scroll overflow on X-axis only
overflowYScroll
Scroll overflow on Y-axis only
Appearance
Appearance props for controlling component colors
primary
Primary color appearance (gray)
brand
Brand color appearance (blue)
accent
Accent color appearance (rose)
secondary
Secondary color appearance (gray)
tertiary
Tertiary color appearance
success
Success color appearance (green)
danger
Danger color appearance (red)
warning
Warning color appearance (amber)
info
Info color appearance (cyan)
link
Link color appearance (blue, for hyperlinks)
inherit
Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
Variant
Variant props for controlling component style variations
filled
Filled variant - solid background with contrasting text color
outline
Outline variant - transparent background with border and colored text (default)
Cursor
Cursor props for controlling cursor appearance
cursorPointer
Pointer cursor - indicates clickable element
cursorDefault
Default cursor - standard arrow
cursorNotAllowed
Not-allowed cursor - indicates disabled state
cursorNone
No cursor - hides the cursor
cursorText
Text cursor - indicates selectable text
cursorMove
Move cursor - indicates draggable element
cursorWait
Wait cursor - indicates loading/processing
Letter Spacing
Letter spacing props for controlling text tracking
trackingTighter
Tighter letter spacing (-0.05em)
trackingTight
Tight letter spacing (-0.025em)
trackingNormal
Normal letter spacing (0)
trackingWide
Wide letter spacing (0.025em)
trackingWider
Wider letter spacing (0.05em)
trackingWidest
Widest letter spacing (0.1em)
Width
Width props for controlling component width
wFull
Set width to 100%
wFit
Set width to fit-content
wAuto
Set width to auto
wScreen
Set width to 100vw (viewport width), removes max-width constraint
Height
Height props for controlling component height
hFit
Set height to fit-content
hFull
Set height to 100%
hAuto
Set height to auto
hScreen
Set height to 100vh (viewport height), removes max-height constraint
Transparent
Transparent prop for disabling background color
transparent
Disable background color - makes component background transparent
Responsive
Responsive prop for enabling breakpoint-specific sizing
responsive
Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap