If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
'use client'
import { Blockquote } from '@saas-ui/react'
export const BlockquoteBasic = () => {
return (
<Blockquote>
If anyone thinks he is something when he is nothing, he deceives himself.
Each one should test his own actions. Then he can take pride in himself,
without comparing himself to anyone else.
</Blockquote>
)
}
import { Blockquote } from '@saas-ui/react'
export default function Example() {
return (
<Blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</Blockquote>
)
}Use the cite prop to provide the source of the blockquote. This will be
displayed below the blockquote.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
'use client'
import { Blockquote } from '@saas-ui/react'
export const BlockquoteWithCite = () => {
return (
<Blockquote showDash cite="Uzumaki Naruto">
If anyone thinks he is something when he is nothing, he deceives himself.
Each one should test his own actions. Then he can take pride in himself,
without comparing himself to anyone else.
</Blockquote>
)
}
Use the colorPalette prop to change the color of the blockquote.
gray
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
red
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
green
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
blue
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
teal
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
pink
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
purple
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
cyan
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
orange
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
yellow
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
'use client'
import { Stack, Text } from '@chakra-ui/react'
import { Blockquote } from '@saas-ui/react'
import { colorPalettes } from '../lib/color-palettes'
export const BlockquoteWithColors = () => {
return (
<Stack gap="5" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
px="4"
width="full"
>
<Text minW="8ch">{colorPalette}</Text>
<Blockquote
showDash
colorPalette={colorPalette}
cite="Uzumaki Naruto"
>
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take
pride in himself, without comparing himself to anyone else.
</Blockquote>
</Stack>
))}
</Stack>
)
}
Use the variant prop to change the visual style of the blockquote. Values can
be either subtle, solid, plain.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
'use client'
import { Stack } from '@chakra-ui/react'
import { Blockquote } from '@saas-ui/react'
export const BlockquoteWithVariants = () => {
return (
<Stack gap="8">
<Blockquote variant="subtle">
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride in
himself, without comparing himself to anyone else.
</Blockquote>
<Blockquote variant="solid">
If anyone thinks he is something when he is nothing, he deceives
himself. Each one should test his own actions. Then he can take pride in
himself, without comparing himself to anyone else.
</Blockquote>
</Stack>
)
}
Use the showIcon prop to show an icon on the blockquote. The default icon is a
double quote.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
'use client'
import { BlockquoteIcon, Float } from '@chakra-ui/react'
import { Blockquote } from '@saas-ui/react'
export const BlockquoteWithIcon = () => {
return (
<Blockquote
variant="plain"
colorPalette="teal"
showDash
icon={
<Float placement="top-start" offsetY="2">
<BlockquoteIcon />
</Float>
}
cite="Uzumaki Naruto"
>
If anyone thinks he is something when he is nothing, he deceives himself.
Each one should test his own actions. Then he can take pride in himself,
without comparing himself to anyone else.
</Blockquote>
)
}
Use the icon prop to change the icon of the blockquote.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
'use client'
import { Circle, Float } from '@chakra-ui/react'
import { Blockquote } from '@saas-ui/react'
import { LuQuote } from 'react-icons/lu'
export const BlockquoteWithCustomIcon = () => {
return (
<Blockquote
cite="Uzumaki Naruto"
colorPalette="blue"
ps="8"
icon={
<Float placement="middle-start">
<Circle bg="blue.600" size="8" color="white">
<LuQuote />
</Circle>
</Float>
}
>
If anyone thinks he is something when he is nothing, he deceives himself.
Each one should test his own actions. Then he can take pride in himself,
without comparing himself to anyone else.
</Blockquote>
)
}
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
justify | 'start' | 'start' | 'center' | 'end'The justify of the component |
variant | 'subtle' | 'subtle' | 'solid'The variant of the component |