Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkStickerCard

A content-height clickable card with oversized decorative artwork overlapping its left edge. Card and sticker share one hover growth effect. Artwork sizing is managed by the component; the card remains a native button, so avoid interactive descendants.

Usage

React / TSX

import { WelkStickerCard } from "@welkui/react";
import superman from "./superman.png";

<WelkStickerCard title="A super adventure" subtitle="Start your mission."
  sticker={{ src: superman, alt: "" }}
  onClick={() => console.log("Mission accepted")} />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

One joined card/sticker presentation; growOnHover controls their shared enlargement.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Hover growth

Move over the artwork or card: both scale together.

Waiting for your next adventure.

Key propsgrowOnHover={true}

No growth

The card still acts as a native button but does not enlarge.

Waiting for your next adventure.

Key propsgrowOnHover={false}

With icon

Optional icon content accompanies the title and subtitle.

Waiting for your next adventure.

Key propsicon={<span>+</span>}

Disabled

Neither interaction nor hover growth is available.

Waiting for your next adventure.

Key propsdisabled

Usage notes and accessibility

Use for a single card action with decorative character art. The left artwork overlaps the card edge, so leave room around the component rather than clipping its container.
Artwork sizing and empty alt text are managed internally. Card and sticker share hover growth; independent sticker elevation is disabled.
The native card button remains the action target. Do not add interactive elements inside its title/subtitle or assume the overflowing decorative artwork is a separate action.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkStickerCard prop reference
Prop	Type	Default	Description
`title`	`ReactNode`	Required	Main card heading.
`subtitle`	`ReactNode`	Required	Supporting card content.
`icon`	`ReactNode`	Unset	Optional leading artwork or icon.
`growOnHover`	`boolean`	true	Enables the joined hover growth effect; disabled cards do not grow.
`sticker`	`Omit<WelkStickerProps, "className" \| "style" \| "width" \| "height">`	Required	Sticker options: src and alt, with optional fallbackSrc, outlineThickness, outlineColor, elevateOnHover and other image attributes. Artwork is forced decorative (alt=""); independent elevation is disabled so both pieces move together.

Native props and refs

Inherits native button props, including children (except where replaced by named content props), onClick, disabled, type, name, value, className, style, aria-* and data-*; forwards a button ref. The default type is button, not submit.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.