To use DecaUI in your project, run one of the following commands in your terminal:
npm install @deca-ui/react
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>
)
}
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