Spot · Components

an icon at illustration scale (≥64px) · EmptyState, SuccessScreen and PermissionPrimer all use it

The native kit's real component, live in its web build at phone width. Follows this site's theme.

Usage

The whole illustration vocabulary: an icon at display scale. EmptyState, SuccessScreen and PermissionPrimer all render one. For a row’s leading slot use IconCircle — the boundary is 44px.

API

<Spot icon size="md|lg|xl" tone? shape="circle|square" ring? />

Get it

Already in every copy of the native kit:

import { Spot } from '@/components/kit/spot';

Details

Exports: Spot
Source: apps/mobile/components/kit/spot.tsx
Packages: lucide-react-native@^1.21.0
Installs with: @kit-native/icon, @kit-native/lib-utils
Also searched as: illustration, icon well, hero icon, empty state art
Registry JSON: /r/native/spot.json

The web kit's real component, live. Follows this site's theme.

Usage

The whole illustration vocabulary: an icon at display scale. For a row’s leading slot use IconCircle; the boundary is 44px.

API

<Spot icon size="md|lg|xl" tone? shape="circle|square" ring? />

Get it

Already in every copy of the web kit:

import { Spot } from '@/components/kit/spot';

Details

Exports: Spot
Source: apps/web/components/kit/spot.tsx
Packages: cn@^0.4.0, lucide-react@^1.52.0
Also searched as: illustration, icon well, hero icon, empty state art
Registry JSON: /r/web/spot.json

Agents: the whole registry is at /llms.txt.