Component field guide

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

LIVE COMPONENT

WelkCard

A single clickable card implemented as a native button, with a title, subtitle, and optional icon. The entire card is the action target. Do not place links, buttons, or other interactive controls inside it.

Usage

React / TSX

import { WelkCard } from "@welkui/react";

<WelkCard title="Your next mission" subtitle="Tap to accept."
  onClick={() => console.log("Accepted")} />

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

Variants and behavior

One comic card presentation; growOnHover optionally disables 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

Hover to enlarge the card, then activate it to update its status.

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

This is an action card, not a generic container: its root is a button. Use it when the whole title/subtitle surface performs one clear action.
Do not nest links, buttons, inputs or other interactive elements inside the card. Use a separate layout container for compound content.
onClick handles activation; keyboard users can activate the focused card with Enter or Space. Provide disabled when the action is not available.

Props

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

WelkCard 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.

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.