Comic UI

Comic-inspired React components powered by TailwindCSS.

Think of it like snapping a new LEGO brick into your build: you install the package, tell Tailwind to “look at it” when generating CSS, then import the components you want.

Install

``bash
pnpm add @devbrock/comic-ui
`

Base styles (required)

Comic UI components use shadcn-style design tokens (CSS variables) and a few animation helpers. Import the library’s base stylesheet once (usually in your app’s global CSS or root entry file):

`ts
import "@devbrock/comic-ui/styles.css";
`

If you want the demo typography, load the fonts in your app (Comic UI references Bangers and Outfit but does not auto-load them).

Tailwind setup (required)

Because Tailwind only generates CSS for classnames it can “see”, you must include this library in Tailwind’s scan paths; otherwise components (like Button) will render unstyled.

$3

Add the library to your content globs:

`ts
// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
content: [
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/@devbrock/comic-ui/dist/*/.{js,cjs,mjs}",
],
} satisfies Config;
`

$3

Add a @source for the library in your global CSS (the file where you @import "tailwindcss";).

Important: the @source path is resolved relative to that CSS file, so you may need to adjust the number of ../ segments depending on where your global CSS lives.

`css
@import "tailwindcss";
@source "../node_modules/@devbrock/comic-ui/dist/*/.{js,cjs,mjs}";
@import "@devbrock/comic-ui/styles.css";
`

For example:

- If your global CSS is src/index.css (common in Vite/CRA), ../node_modules/... is usually correct.
- If your global CSS is app/globals.css (common in Next.js), you’ll likely want ../node_modules/... only if app/ sits at the project root; otherwise adjust accordingly.

Use Button

`tsx
import { Button } from "@devbrock/comic-ui";

export function Example() {
return console.log("Pow!")}>Click me;
}
`

$3

Button supports variants and sizes via props:

`tsx
import { Button } from "@devbrock/comic-ui";

export function Example() {
return (
<>
Default
Destructive
Outline
Secondary
Ghost
Link
Impact
Hero
Hero Blue
Mutant
Gamma
Burst

);
}
`

Sizes:

`tsx
import { Button } from "@devbrock/comic-ui";

export function Example() {
return (
<>
Small
Default
Large
XL

+


);
}
`

Notes

- The root entrypoint exports named exports for components/utilities (for example Button, cn, toast, useToast).
- Button is a single component; you pick its styling using the variant and size` props.