Common Issues

use client directive

Most components are written for NextJs and they use the use client directive to work correctly. If you're using React, you might need to remove it. Just keep in mind it!

Tailwind CSS

By default, Tailwind resets the styles for most of base elements, like ul, input, textarea, etc., and all the components here are built on that principle.

For example, the marquee component uses the ul element to display the content, but you'll not see the "list-none" class applied, since Tailwind remove it by default.

But if you're using third party styles that rely on tailwind, those might extend or change base styles, breaking the components. So make sure that the base styles are not overridden by third party ones, or alternatively, you can add the needed classes by yourself when copying the components.

Linter

If you've set specific linting rules for your project, you might encounter compile errors when copying the components, so you may need to adjust the components accordingly. For reference, I'm using and recommending Biome with Ultracite.

<Link> and <Image> tags

Most of the components are developed using <Link> and <Image> , since they're the standard for Next.js. If you're using React, you might need to adjust the components accordingly with the base <a> and <img> tags.