CSS-in-JS within app dir

CSS-in-JS libraries often have a provider component that needs to wrap your entire application, we'll explore how to do this with a Providers client component that wraps our app. Although client components can't include server components, we can have a client component with server components as children.

Getting Started

we'll create a root layout for our app that will wrap its children with the Providers component. And a page server component that will use client components from the Chakra UI library.

|/app
|__/layout.js (client)
|__/page.js (server)
|__/providers.js (client)

// app/providers.js
'use client'

import { ChakraProvider } from '@chakra-ui/react'

const Providers = ({ children }) => (
  <ChakraProvider>{children}</ChakraProvider>
)

export default Providers

// app/layout.js
import { Page } from '@vercel/examples-ui'
import Providers from './providers'

const RootLayout = ({ children }) => (
  <Page className="flex flex-col gap-6">
    <Providers>{children}</Providers>
  </Page>
)

export default RootLayout

After setting up Chakra in the layout component, we can now use some of its components in the page:

// app/page.js

import { Text } from '@vercel/examples-ui'
import { Buttons, Tabs, Skeletons } from './showcase'

const IndexPage = () => (
  <section className="flex flex-col gap-6">
    <article className="flex flex-col gap-3">
      <Text variant="h2">Buttons</Text>
      <Buttons />
    </article>
    <article className="flex flex-col gap-3">
      <Text variant="h2">Tabs</Text>
      <Tabs />
    </article>
    <article className="flex flex-col gap-3">
      <Text variant="h2">Skeleton</Text>
      <Skeletons />
    </article>
  </section>
)

export default IndexPage

This way, your layout and page components are still server components, where you can fetch data from the server, and more.

Demo