julian1993arg / flowbite-next-typescript-starter Goto Github PK

This is a Next.js project bootstrapped with create-next-app.

Live demo: https://flowbite-next-starter.vercel.app/

It also includes:

• flowbite
• flowbite-react
• react-icons
• tailwindcss
• Quality of life tools, like
  • eslint with some plugins
  • prettier

Next.js requires Node.js.

If you don't already have npm and yarn available, make sure you set them up.

npm i -g npm yarn

Install the dependencies:

yarn install

Now you can run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Follow these steps to add flowbite-react to a next project without cloning this repo.

• Node.js

npx create-next-app@latest --typescript
cd my-app

npm install --save autoprefixer postcss tailwindcss flowbite flowbite-react

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
};

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    "./pages/**/*.{ts,tsx}",
    "./public/**/*.html",
  ],
  plugins: [require("flowbite/plugin")],
  theme: {},
};

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

import { Alert } from "flowbite-react";

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>;
}

• Carousels don't seem to work with next/image, so a normal <img/> is required, which ESLint will warn about
• Modals don't work on next on react@18 because of an hydration mismatch

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Flowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.

In this repository, we setup flowbite-react for you with examples of how to use the React components in pages/index.tsx.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.