Blockquote

Blockquote with optional cite.

Import

import { Blockquote } from '@tidbcloud/uikit'

Usage

import { Blockquote } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tabler/icons-react'
 
function Demo() {
  return (
    <Blockquote cite="– Forrest Gump" icon={<IconInfoCircle />} mt="xl">
      Life is like an npm install – you never know what you are going to get.
    </Blockquote>
  )
}

Without icon

import { Blockquote } from '@tidbcloud/uikit'
 
function Demo() {
  return <Blockquote cite="– Someone famous">This is a blockquote without an icon.</Blockquote>
}

Colors

import { Blockquote, Stack } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Stack>
      <Blockquote color="blue">Blue blockquote</Blockquote>
      <Blockquote color="red">Red blockquote</Blockquote>
      <Blockquote color="green">Green blockquote</Blockquote>
    </Stack>
  )
}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Quote content
citeReact.ReactNode-Reference to a cited quote
colorMantineColor-Key of theme.colors or any valid CSS color
iconReact.ReactNode-Icon displayed at the top left side
iconSizenumber-Icon width and height
radiusMantineRadius-Border radius