Component Styling

The most reliable PikaCSS components are built from small, static layers.

Start with composition, not conditionals

Base styles, variant styles, and local overrides should usually be separate arguments.

vue

<template>
	<!-- pika() accepts multiple arguments (StyleItem[]) -->
	<!-- Each argument can be a string (shortcut) or a style object -->
	<div
		:class="pika(
			'my-shortcut',
			{
				fontSize: '1.5rem',
				color: '#333',
			},
		)"
	>
		Combining shortcuts and inline styles
	</div>
</template>

This pattern scales because each piece has a stable purpose:

base styles define structure
variant styles define intent
local overrides solve one-off layout or context needs

Use shortcuts for shared recipes

When the same style bundle appears across multiple components, move it into a shortcut instead of repeating a large object in every file.

// pika.config.ts
import { defineEngineConfig } from '@pikacss/unplugin-pikacss'

export default defineEngineConfig({
	shortcuts: {
		shortcuts: [
			// Static shortcut: [name, styleDefinition]
			['flex-center', {
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
			}],

			// Static shortcut with multiple style items
			['btn-base', [
				{ padding: '0.5rem 1rem', borderRadius: '0.25rem', cursor: 'pointer' },
				{ border: 'none', fontSize: '1rem' },
			]],

			// Dynamic shortcut: [pattern, resolver, autocomplete?]
			[
				/^m-(\d+)$/,
				m => ({ margin: `${Number(m[1]) * 0.25}rem` }),
				['m-1', 'm-2', 'm-4', 'm-8'], // autocomplete hints
			],

			// Dynamic shortcut returning multiple style items
			[
				/^size-(\d+)$/,
				m => ({ width: `${m[1]}px`, height: `${m[1]}px` }),
				['size-16', 'size-24', 'size-32'],
			],
		],
	},
})

// Method 1: Use shortcut as a string style item inside __shortcut
const className = pika({
	__shortcut: 'flex-center',
	gap: '1rem',
})

// Method 2: Apply multiple shortcuts at once
const multi = pika({
	__shortcut: ['flex-center', 'btn-base'],
	backgroundColor: '#0ea5e9',
})

// Method 3: Dynamic shortcuts resolve from the pattern
const spacing = pika({
	__shortcut: 'm-4',
})

css

/* Using __shortcut: 'flex-center' with gap: '1rem' */
.pk-a { display: flex; }
.pk-b { align-items: center; }
.pk-c { justify-content: center; }
.pk-d { gap: 1rem; }

/* Using __shortcut: 'm-4' */
.e { margin: 1rem; }

Prefer explicit variants

For component states such as primary, secondary, danger, or compact, create separate static style blocks and choose between them at runtime.

Good runtime usage

Runtime code should decide which static class string to use. Runtime code should not build the style content itself.

Recommended review checklist

Ask this	Why it matters
Can this repeated block become a shortcut?	It reduces duplication and sharpens intent.
Is this variant stable enough to name?	Named variants are easier to review than ad hoc overrides.
Is theme data actually a CSS variable problem?	Variables usually age better than repeated color branches.
Is this local override still static?	If not, the build-time model will fight you.

Do and do not

Do	Do not
Compose `pika(base, primary, localOverride)`.	Put every possible branch in one inline expression.
Move shared recipes into shortcuts.	Copy the same 12-line object across files.
Keep variants stable and named.	Invent new dynamic shape rules per component.

Component Styling ​

Start with composition, not conditionals ​

Use shortcuts for shared recipes ​

Prefer explicit variants ​

Recommended review checklist ​

Do and do not ​