Display and feedback

Components that show information and state without asking the player for input: badges, headline numbers, meters, notices, empty states, tiles, tooltips, icons, map blips and printed documents.

Tone

Many components take a tone prop. It is a fixed set of color names, so a component follows the server's theme and you never hard code a color. The type is exported as Tone.

Tone	Typical use
neutral	Default, no meaning attached
blue	Information, in progress
green	Success, online, valid
red	Error, danger, expired
amber	Warning, pending
violet	Special, premium
teal	Alternate accent

import type { Tone } from '@/kit'

const tone: Tone = 'green'

KNotice and KInfoRow use their own, smaller tone lists (described below) because they express severity or value quality rather than color.

KBadge

A small colored pill for a status, count or tag.

KBadge

Prop	Type	Default	Description
label	string | number	none	Text shown in the badge. The default slot replaces it.
tone	Tone	'neutral'	Color of the badge.
icon	string	none	Icon shown before the label.
dot	boolean	false	Shows a small colored dot instead of the icon.
size	'sm' | 'md'	'sm'	Badge height and text size.

Slots: default replaces the label.

<KBadge tone="green" label="Online" dot />
<KBadge tone="amber" icon="lucide:clock">Pending</KBadge>

KStat

One headline number with a label, an optional icon chip and a small hint line.

KStat

Prop	Type	Default	Description
label	string	required	Small caption above the value.
value	string | number	required	The headline value.
hint	string	none	Small line under the value.
icon	string	none	Icon shown in a tinted chip on the left.
tone	Tone	'neutral'	Color of the icon chip.
mono	boolean	false	Monospace value, so money and counts line up.
clickable	boolean	false	Renders a button with a hover state instead of a plain card.

Events: click, fired when the card is a button (clickable).

<KStat label="Sales today" value="$12,480" hint="+8% from yesterday" icon="lucide:banknote" tone="green" mono />

KMeter

A percentage bar that turns amber and then red as it drops, for fuel, health, usage and similar.

KMeter

Prop	Type	Default	Description
label	string	required	Caption on the left.
value	number | null	required	Percentage from 0 to 100. null shows N/A with an empty bar.
icon	string	none	Icon before the label.
warnBelow	number	50	The bar turns amber below this percentage.
badBelow	number	25	The bar turns red below this percentage.
inverse	boolean	false	For budgets where a full bar is the bad end. Amber and red apply to the remaining headroom instead.
valueText	string	none	Replaces the percentage shown on the right.

<KMeter label="Fuel" :value="fuel" icon="lucide:fuel" />
<KMeter label="Storage used" :value="86" inverse value-text="860 KB / 1 MB" />

KNotice

An inline message box for tips, warnings and errors.

KNotice

Prop	Type	Default	Description
tone	'neutral' | 'info' | 'warn' | 'danger'	'neutral'	Severity, which sets the color.
icon	string	'lucide:info'	Icon shown at the start.

Slots: default is the message text.

<KNotice tone="warn" icon="lucide:triangle-alert">This item is not in the catalog.</KNotice>

KEmpty

A centered empty state, also used as a loading state, with an icon, a title, an optional description and room for an action.

KEmpty

Prop	Type	Default	Description
title	string	required	Main line.
description	string	none	Smaller explanation under the title.
icon	string	'lucide:inbox'	Icon in the rounded square.
loading	boolean	false	Replaces the icon with a spinner.
compact	boolean	false	Smaller icon and less padding.

Slots: default is shown under the text, usually a button.

<KEmpty title="No vehicles" description="You do not own any vehicles yet." icon="lucide:car">
  <KButton label="Browse dealership" />
</KEmpty>

KInfoRow

A label and value row for detail panels, with optional icon, monospace value and quality tone.

KInfoRow

Prop	Type	Default	Description
label	string	required	Text on the left.
value	string | number | null	none	Text on the right. The default slot replaces it.
icon	string	none	Icon before the label.
mono	boolean	false	Monospace value.
tone	'default' | 'muted' | 'good' | 'warn' | 'bad'	'default'	Color of the value.

