Next.js

Installation Steps for the NextJS Typescript.

Step 1: Install NextJS and select 'Yes' to Tailwind while setting up:

npx create-next-app@latest --typescript <APPNAME>

✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

Step 2: Install xBesh UI using the code

  npm install @xbeshui/core
  yarn add @xbeshui/core
  pnpm add @xbeshui/core
  bun install @xbeshui/core

Step 3: Replace the default code in your tailwind.config.js with this code:

import type { Config } from "tailwindcss";
import xBeshTheme from "@xbeshui/core";
import defautTheme from "tailwindcss/defaultTheme";
 
const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./system/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    screens: {
      sm: xBeshTheme.xBeshTheme.screens.sm,
      md: xBeshTheme.xBeshTheme.screens.md,
      lg: xBeshTheme.xBeshTheme.screens.lg,
      xl: xBeshTheme.xBeshTheme.screens.xl,
      '2xl': xBeshTheme.xBeshTheme.screens['2xl']
    },
    colors: defautTheme.colors,
    extend: {
      colors: xBeshTheme.xBeshTheme.colors,
      container: xBeshTheme.xBeshTheme.container,
      fontFamily: xBeshTheme.xBeshTheme.fontFamily,
      animation: xBeshTheme.xBeshTheme.animation,
      borderRadius: xBeshTheme.xBeshTheme.borderRadius,
      keyframes: xBeshTheme.xBeshTheme.keyframes,
      opacity: xBeshTheme.xBeshTheme.opacity,
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

Step 4: Create a provider.tsx in your project and paste this code.

'use client'
 
import { Toaster, XbeshProvider } from "@xbeshui/core"
 
interface RootLayoutProps {
children: React.ReactNode
}
 
export default function Provider({ children }: RootLayoutProps) {
return (
<XbeshProvider storageKey="next" defaultTheme="system">
<Toaster />
{children}
</XbeshProvider>
)
}

Step 5: Add xBesh UI CSS in your project by pasting the following line import "@xbeshui/core/dist/style.css" in your layout.tsx or root file above import "./globals.css";

import type { Metadata } from "next";
import { Inter } from "next/font/google";
 
import "@xbeshui/core/dist/style.css"
import "./globals.css";
 
const inter = Inter({ subsets: ["latin"] });
 
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
 
export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

Step 6: Wrap the children in your main or root layout with Provider, so it looks like this:

 
import type { Metadata } from "next";
import { Inter } from "next/font/google";
 
import "@xbeshui/core/dist/style.css"
 
import "./globals.css";
 
import Provider from "./provider"
 
const inter = Inter({ subsets: ["latin"] });
 
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
 
export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode;}>) {
return (
<html lang="en">
<body className={inter.className}>
<Provider>
  {children}
</Provider>
</body>
</html>
);
}