FunUi Framework

# Getting Started

Install the framework using NPM, and include the CSS file in your main entry point.

Home

Getting Started

Using Npm

Install the package via NPM

npm install funuicss@latest

Using Yarn

Install the package via Yarn

yarn add funuicss@latest

Import CSS file

Include the CSS file in your main entry point to use our classes. For instance, you can add it in files like layout.js, _app.jsx, index.js, index,jsx file

import 'funuicss/css/fun.css'

Set your Application theme

Wrap your entire application with <ThemeProvider> to enable global styling using FunUi's theming system. This provides consistent colors, spacing, and typography across all components. You typically use this in your main layout file to apply the theme throughout the app. You can set the theme to 'light' | 'dark' | 'dark-blue' | 'light-gray'

import { DM_Sans } from "next/font/google";
import "funuicss/css/fun.css";
import { ThemeProvider } from "funuicss";

const font = DM_Sans({
  subsets: ["latin", "latin-ext"],
  weight: ["300", "400", "500", "600", "700", "800", "900"],
});

export const metadata = {
  title: "App Title",
  description: "App's description",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
        <body className={font.className}>
          <ThemeProvider theme="light">
            {children}
          </ThemeProvider>
        </body>
    </html>
  );
}

Generate a Theme

Use this tool to generate a theme for your website. You can then use these colors in your CSS file to create a consistent look and feel for your website.

Primary:

Secondary:

Accent:

Primary Shades

primary

#6366f1

primary50

#ffffff

primary100

#ffffff

primary200

#eff0fe

primary300

#c1c2f9

primary400

#9294f5

primary500

#6366f1

primary600

#3438ed

primary700

#1418da

primary800

#0f13ac

primary900

#0b0e7d

Secondary Shades

secondary

#ec4899

secondary50

#ffffff

secondary100

#ffffff

secondary200

#fad3e6

secondary300

#f6a4cc

secondary400

#f176b3

secondary500

#ec4899

secondary600

#e71a7f

secondary700

#bb1366

secondary800

#8c0f4d

secondary900

#5e0a33

Accent Shades

accent

#ffc300

accent50

#fff9e5

accent100

#fff3cc

accent200

#ffe799

accent300

#ffdb66

accent400

#ffcf33

accent500

#ffc300

accent600

#cc9c00

accent700

#997500

accent800

#664e00

accent900

#332700

:root {
/* Primary Colors */
--primary: #6366F1;
--primary50: #FFFFFF;
--primary100: #FFFFFF;
--primary200: #EFF0FE;
--primary300: #C1C2F9;
--primary400: #9294F5;
--primary500: #6366F1;
--primary600: #3438ED;
--primary700: #1418DA;
--primary800: #0F13AC;
--primary900: #0B0E7D;

/* Secondary Colors */
--secondary: #EC4899;
--secondary50: #FFFFFF;
--secondary100: #FFFFFF;
--secondary200: #FAD3E6;
--secondary300: #F6A4CC;
--secondary400: #F176B3;
--secondary500: #EC4899;
--secondary600: #E71A7F;
--secondary700: #BB1366;
--secondary800: #8C0F4D;
--secondary900: #5E0A33;

/* Accent Colors */
--accent: #FFC300;
--accent50: #FFF9E5;
--accent100: #FFF3CC;
--accent200: #FFE799;
--accent300: #FFDB66;
--accent400: #FFCF33;
--accent500: #FFC300;
--accent600: #CC9C00;
--accent700: #997500;
--accent800: #664E00;
--accent900: #332700;
}

Installing React-Icons

To incorporate icons into your project, start by installing the react-icons library. This library provides a wide range of ready-to-use icons that you can easily integrate into your React components, enhancing the visual appeal and functionality of your application.

npm install react-icons

update your package

You can also update your packge to the latest version

npm update funuicss

CDN

For your HTML file, you have the option to use the CDN. However, keep in mind that you should exclusively use our pre-defined CSS classes.

https://unpkg.com/funuicss@latest/css/fun.css

Colors