@pantoken

InstUI design tokens, themes, components, and interactions.

80 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://pantoken.app/r/registry.json

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

bun bunx shadcn@latest add https://pantoken.app/r/registry.json

fetch registry curl -s https://pantoken.app/r/registry.json

Components

80 total

Canvas LMS Theme theme

Instructure Canvas LMS theme variables bridging to shadcn/ui custom properties.

npx shadcn@latest add https://pantoken.app/r/theme-canvas.json

Canvas High Contrast Theme theme

Canvas LMS High Contrast theme variables for WCAG AAA compliance.

npx shadcn@latest add https://pantoken.app/r/theme-canvas-high-contrast.json

Instructure Rebrand Theme theme

Modern Instructure brand theme variables.

npx shadcn@latest add https://pantoken.app/r/theme-rebrand.json

Pantoken Base System base

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

npx shadcn@latest add https://pantoken.app/r/base.json

Button style

Instructure Button component styled with semantic .instui-button classes.

npx shadcn@latest add https://pantoken.app/r/button.json

Alert style

Instructure Alert component styled with semantic .instui-alert classes.

npx shadcn@latest add https://pantoken.app/r/alert.json

Badge style

Instructure Badge component styled with semantic .instui-badge classes.

npx shadcn@latest add https://pantoken.app/r/badge.json

Pill style

Instructure Pill component styled with semantic .instui-pill classes.

npx shadcn@latest add https://pantoken.app/r/pill.json

Tag style

Instructure Tag component styled with semantic .instui-tag classes.

npx shadcn@latest add https://pantoken.app/r/tag.json

Avatar style

Instructure Avatar component styled with semantic .instui-avatar classes.

npx shadcn@latest add https://pantoken.app/r/avatar.json

Tabs style

Instructure Tabs component styled with semantic .instui-tabs classes.

npx shadcn@latest add https://pantoken.app/r/tabs.json

Metric style

Instructure Metric component styled with semantic .instui-metric classes.

npx shadcn@latest add https://pantoken.app/r/metric.json

Byline style

Instructure Byline component styled with semantic .instui-byline classes.

npx shadcn@latest add https://pantoken.app/r/byline.json

Img style

Instructure Img component styled with semantic .instui-img classes.

npx shadcn@latest add https://pantoken.app/r/img.json

Table style

Instructure Table component styled with semantic .instui-table classes.

npx shadcn@latest add https://pantoken.app/r/table.json

Link style

Instructure Link component styled with semantic .instui-link classes.

npx shadcn@latest add https://pantoken.app/r/link.json

List style

Instructure List component styled with semantic .instui-list classes.

npx shadcn@latest add https://pantoken.app/r/list.json

Icon style

Instructure Icon component styled with semantic .instui-icon classes.

npx shadcn@latest add https://pantoken.app/r/icon.json

Checkbox style

Instructure Checkbox component styled with semantic .instui-checkbox classes.

npx shadcn@latest add https://pantoken.app/r/checkbox.json

Radio style

Instructure Radio component styled with semantic .instui-radio classes.

npx shadcn@latest add https://pantoken.app/r/radio.json

Spinner style

Instructure Spinner component styled with semantic .instui-spinner classes.

npx shadcn@latest add https://pantoken.app/r/spinner.json

Progress style

Instructure Progress component styled with semantic .instui-progress classes.

npx shadcn@latest add https://pantoken.app/r/progress.json

Menu style

Instructure Menu component styled with semantic .instui-menu classes.

npx shadcn@latest add https://pantoken.app/r/menu.json

Modal style

Instructure Modal component styled with semantic .instui-modal classes.

npx shadcn@latest add https://pantoken.app/r/modal.json

Breadcrumb style

Instructure Breadcrumb component styled with semantic .instui-breadcrumb classes.

npx shadcn@latest add https://pantoken.app/r/breadcrumb.json

Billboard style

Instructure Billboard component styled with semantic .instui-billboard classes.

npx shadcn@latest add https://pantoken.app/r/billboard.json

Rating style

Instructure Rating component styled with semantic .instui-rating classes.

npx shadcn@latest add https://pantoken.app/r/rating.json

Toggle-group 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 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 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 style

Instructure Progress-circle component styled with semantic .instui-progress-circle classes.

npx shadcn@latest add https://pantoken.app/r/progress-circle.json

Pagination style

Instructure Pagination component styled with semantic .instui-pagination classes.

npx shadcn@latest add https://pantoken.app/r/pagination.json

Toggle-details 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 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 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 style

Instructure Tree-browser component styled with semantic .instui-tree-browser classes.

