Getting started > Blocks library
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: [],
}