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
npx @chakra-ui/cli 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 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.
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
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.
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 { Float } from "@chakra-ui/react"
import { Blockquote, BlockquoteIcon } from "@/components/ui/blockquote"
const Demo = () => {
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>
)
}
Justify
Use the justify prop to change the alignment of the blockquote. Values can be
either start, center, end.
start
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.
center
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.
end
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 { For, HStack, Stack, Text } from "@chakra-ui/react"
import { Blockquote } from "@/components/ui/blockquote"
const Demo = () => {
return (
<Stack gap="20">
<For each={["start", "center", "end"]}>
{(justify) => (
<HStack key={justify} maxW="xl">
<Text color="fg.muted" minW="6rem">
{justify}
</Text>
<Blockquote
variant="plain"
justify={justify}
showDash
cite="Naruto Uzumaki"
>
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>
</HStack>
)}
</For>
</Stack>
)
}
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 { Circle, Float } from "@chakra-ui/react"
import { Blockquote } from "@/components/ui/blockquote"
import { LuQuote } from "react-icons/lu"
const Demo = () => {
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>
)
}
With Avatar
Here's an example of how to use the Blockquote with an avatar and float
components to create a stunning testimonial component.
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.
EJ
Emily Jonesimport { Float, HStack, Span } from "@chakra-ui/react"
import { Avatar } from "@/components/ui/avatar"
import { Blockquote, BlockquoteIcon } from "@/components/ui/blockquote"
const Demo = () => {
return (
<Blockquote
bg="bg.subtle"
padding="8"
icon={
<Float placement="bottom-end" offset="10">
<BlockquoteIcon opacity="0.4" boxSize="10" rotate="180deg" />
</Float>
}
cite={
<HStack mt="2" gap="3">
<Avatar
size="sm"
name="Emily Jones"
src="https://i.pravatar.cc/150?u=re"
/>
<Span fontWeight="medium">Emily Jones</Span>
</HStack>
}
>
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 |