Wrapper

Preview

Hand-drawn Card

The Wrapper component provides a container with sketchy borders and backgrounds. It supports various fill styles and roughness levels.

Installation

npx skeci-ui add wrapper

Usage

import { Wrapper } from '@/components/ui/wrapper';

<Wrapper>
  <h3 className="text-lg font-bold">Hello World</h3>
  <p>This is a hand-drawn card container.</p>
</Wrapper>

Variants

Fill Styles

Zigzag Fill

A playful yellow zigzag pattern.

Cross-hatch

A structured green cross-hatch.

Custom Roughness & Stroke

Extra Messy

High roughness and bowing.

Thick Blue

Custom stroke color and width.

Props

Prop	Type	Default	Description
`padding`	`number \| string`	`24`	Padding inside the wrapper.
`roughness`	`number`	`1.5`	How sketchy the lines look.
`bowing`	`number`	`1`	How much the lines curve.
`stroke`	`string`	`'#333333'`	Border color.
`strokeWidth`	`number`	`1.5`	Border thickness.
`fill`	`string`	`'transparent'`	Background color.
`fillStyle`	`string`	`'solid'`	Background fill pattern (solid, hachure, zigzag, etc).
`animated`	`boolean`	`false`	Whether to enable CSS transitions.
`interactive`	`boolean`	`true`	Whether to enable hover effects.