Getting Started

Setup fusion UI with your nextjs application

Installation

yarn add @brynlabs/fusion-ui@1.0.0-alpha.198 @brynlabs/fusion-css@3.0.0-alpha.52

Update your layout.tsx

File: layout.tsx
import {FusionUIProvider} from "@brynlabs/fusion-ui";

import '@brynlabs/fusion-css/dist/fusion.css'; // Install fusion-ui

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      {/* <body> */}
      <FusionUIProvider> {/* Replace your body with the FusionUIProvider */}
        {children}
      </FusionUIProvider>
      {/* </body> */}
    </html>
  );
}

Fusion UI uses Sass. If you dont have it already installed run

yarn add -D sass

Define font family "Inter" in your main stylesheet

File: style.scss
@font-face {
    font-display: swap;
    font-family: "Inter";
    font-weight: 100 900;
    font-style: italic;
    src: url("/Inter-Italic-Variable.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: "Inter";
    font-weight: 100 900;
    font-style: normal;
    src: url("/Inter-Variable.ttf") format("truetype");
}