Display15
Form1
Playground3
Installation
Start from a fresh project, initialize shadcn/ui, then install TT-UI components from the registry.
1) Create a project with your framework
Choose your framework starter, then continue with shadcn init.
bash
npx create-next-app@latest my-app --typescript --tailwind --app
2) Run shadcn init (with options)
Initialize shadcn in your app. Use the guided flow first, then use flags when you want repeatable setup.
bash
pnpm dlx shadcn@latest init
bash
pnpm dlx shadcn@latest init --help
bash
pnpm dlx shadcn@latest init --yes --base-color neutral --css-variables --rsc --src-dir --path app
3) Monorepo setup
Run shadcn commands in the app package (not at monorepo root), or pass --cwd.
bash
pnpm dlx shadcn@latest init --cwd apps/web
bash
pnpm dlx shadcn@latest add @tt-ui/registry/file-tree --cwd apps/web
4) Add TT-UI components from the registry
Replace file-viewer with any component slug from this library (for example file-tree or charts).
Namespaced registry
bash
pnpm dlx shadcn@latest add @tt-ui/registry/file-viewer
Direct URL
bash
pnpm dlx shadcn@latest add "https://ui.tibbstech.com/registry/file-viewer.json"
5) Configure namespaced registries
Your components.json should include the TT-UI namespace:
json
{"registries": {"@tt-ui/registry": "https://ui.tibbstech.com/registry.json"}}
Once configured, install by namespace and keep your commands concise.
Next step: try File Viewer or Component Playground.