Next.js

Install and configure Next.js.

To use @wds-ui in your project, you need to follow the following steps:

Create project

Start by creating a new React project using create-next-app:

npx create-next-app@latest

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer tailwindcss-animate @tailwindcss/typography @tailwindcss/aspect-ratio && npx tailwindcss init -p


/** @type {import('tailwindcss').Config} */
export default {
  content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@wds-ui/**/*.{js,jsx,ts,tsx,html}",
  ],

Style System

Easily improve your app’s look with the @wds-ui style system. It gives you full control over themes, making your app look great and professional.

Add the following Tailwind directives and rules to your CSS (src/style.css)



@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
.prose {
@apply text-foreground;
--tw-prose-body: var(--foreground);
--tw-prose-headings: var(--foreground);

    --tw-prose-links: var(--primary);
    --tw-prose-bold: var(--foreground);
    --tw-prose-counters: var(--

Theming

Start by installing next-themes:

npm install next-themes

Create a theme provider

components/theme-provider.jsx


"use client"

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({ children, ...props }) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Wrap your root layout

Add the ThemeProvider to your root layout (app/layout.jsx).


import "./globals.css";
import { ThemeProvider } from "./components/theme-provider";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <The

That’s it

You can now use @wds-ui components in your project.

more react components