Styling
Findkit UI uses Shadow DOM to avoid conflicting CSS styles. This means that if you want to customize the styles you cannot just target the class names directly in your stylesheets. You must add the styles inside the Shadow Root or disable the Shadom DOM.
Adding Styles inside the Shadow Root
Just pass the custom CSS in the css
option.
import { FindkitUI } from "@findkit/ui";
const ui = new FindkitUI({
publicToken: "<TOKEN>",
css: `
/* Reveal the backdrop */
.findkit--modal {
position: fixed;
width: initial;
inset: 1rem;
}
`,
});
Disabling Shadow DOM
If you want to use your existing stylesheets you can just disable the Shadow DOM
creation in FindkitUI
with shandowDom: false
option:
import { FindkitUI } from "@findkit/ui";
const ui = new FindkitUI({
publicToken: "<TOKEN>",
shadowDom: false,
});
But do note that this can cause unexpected styles to leak in the FindkitUI
if
you have used plain element selectors like h1 { ... }
in your website styles.