Comic Text

PreviewCode

BOOM!

@/demos/ComicTextDemo.tsx

import { ComicText } from '@/registry/magicui/comic-text'

export function ComicTextDemo() {
  return (
    <div class="space-y-8 text-center">
      <ComicText fontSize={5}>BOOM!</ComicText>
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/comic-text

bun

bunx shadcn@latest add @magicui-solid/comic-text

yarn

yarn dlx shadcn@latest add @magicui-solid/comic-text

npm

npx shadcn@latest add @magicui-solid/comic-text

Usage

import { ComicText } from "@/components/magicui/comic-text"

<ComicText>Comic Text</ComicText>

Props

Prop	Type	Default	Description
class	string	-	The class name to be applied to the component
fontSize	number	5	The font size of the text
style	CSSProperties	-	The style of the text
children	string	-	The text to be displayed

Credits

• Credit to @iambharathpadhu

Original:

magicui.design/docs/components/comic-text