Terms of Service Privacy Policy

Registry Health Inspect

Pantoken Base System – shadcn/ui Base by pantoken | shadcnregistry

Registries
pantoken
Pantoken Base System

Pantoken Base System

base

Pantoken core design token system, CSS custom properties, and semantic components.

pnpm dlx shadcn@latest add "https://pantoken.app/r/base.json"

@pantoken/css
@pantoken/components
@pantoken/shadcn

Light Mode

--background:

var(--instui-color-background-base)

--foreground:

var(--instui-color-text-base)

--card:

var(--instui-color-background-container)

--card-foreground:

var(--instui-color-text-base)

--popover:

var(--instui-color-background-container)

--popover-foreground:

var(--instui-color-text-base)

--primary:

var(--instui-color-background-brand)

--primary-foreground:

var(--instui-color-text-on-color)

--secondary:

var(--instui-color-background-muted)

--secondary-foreground:

var(--instui-color-text-base)

--muted:

var(--instui-color-background-muted)

--muted-foreground:

var(--instui-color-text-muted)

--accent:

var(--instui-color-background-info)

--accent-foreground:

var(--instui-color-text-on-color)

--destructive:

var(--instui-color-background-error)

--destructive-foreground:

var(--instui-color-text-on-color)

--border:

var(--instui-color-stroke-base)

--input:

var(--instui-color-stroke-base)

--ring:

var(--instui-color-stroke-brand)

--radius:

var(--instui-spacing-space-sm)

Dark Mode

--background:

var(--instui-color-background-base)

--foreground:

var(--instui-color-text-base)

--card:

var(--instui-color-background-container)

--card-foreground:

var(--instui-color-text-base)

--popover:

var(--instui-color-background-container)

--popover-foreground:

var(--instui-color-text-base)

--primary:

var(--instui-color-background-brand)

--primary-foreground:

var(--instui-color-text-on-color)

--secondary:

var(--instui-color-background-muted)

--secondary-foreground:

var(--instui-color-text-base)

--muted:

var(--instui-color-background-muted)

--muted-foreground:

var(--instui-color-text-muted)

--accent:

var(--instui-color-background-info)

--accent-foreground:

var(--instui-color-text-on-color)

--destructive:

var(--instui-color-background-error)

--destructive-foreground:

var(--instui-color-text-on-color)

--border:

var(--instui-color-stroke-base)

--input:

var(--instui-color-stroke-base)

--ring:

var(--instui-color-stroke-brand)

--radius:

var(--instui-spacing-space-sm)