Suncel UI
A set of pre-made Suncel Blocks fully editable and ready to use in you Suncel Project. You can cherry pick and copy paste some Blocks in you project to be able to customize them or you can install the package in your project.
How to install it
You just need to install the @suncel/ui
package and import the Blocks you want with the rest of the Blocks of your project in your Suncel context.
npm i @suncel/ui
Example: if you want to import all the blocks from a specific library
// 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;
Example: if you want to import all the blocks from Suncel UI
// 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;
Flowbite
All the the free components from the Flowbite library are integrated and fully editable. They are all responsive and dark-mode compatible
import { MenuBlockSchema } from "@suncel/nextjs";
import flowbiteBlocks from "@suncel/ui/flowbite";
export const menuBlocks: MenuBlockSchema[] = [flowbiteBlocks];
To configure the default style of the Blocks, please refer to the Flowbite documentation. Also to be able to configure it you will need to have Tailwind CSS setup in your project and to add the @suncel/ui
package inside the content scanned by Tailwind CSS, in order for it to generate the classes.
// 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: [],
};
Contribute
The @suncel/ui
package is Open-source so feel free to contribute to the project if you want to add new blocks or modify an existing Block.
Check our CONTRIBUTING.md and ou CODE_OF_CONDUCT.md