Skip to content
TTPC UI

TPC UI

A fork of shadcn/ui themed with TPC tokens and motion rules, plus Magic UI effects and TPC-built components. Install any piece with the shadcn CLI.

104Components66Effects & transitions4Blocks

Install

  1. Add the TPC registry to components.json:
    {
  "registries": {
    "@tpc": "https://ui.theportlandcompany.com/r/{name}.json"
  }
}
  2. Install the theme (tokens, motion, 44px hit areas):
    npx shadcn@latest add @tpc/tpc-style
  3. Add components:
    npx shadcn@latest add @tpc/button @tpc/dialog @tpc/marquee
  4. Or use the npm package:
    npm i @the-portland-company/ui

Motion rules

  • Durations come from --tpc-duration-fast|base|slow|slower (120/200/360/600ms).
  • Easing comes from --tpc-ease-standard|emphasized|exit|linear.
  • Animate only transform and opacity. Every effect honors reduced motion.