Styling

notionic's components are styled with Tailwind CSS classes that use shadcn/ui's tokens, so they follow your theme without configuration.

Notion's nine colors are CSS variables in notionic/styles.css, such as --notionic-red, with light values and dark ones under the .dark class, as in shadcn/ui. Each background color (--notionic-red-bg…) is mixed from its text color and your --background, so it follows both.

To match your brand, override the text colors after the import:

:root,.dark {  --notionic-red: var(--destructive);  --notionic-blue: var(--primary);}

Mapping to tokens that already switch in dark mode keeps both modes right. Set --notionic-bg-mix (default 14%, 22% in dark mode) to make every background stronger or subtler, or override one --notionic-*-bg directly.

NotionRenderer renders a div with the notionic class, a vertical gap between blocks and your text color. Add classes with className:

<NotionRenderer blocks={blocks} className="text-lg" />

Notion's heading 1 renders as <h2>, heading 2 as <h3>, and so on, since your page title is the <h1>. Every heading gets an id and an anchor link.