Style inconsistency between local implementation and official documentation examples

[chaxus]

Problem Description

I followed the official documentation and used the provided code in my project, but the components aren't looking the same as the examples shown on the site.

I noticed the styling seems to be using different CSS variables than what's used in the documentation examples. The variable values don't match up, and I'm not sure how to fix this.

I'd really like to get the same visual results as shown in the documentation when using the exact same code. The components should look identical to the examples!

Thanks!

Version

1.1.2

[chaxus]

I'm not sure if the official documentation examples are using the code from:
https://github.com/vercel/ai-elements/tree/main/apps/test/app/examples

I noticed that the examples in this test directory seem to have the same styling as what's published on npm.

[tobiasbueschel]

Hi @chaxus the official documentation is hosted elsewhere at the moment, but there is already a PR to move it into this repository: #156.

[chaxus]

Hi @chaxus the official documentation is hosted elsewhere at the moment, but there is already a PR to move it into this repository: #156.

Thanks for the pointer! I understand that once this PR is merged, the issue will be resolved. I'll go ahead and close this issue then.

[haydenbleasel]

Hey folks, this has been fixed. The problem was 2 separate setups of shadcn/ui, 2 different versions of Tailwind, etc. Now that it's all open source, this issue should be resolved. Appreciate you both 🙏