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>
)
}
Usage
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>
)
}Examples
With Cite
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>
)
}
Colors
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.
zinc
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.
neutral
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.
stone
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.
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.
amber
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.
lime
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.
emerald
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.
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.
sky
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.
indigo
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.
violet
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.
fuchsia
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.
rose
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>
)
}
Variants
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>
)
}
Icon
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>
)
}
Custom Icon
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>
)
}
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
justify | 'start' | 'start' | 'center' | 'end'The justify of the component |
variant | 'subtle' | 'subtle' | 'solid' | 'plain'The variant of the component |