Components · Chat

Thread Transcript

Nav bars wired to a thread: one bar per turn, marking the turns in view and jumping to the one you pick.

How do I add a custom colour in Tailwind v4?

Add it under @theme in your stylesheet, as --color-brand, and every utility picks it up: bg-brand, text-brand, border-brand.

And for dark mode?

Redefine the variable under .dark. The utilities read the variable, so they follow it without a dark: prefix.

Can I use it with opacity?

Yes. bg-brand/10 works, since v4 mixes colours with color-mix instead of splitting them into channels.

What about a gradient between two brand colours?

Use from-brand to-brand-2. Both stops read the theme variables, so the gradient switches with dark mode too. If the two colours are far apart, add via-brand-mid so the middle doesn't go grey.

Does it work in arbitrary values?

Reference it as var(--color-brand) inside the brackets.

How do I share the theme across two apps?

Put the @theme block in a package and import that stylesheet from both apps. Each app can still override a variable after the import.

Will my old tailwind.config.js still work?

Only through @config, as a bridge while you move over. New projects don't need a config file at all.

Thanks

Any time.

Installation

The command adds the @aiellie registry to components.json on its first run. With it there, shadcn installs it too: npx shadcn@latest add @aiellie/thread-transcript.

Usage and the API reference for Thread Transcript are still being written.