Design System documentation

[mojtabamoosavi]

I want to use Fumadocs for documenting a design system, but I'm having issues with the component demo.
The problem is that Fumadocs' own styles are affecting the components.

Our design system is not built with Tailwind; instead, we used Pandacss. I also created the Fumadocs project without Tailwind and added the styles to the project by importing fumadocs-ui/style.css.

@fuma-nama

[fuma-nama]

It should not affect them except a default border color was added. What styles are conflicting?

[mojtabamoosavi]

Thank you for your response.

For example, the Button component:
These styles are causing an issue.

With these styles

Styles:

Result:

Without these styles

Styles:

Result:

[fuma-nama]

These are CSS resets applied by Tailwind CSS so it looks consistent across all browsers, make sure your panda CSS styles are not overwritten by it and you don’t rely on default browser styles