DecaUI

After installing DecaUI, you need to set up the DecaUIProvider at the root of your application. This can be either in your index.jsx, index.tsx or App.jsx depending on the framework you use.

import * as React from 'react';

// 1. import `DecaUIProvider` component
import { DecaUIProvider } from '@deca-ui/react'

function App({Component}) {
  // 2. Wrap DecaUIProvider at the root of your app
  return (
    <DecaUIProvider>
      <Component />
    </DecaUIProvider>
  )
}

Next.js

If you are using Next.js, you need customization file _document.js, please refer to Next.js document here to create file _document.js.

Then we add the following code to the file:

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { getCssText } from "@deca-ui/react";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <style
            id="stitches"
            dangerouslySetInnerHTML={{ __html: getCssText() }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Made by Heril Saha

Contents

Setup

Next.js