Suncel home pageSuncel logoSuncel v1.1
  1. Suncel UI

Getting started > Blocks library

Suncel  UI

npm i @suncel/ui
// suncel/menuBlocks.tsx file

import { MenuBlockSchema } from "@suncel/nextjs";
import flowbiteBlocks from "@suncel/ui/flowbite";

export const menuBlocks: MenuBlockSchema[] = [
   flowbiteBlocks,
   ...
   // ... other blocks
];


// pages/_app.tsx file

import type { AppProps } from "next/app";
import { SuncelContext } from "@suncel/nextjs";
import { menuBlocks } from "@/suncel/menuBlocks";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SuncelContext menuBlocks={menuBlocks}>
      <Component {...pageProps} />
    </SuncelContext>
  );
}

export default MyApp;
// suncel/menuBlocks.tsx file

import { MenuBlockSchema } from "@suncel/nextjs";
import allBlocks from "@suncel/ui";

export const menuBlocks: MenuBlockSchema[] = [
   ...allBlocks,
   ...
   // ... other blocks
];


// pages/_app.tsx file

import type { AppProps } from "next/app";
import { SuncelContext } from "@suncel/nextjs";
import { menuBlocks } from "@/suncel/menuBlocks";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SuncelContext menuBlocks={menuBlocks}>
      <Component {...pageProps} />
    </SuncelContext>
  );
}

export default MyApp;
import { MenuBlockSchema } from "@suncel/nextjs";
import flowbiteBlocks from "@suncel/ui/flowbite";

export const menuBlocks: MenuBlockSchema[] = [flowbiteBlocks];
// If you need to configure the style 
// Includes @suncel/ui package in the scanned files from Tailwind CSS

// tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./suncel/**/*.{js,ts,jsx,tsx}",
    // Includes @suncel/ui 
    "./node_modules/@suncel/ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}