Slots: default replaces the value, for badges or other components.

<KInfoRow label="Plate" value="41KQX882" icon="lucide:hash" mono />
<KInfoRow label="Insurance" value="Active" tone="good" />

KIcon

One icon slot for the whole kit. Size it with classes (class="size-6"), the same way you would an Iconify icon.

KIcon

Prop	Type	Default	Description
icon	string | null	none	Which icon to draw (see below).

The icon string picks the source by its prefix:

Value	Draws
lucide:car	A bundled Iconify icon. Icons are bundled with the kit, so they render in game.
item:water	The inventory image for that item name, falling back to a placeholder, then a box icon.
vehicle:phantom	The photo for that vehicle model, or a car icon when there is none.
https://example.com/x.png	Any image URL.

Image icons keep their own colors, so text color classes only change Iconify icons.

<KIcon icon="lucide:car" class="size-6" />
<KIcon icon="item:water" class="size-8" />

KTooltip

An instant hover tooltip, because the browser's own title tooltip is slow and unstyled in the game.

KTooltip

Prop	Type	Default	Description
text	string	required	Tooltip text. An empty string shows no tooltip.
state	string	none	A current value drawn after the text (On, Open, 42%).
stateTone	string	'text-zinc-400'	A text color class for the state.
side	'top' | 'bottom' | 'right'	'top'	Which side of the content the tooltip appears on.
align	'center' | 'start' | 'end'	'center'	For top and bottom tooltips: end lines the tooltip's right edge up with the content, start the left. Use it for controls at a panel edge.

Slots: default is the content the tooltip belongs to.

The tooltip is positioned inside its wrapper, so do not put the wrapper in a container that clips overflow.

<KTooltip text="Sirens" state="On" side="bottom">
  <KButton icon="lucide:siren" />
</KTooltip>

KTile

A large square action button for player facing panels (Lock, Enter, Knock).

KTile

Prop	Type	Default	Description
label	string	required	Main text.
icon	string	required	Icon at the top left.
hint	string	none	Small line under the label.
tone	Tone	'neutral'	Color of the tile.
disabled	boolean	false	Dims the tile and blocks clicks.
action	() => unknown	none	Async handler. While it runs the tile shows a spinner and is disabled.

Events: click, fired when no action is given. When action is set, it runs instead and click is not emitted.

<KTile label="Lock" icon="lucide:lock" hint="Front door" tone="amber" :action="toggleLock" />
<KTile label="Knock" icon="lucide:hand" tone="blue" @click="knock" />

KSection

A titled card that groups related content, with optional actions and collapsing.

KSection

Prop	Type	Default	Description
title	string	none	Header text. With no title and no actions slot the header is not drawn.
description	string	none	Small line under the title.
icon	string	none	Icon before the title.
flat	boolean	false	Removes the card background and padding.
bodyClass	string	none	Extra classes for the body, for example a grid layout.
collapsible	boolean	false	The header becomes a button that opens and closes the body.
defaultOpen	boolean	true	Initial state when collapsible.

Slots: default is the body. actions is drawn on the right of the header (clicks on it do not toggle the section).

<KSection title="Advanced" icon="lucide:settings-2" collapsible :default-open="false">
  <template #actions><KBadge tone="blue" label="2" /></template>
  Hidden until the header is clicked.
</KSection>

KScrollRow

A single row that scrolls sideways (chips, tabs, button groups) and shows it: the clipped edge fades and a chevron button appears. The mouse wheel scrolls it too. A row that fits looks like a plain flex row.

KScrollRow

Prop	Type	Default	Description
contentClass	string	none	Classes for the row itself, for gap and padding.
step	number	0.7	Fraction of the visible width scrolled per arrow click.

Slots: default is the row content.

