I Install

Star on GitHubFeedback

Install

0nlyType is a shadcn registry. You own the code it writes: every item lands in your project as a component and a small stylesheet.

Four steps

  1. Start from a Next app with Tailwind v4

    Set up the shadcn CLI once, if the project doesn't have a components.json yet.

    npx shadcn@latest init

  2. Add the base

    The tokens, the default font pair, the reset and the base pieces (link, key, fraction, meta, corners). It also points shadcn's own colour names at 0nlyType's, so a stock globals.css renders 0nlyType.

    npx shadcn@latest add https://thedirectors.agency/ui/r/0nlytype.json

  3. Add an item

    Each item brings the base and the siblings it needs. Its stylesheet is imported into your global CSS for you, by a path relative to app/globals.css. With a src/ layout, shadcn puts the files in src/styles/0nlytype/, so the same path works from src/app/globals.css.

    npx shadcn@latest add https://thedirectors.agency/ui/r/button.json https://thedirectors.agency/ui/r/checkbox.json

  4. Set the four switches, if you want them

    All optional, all on <html>. Without them you get Day, cotton, ultramarine and the parma pair.

    app/layout.tsx
    <htmllang="en"data-mode="day"          // or "nocturne"data-scheme="cotton"     // blueprint, statue, silence, risodata-key="ultramarine"   // viridian, ember, violet: overrides the scheme's accentdata-pair="parma"        // press, paris, salon: add fonts-<pair> first>

Worth knowing

  • Fonts are self-hosted and ship with their OFL notices. The other pairs are separate items: fonts-press, fonts-paris, fonts-salon.
  • Every item's CSS sits in @layer components and reads only --ot-* tokens, so your Tailwind utilities still win where you use them.
  • Reduced motion is handled in the tokens: every tempo becomes 1ms. Nothing else to set.
  • Right-to-left pages work with dir="rtl" on any ancestor.

Then read the principles before building with it.