npx shadcn@latest add https://pantoken.app/r/tree-browser.json

Calendar style

Instructure Calendar component styled with semantic .instui-calendar classes.

npx shadcn@latest add https://pantoken.app/r/calendar.json

Popover style

Instructure Popover component styled with semantic .instui-popover classes.

npx shadcn@latest add https://pantoken.app/r/popover.json

Tray style

Instructure Tray component styled with semantic .instui-tray classes.

npx shadcn@latest add https://pantoken.app/r/tray.json

Tooltip style

Instructure Tooltip component styled with semantic .instui-tooltip classes.

npx shadcn@latest add https://pantoken.app/r/tooltip.json

Range-input style

Instructure Range-input component styled with semantic .instui-range-input classes.

npx shadcn@latest add https://pantoken.app/r/range-input.json

Mask style

Instructure Mask component styled with semantic .instui-mask classes.

npx shadcn@latest add https://pantoken.app/r/mask.json

Screen-reader-content 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 style

Instructure Heading component styled with semantic .instui-heading classes.

npx shadcn@latest add https://pantoken.app/r/heading.json

Text style

Instructure Text component styled with semantic .instui-text classes.

npx shadcn@latest add https://pantoken.app/r/text.json

Close-button 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 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 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 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 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 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 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 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 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 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 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 style

Instructure View component styled with semantic .instui-view classes.

npx shadcn@latest add https://pantoken.app/r/view.json

Card style

Pantoken card component styles and documented HTML structure.

npx shadcn@latest add https://pantoken.app/r/card.json

Banner style

Pantoken banner component styles and documented HTML structure.

npx shadcn@latest add https://pantoken.app/r/banner.json

Agent Shell style

Pantoken agent-shell component styles and documented HTML structure.

npx shadcn@latest add https://pantoken.app/r/agent-shell.json

Wrapper Layout style

Pantoken wrapper layout styles and canonical HTML template.

npx shadcn@latest add https://pantoken.app/r/wrapper.json

Callout Layout style

Pantoken callout layout styles and canonical HTML template.

npx shadcn@latest add https://pantoken.app/r/callout.json

Hero Layout style

Pantoken hero layout styles and canonical HTML template.

npx shadcn@latest add https://pantoken.app/r/hero.json

Page Layout Layout style

Pantoken page-layout layout styles and canonical HTML template.

npx shadcn@latest add https://pantoken.app/r/page-layout.json

Rubric Note Layout style

Pantoken rubric-note layout styles and canonical HTML template.

npx shadcn@latest add https://pantoken.app/r/rubric-note.json

Testimonial Layout style

Pantoken testimonial layout styles and canonical HTML template.

npx shadcn@latest add https://pantoken.app/r/testimonial.json

Two Column Layout style

Pantoken two-column layout styles and canonical HTML template.

npx shadcn@latest add https://pantoken.app/r/two-column.json

Pantoken Custom Icons 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 style

The complete Simple Icons brand-glyph token collection.

npx shadcn@latest add https://pantoken.app/r/simple-icons.json

Instructure Product Logos style

All Instructure product logo image tokens.

npx shadcn@latest add https://pantoken.app/r/logos.json

Canvas Logos style

Logo image tokens for canvas.

npx shadcn@latest add https://pantoken.app/r/logo-canvas.json

Igniteai Logos style

Logo image tokens for igniteai.

npx shadcn@latest add https://pantoken.app/r/logo-igniteai.json

Instructure Logos style

Logo image tokens for instructure.

npx shadcn@latest add https://pantoken.app/r/logo-instructure.json

Learnplatform Logos style

Logo image tokens for learnplatform.

npx shadcn@latest add https://pantoken.app/r/logo-learnplatform.json

Mastery Logos style

Logo image tokens for mastery.

npx shadcn@latest add https://pantoken.app/r/logo-mastery.json

Pantoken Logos style

Logo image tokens for pantoken.

npx shadcn@latest add https://pantoken.app/r/logo-pantoken.json

Parchment Logos style

Logo image tokens for parchment.

npx shadcn@latest add https://pantoken.app/r/logo-parchment.json

Custom Theme Colors style

Selector-driven Pantoken brand-color remapping for 13 color namespaces.

npx shadcn@latest add https://pantoken.app/r/theme-colors.json

Primitive Utilities style

Opt-in utility classes for Pantoken's raw primitive palette.

npx shadcn@latest add https://pantoken.app/r/primitives.json

Visual Debug style

Development-only layout outlines for Pantoken components.

npx shadcn@latest add https://pantoken.app/r/visual-debug.json