---
name: "@pantoken"
slug: "pantoken"
description: "InstUI design tokens, themes, components, and interactions."
category: "AI/chat UI"
tags: ["ai", "blocks", "buttons", "cards", "design-system", "forms", "hooks", "icons", "loaders", "marketing", "media", "navigation", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "thedannywahl"
website: "https://pantoken.app"
github: "https://github.com/thedannywahl/pantoken"
registry: "https://pantoken.app/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 80
generated_at: "2026-09-21T01:50:16.753Z"
---

# @pantoken

InstUI design tokens, themes, components, and interactions.

## Links

- Website: https://pantoken.app
- GitHub: https://github.com/thedannywahl/pantoken
- Registry JSON: https://pantoken.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/pantoken
- This file: https://sh4dcn.vercel.app/md/pantoken.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://pantoken.app/r/registry.json
pnpm dlx shadcn@latest add https://pantoken.app/r/registry.json
bunx shadcn@latest add https://pantoken.app/r/registry.json
# clone the source repo
git clone https://github.com/thedannywahl/pantoken.git
# fetch the raw registry index
curl -s https://pantoken.app/r/registry.json
```

## Components (80)

| name | type | description | install |
| --- | --- | --- | --- |
| theme-canvas | registry:theme | Instructure Canvas LMS theme variables bridging to shadcn/ui custom properties. | `npx shadcn@latest add https://pantoken.app/r/theme-canvas.json` |
| theme-canvas-high-contrast | registry:theme | Canvas LMS High Contrast theme variables for WCAG AAA compliance. | `npx shadcn@latest add https://pantoken.app/r/theme-canvas-high-contrast.json` |
| theme-rebrand | registry:theme | Modern Instructure brand theme variables. | `npx shadcn@latest add https://pantoken.app/r/theme-rebrand.json` |
| base | registry:base | Pantoken core design token system, CSS custom properties, and semantic components. | `npx shadcn@latest add https://pantoken.app/r/base.json` |
| button | registry:style | Instructure Button component styled with semantic .instui-button classes. | `npx shadcn@latest add https://pantoken.app/r/button.json` |
| alert | registry:style | Instructure Alert component styled with semantic .instui-alert classes. | `npx shadcn@latest add https://pantoken.app/r/alert.json` |
| badge | registry:style | Instructure Badge component styled with semantic .instui-badge classes. | `npx shadcn@latest add https://pantoken.app/r/badge.json` |
| pill | registry:style | Instructure Pill component styled with semantic .instui-pill classes. | `npx shadcn@latest add https://pantoken.app/r/pill.json` |
| tag | registry:style | Instructure Tag component styled with semantic .instui-tag classes. | `npx shadcn@latest add https://pantoken.app/r/tag.json` |
| avatar | registry:style | Instructure Avatar component styled with semantic .instui-avatar classes. | `npx shadcn@latest add https://pantoken.app/r/avatar.json` |
| tabs | registry:style | Instructure Tabs component styled with semantic .instui-tabs classes. | `npx shadcn@latest add https://pantoken.app/r/tabs.json` |
| metric | registry:style | Instructure Metric component styled with semantic .instui-metric classes. | `npx shadcn@latest add https://pantoken.app/r/metric.json` |
| byline | registry:style | Instructure Byline component styled with semantic .instui-byline classes. | `npx shadcn@latest add https://pantoken.app/r/byline.json` |
| img | registry:style | Instructure Img component styled with semantic .instui-img classes. | `npx shadcn@latest add https://pantoken.app/r/img.json` |
| table | registry:style | Instructure Table component styled with semantic .instui-table classes. | `npx shadcn@latest add https://pantoken.app/r/table.json` |
| link | registry:style | Instructure Link component styled with semantic .instui-link classes. | `npx shadcn@latest add https://pantoken.app/r/link.json` |
| list | registry:style | Instructure List component styled with semantic .instui-list classes. | `npx shadcn@latest add https://pantoken.app/r/list.json` |
| icon | registry:style | Instructure Icon component styled with semantic .instui-icon classes. | `npx shadcn@latest add https://pantoken.app/r/icon.json` |
| checkbox | registry:style | Instructure Checkbox component styled with semantic .instui-checkbox classes. | `npx shadcn@latest add https://pantoken.app/r/checkbox.json` |
| radio | registry:style | Instructure Radio component styled with semantic .instui-radio classes. | `npx shadcn@latest add https://pantoken.app/r/radio.json` |
| spinner | registry:style | Instructure Spinner component styled with semantic .instui-spinner classes. | `npx shadcn@latest add https://pantoken.app/r/spinner.json` |
| progress | registry:style | Instructure Progress component styled with semantic .instui-progress classes. | `npx shadcn@latest add https://pantoken.app/r/progress.json` |
| menu | registry:style | Instructure Menu component styled with semantic .instui-menu classes. | `npx shadcn@latest add https://pantoken.app/r/menu.json` |
| modal | registry:style | Instructure Modal component styled with semantic .instui-modal classes. | `npx shadcn@latest add https://pantoken.app/r/modal.json` |
| breadcrumb | registry:style | Instructure Breadcrumb component styled with semantic .instui-breadcrumb classes. | `npx shadcn@latest add https://pantoken.app/r/breadcrumb.json` |
| billboard | registry:style | Instructure Billboard component styled with semantic .instui-billboard classes. | `npx shadcn@latest add https://pantoken.app/r/billboard.json` |
| rating | registry:style | Instructure Rating component styled with semantic .instui-rating classes. | `npx shadcn@latest add https://pantoken.app/r/rating.json` |
| toggle-group | registry:style | Instructure Toggle-group component styled with semantic .instui-toggle-group classes. | `npx shadcn@latest add https://pantoken.app/r/toggle-group.json` |
| context-view | registry:style | Instructure Context-view component styled with semantic .instui-context-view classes. | `npx shadcn@latest add https://pantoken.app/r/context-view.json` |
| drawer-layout | registry:style | Instructure Drawer-layout component styled with semantic .instui-drawer-layout classes. | `npx shadcn@latest add https://pantoken.app/r/drawer-layout.json` |
| progress-circle | registry:style | Instructure Progress-circle component styled with semantic .instui-progress-circle classes. | `npx shadcn@latest add https://pantoken.app/r/progress-circle.json` |
| pagination | registry:style | Instructure Pagination component styled with semantic .instui-pagination classes. | `npx shadcn@latest add https://pantoken.app/r/pagination.json` |
| toggle-details | registry:style | Instructure Toggle-details component styled with semantic .instui-toggle-details classes. | `npx shadcn@latest add https://pantoken.app/r/toggle-details.json` |
| file-drop | registry:style | Instructure File-drop component styled with semantic .instui-file-drop classes. | `npx shadcn@latest add https://pantoken.app/r/file-drop.json` |
| side-nav-bar | registry:style | Instructure Side-nav-bar component styled with semantic .instui-side-nav-bar classes. | `npx shadcn@latest add https://pantoken.app/r/side-nav-bar.json` |
| tree-browser | registry:style | Instructure Tree-browser component styled with semantic .instui-tree-browser classes. | `npx shadcn@latest add https://pantoken.app/r/tree-browser.json` |
| calendar | registry:style | Instructure Calendar component styled with semantic .instui-calendar classes. | `npx shadcn@latest add https://pantoken.app/r/calendar.json` |
| popover | registry:style | Instructure Popover component styled with semantic .instui-popover classes. | `npx shadcn@latest add https://pantoken.app/r/popover.json` |
| tray | registry:style | Instructure Tray component styled with semantic .instui-tray classes. | `npx shadcn@latest add https://pantoken.app/r/tray.json` |
| tooltip | registry:style | Instructure Tooltip component styled with semantic .instui-tooltip classes. | `npx shadcn@latest add https://pantoken.app/r/tooltip.json` |
| range-input | registry:style | Instructure Range-input component styled with semantic .instui-range-input classes. | `npx shadcn@latest add https://pantoken.app/r/range-input.json` |
| mask | registry:style | Instructure Mask component styled with semantic .instui-mask classes. | `npx shadcn@latest add https://pantoken.app/r/mask.json` |
| screen-reader-content | registry:style | Instructure Screen-reader-content component styled with semantic .instui-screen-reader-content classes. | `npx shadcn@latest add https://pantoken.app/r/screen-reader-content.json` |
| heading | registry:style | Instructure Heading component styled with semantic .instui-heading classes. | `npx shadcn@latest add https://pantoken.app/r/heading.json` |
| text | registry:style | Instructure Text component styled with semantic .instui-text classes. | `npx shadcn@latest add https://pantoken.app/r/text.json` |
| close-button | registry:style | Instructure Close-button component styled with semantic .instui-close-button classes. | `npx shadcn@latest add https://pantoken.app/r/close-button.json` |
| form-field | registry:style | Instructure Form-field component styled with semantic .instui-form-field classes. | `npx shadcn@latest add https://pantoken.app/r/form-field.json` |
| form-field-group | registry:style | Instructure Form-field-group component styled with semantic .instui-form-field-group classes. | `npx shadcn@latest add https://pantoken.app/r/form-field-group.json` |
| radio-input-group | registry:style | Instructure Radio-input-group component styled with semantic .instui-radio-input-group classes. | `npx shadcn@latest add https://pantoken.app/r/radio-input-group.json` |
| form-field-messages | registry:style | Instructure Form-field-messages component styled with semantic .instui-form-field-messages classes. | `npx shadcn@latest add https://pantoken.app/r/form-field-messages.json` |
| text-input | registry:style | Instructure Text-input component styled with semantic .instui-text-input classes. | `npx shadcn@latest add https://pantoken.app/r/text-input.json` |
| text-area | registry:style | Instructure Text-area component styled with semantic .instui-text-area classes. | `npx shadcn@latest add https://pantoken.app/r/text-area.json` |
| simple-select | registry:style | Instructure Simple-select component styled with semantic .instui-simple-select classes. | `npx shadcn@latest add https://pantoken.app/r/simple-select.json` |
| input-group | registry:style | Instructure Input-group component styled with semantic .instui-input-group classes. | `npx shadcn@latest add https://pantoken.app/r/input-group.json` |
| number-input | registry:style | Instructure Number-input component styled with semantic .instui-number-input classes. | `npx shadcn@latest add https://pantoken.app/r/number-input.json` |
| in-place-edit | registry:style | Instructure In-place-edit component styled with semantic .instui-in-place-edit classes. | `npx shadcn@latest add https://pantoken.app/r/in-place-edit.json` |
| view | registry:style | Instructure View component styled with semantic .instui-view classes. | `npx shadcn@latest add https://pantoken.app/r/view.json` |
| card | registry:style | Pantoken card component styles and documented HTML structure. | `npx shadcn@latest add https://pantoken.app/r/card.json` |
| banner | registry:style | Pantoken banner component styles and documented HTML structure. | `npx shadcn@latest add https://pantoken.app/r/banner.json` |
| agent-shell | registry:style | Pantoken agent-shell component styles and documented HTML structure. | `npx shadcn@latest add https://pantoken.app/r/agent-shell.json` |
| wrapper | registry:style | Pantoken wrapper layout styles and canonical HTML template. | `npx shadcn@latest add https://pantoken.app/r/wrapper.json` |
| callout | registry:style | Pantoken callout layout styles and canonical HTML template. | `npx shadcn@latest add https://pantoken.app/r/callout.json` |
| hero | registry:style | Pantoken hero layout styles and canonical HTML template. | `npx shadcn@latest add https://pantoken.app/r/hero.json` |
| page-layout | registry:style | Pantoken page-layout layout styles and canonical HTML template. | `npx shadcn@latest add https://pantoken.app/r/page-layout.json` |
| rubric-note | registry:style | Pantoken rubric-note layout styles and canonical HTML template. | `npx shadcn@latest add https://pantoken.app/r/rubric-note.json` |
| testimonial | registry:style | Pantoken testimonial layout styles and canonical HTML template. | `npx shadcn@latest add https://pantoken.app/r/testimonial.json` |
| two-column | registry:style | Pantoken two-column layout styles and canonical HTML template. | `npx shadcn@latest add https://pantoken.app/r/two-column.json` |
| custom-icons | registry:style | Pantoken's curated custom icon tokens for the shared -icon-* painter. | `npx shadcn@latest add https://pantoken.app/r/custom-icons.json` |
| simple-icons | registry:style | The complete Simple Icons brand-glyph token collection. | `npx shadcn@latest add https://pantoken.app/r/simple-icons.json` |
| logos | registry:style | All Instructure product logo image tokens. | `npx shadcn@latest add https://pantoken.app/r/logos.json` |
| logo-canvas | registry:style | Logo image tokens for canvas. | `npx shadcn@latest add https://pantoken.app/r/logo-canvas.json` |
| logo-igniteai | registry:style | Logo image tokens for igniteai. | `npx shadcn@latest add https://pantoken.app/r/logo-igniteai.json` |
| logo-instructure | registry:style | Logo image tokens for instructure. | `npx shadcn@latest add https://pantoken.app/r/logo-instructure.json` |
| logo-learnplatform | registry:style | Logo image tokens for learnplatform. | `npx shadcn@latest add https://pantoken.app/r/logo-learnplatform.json` |
| logo-mastery | registry:style | Logo image tokens for mastery. | `npx shadcn@latest add https://pantoken.app/r/logo-mastery.json` |
| logo-pantoken | registry:style | Logo image tokens for pantoken. | `npx shadcn@latest add https://pantoken.app/r/logo-pantoken.json` |
| logo-parchment | registry:style | Logo image tokens for parchment. | `npx shadcn@latest add https://pantoken.app/r/logo-parchment.json` |
| theme-colors | registry:style | Selector-driven Pantoken brand-color remapping for 13 color namespaces. | `npx shadcn@latest add https://pantoken.app/r/theme-colors.json` |
| primitives | registry:style | Opt-in utility classes for Pantoken's raw primitive palette. | `npx shadcn@latest add https://pantoken.app/r/primitives.json` |
| visual-debug | registry:style | Development-only layout outlines for Pantoken components. | `npx shadcn@latest add https://pantoken.app/r/visual-debug.json` |

## For AI agents

```text
You are adding components from @pantoken to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/pantoken.md) for the component list.
2. Fetch the machine-readable index: https://pantoken.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: pantoken).
```