<KScrollRow content-class="gap-2">
  <KBadge v-for="tag in tags" :key="tag" :label="tag" size="md" />
</KScrollRow>

KBlip

A game map blip: the sprite tinted with the blip color and outlined, as the game draws it. You position it yourself.

Sprite images load from an image host, so a sprite that has not arrived (or fails to load) shows as a plain colored dot, and the previews below depend on your connection.

KBlip

Prop	Type	Default	Description
sprite	number	required	Game blip sprite id (61 hospital, 60 police station).
color	number	0	Game blip color id (1 red, 2 green, 3 blue, 5 yellow). Ignored when tint is set.
tint	string	''	#rrggbb color that replaces the game color.
size	number	22	Edge of the picture in pixels.
rot	number	0	Rotation in game degrees (counter-clockwise from north) for the heading arrow.
heading	boolean	false	Draws the heading arrow on the rim.
alpha	number	1	Opacity from 0 to 1.
label	string	''	Accessible label.

Two helpers are exported alongside it:

Function	Returns
blipColorHex(color)	The #rrggbb color for a game blip color id.
blipSpriteName(sprite)	The sprite name for an id. An empty string when the id is unknown.

blipColorHex and blipSpriteName

<KBlip :sprite="61" :color="1" :size="28" label="Hospital" />
<KBlip :sprite="1" tint="#a78bfa" heading :rot="45" />

KIdCard

A plastic ID card with the issuer's seal, a photo, monospace values, a barcode strip and a stamp when the document is not valid. It takes one doc object and draws everything as text, so values from players or the database cannot inject markup.

KIdCard

Prop	Type	Default	Description
doc	DocData	required	What to print. See below.

DocData fields (shared with KPaperDoc):

Field	Type	Description
title	string	Document title. Required.
authority	string	Issuing body shown in the header.
tone	Tone	Card color.
status	string	valid, expired, suspended and so on. Anything that is not valid gets a stamp.
statusLabel	string	Text printed on the stamp instead of the status.
photo	string	Image URL for the portrait.
portrait	boolean	Set false to hide the photo box.
name	string	Holder name.
nameLabel	string	Label above the name. Defaults to Name.
number	string	Document or license number.
footer	string	Line at the bottom.
fields	{ label, value, tone?, wide? }[]	Printed fields. tone is muted, good, warn or bad. wide spans both columns.
plate, notes, signatures		Used by KPaperDoc only.

<KIdCard :doc="{
  title: 'Driver License',
  authority: 'State of San Andreas',
  tone: 'blue',
  status: 'valid',
  name: 'Jordan Reyes',
  number: 'SA-482-7731',
  fields: [{ label: 'Expires', value: '06/02/2031' }]
}" />

KPaperDoc

A printed form on a sheet of paper: letterhead with seal, ruled boxes in typewriter type, fine print, signature lines and a state stamp. It suits vehicle papers, rental agreements and permits. It fills the width of its container, so give it a width.

KPaperDoc

Prop	Type	Default	Description
doc	DocData	required	What to print. Uses title, authority, tone, status, statusLabel, number, plate, name, nameLabel, fields, notes, signatures and footer.

The paper layout adds three fields to DocData:

Field	Type	Description
plate	string	A license plate printed in its own box.
notes	string[]	Fine print under the fields, one paragraph each.
signatures	{ label, name? }[]	Signature lines with an optional signed name.

The stamp is green for valid or active, amber for suspended or grace, and red for any other status. The types DocData, DocFieldData and DocTone are exported.

<KPaperDoc :doc="{
  title: 'Vehicle Registration',
  authority: 'San Andreas Department of Motor Vehicles',
  tone: 'green',
  status: 'valid',
  plate: '41KQX882',
  name: 'Jordan Reyes',
  nameLabel: 'Registered owner',
  fields: [{ label: 'Model', value: 'Sultan RS' }],
  signatures: [{ label: 'Registrar', name: 'D. Whitfield' }]
}" />