Skip to main content
Twenty UI is still in alpha and does not yet provide a package-wide server-rendering guarantee. Verify the specific entry points and components you use with your framework’s server build and hydration flow.

​
Load CSS through your framework

The library ships prebuilt stylesheets. Import them from the application entry point or layout that your framework permits to load global CSS. A server that imports JavaScript without a CSS loader cannot load a stylesheet import directly. Components that use browser APIs, layout measurements, or effects belong in a client boundary when your framework distinguishes server and client components.

​
Initialize the theme

Theme stylesheets define their tokens under .light and .dark. Apply the initial class in the server-rendered document, then initialize ThemeProvider with the same scheme on the client:
This makes the palette available before hydration. Decide the initial scheme from information available to both renders, such as a saved preference passed from the server.

​
Keep browser measurements on the client

ThemeProvider resolves values using computed styles in the browser. During server rendering, or without computed-style support, theme values can remain CSS variable references. Do not assume that a numeric token returned during server rendering is already a JavaScript number. Use CSS variable references for styles and defer calculations that need resolved dimensions until the client has loaded the theme. Test hydration with the same components, stylesheets, and initial scheme that you deploy. The front component renderer is a separate sandbox with its own DOM limitations; successful browser rendering does not establish sandbox support.