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.
import { Blockquote } from "@/components/ui/blockquote"
const Demo = () => {
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>
)
}
Setup
If you don't already have the snippet, run the following command to add the
blockquote snippet
chakra snippet add blockquoteThe snippet includes a closed component composition for the Blockquote
component.
import { Blockquote } from "@/components/ui/blockquote"<Blockquote dash cite="Uzumaki Naruto" citeUrl="#" />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.
import { Blockquote } from "@/components/ui/blockquote"
const Demo = () => {
return (
<Blockquote dash 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.
accent
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.
import { Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { Blockquote } from "@/components/ui/blockquote"
const Demo = () => {
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 dash 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.
import { Stack } from "@chakra-ui/react"
import { Blockquote } from "@/components/ui/blockquote"
const Demo = () => {
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.
import { Blockquote } from "@/components/ui/blockquote"
const Demo = () => {
return (
<Blockquote showIcon 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.
import { Blockquote } from "@/components/ui/blockquote"
import { LuMail } from "react-icons/lu"
const Demo = () => {
return (
<Blockquote
cite="Uzumaki Naruto"
colorPalette="blue"
icon={<LuMail />}
ps="6"
>
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>
)
}
Manual
Here's an example of how to use the Blockquote without the snippet.
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.
import { Blockquote } from "@chakra-ui/react"
const Demo = () => {
return (
<Blockquote.Root>
<Blockquote.Content>
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.Content>
</Blockquote.Root>
)
}
Props
Root
| 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 |