Installation

1. Set up shadcn

Skip this if your project already has a components.json.

npx shadcn@latest init

2. Register the namespace

Add Textlab to the registries in components.json so you can install by name.

{
  "registries": {
    "@textlab": "https://textlab.dev/r/{name}.json"
  }
}

3. Add a component

npx shadcn@latest add @textlab/in-view-title

Without the namespace, use the full URL:

npx shadcn@latest add https://textlab.dev/r/in-view-title.json

Files land in components/textlab/ (or src/components/textlab/). The shared utilities go to components/textlab/lib and components import them with relative paths, so no tsconfig change is needed.

4. Import the tokens once

import "@/components/textlab/tokens.css";

The tokens define color, type and motion variables, light and dark themes, and the no-script and reduced-motion fallbacks. Dark mode follows a .dark class or data-theme="dark" on <html>.

5. Use it

import { InViewTitle } from "@/components/textlab/in-view-title/in-view-title";

export function Features() {
  return <InViewTitle variant="words" text="Everything your team needs" />;
}

Fonts

Most effects use whatever font they inherit. A few read optional font tokens: variable-font effects use --font-flex (Roboto Flex works well), and Signature uses --font-script. Load them with next/font and set the CSS variables.

Manual install

Every registry item is plain JSON with the source inlined. Open any /r/<name>.json, copy the files into the same folders, and run npm install motion@12 when a component lists it.