A collection of React components, transcribed from

This is not affiliated with Vercel

I wanted to use nice-looking components on my website,

Start by installing the package.

npm i nextjs-components

This project needs to be transpiled to work with your Next.js application. It is recommended to use Next.js 13.1.0’s built-in module tranpilation. (Up until Next.js 13.1.0, next-transpile-modules handled this use case.)

// next.config.js

 * @type {import('next').NextConfig}
const nextConfig = {
  reactStrictMode: true,
  pageExtensions: ["tsx", "ts"],
  swcMinify: true,
  transpilePackages: ["nextjs-components"],

module.exports = nextConfig;

Using Next 13's app directory.

Note: This library attempts to mark its client components with the "use client"; directive so that they don't require the consuming application to have to add the directive itself.

// ./app/layout.tsx
import { ThemeContextProvider } from "nextjs-components/src/contexts/ThemeContext";
import "nextjs-components/src/styles/globals.css";

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

Using the traditional custom _app.tsx

// ./pages/_app.tsx
import {
} from "nextjs-components";
import "nextjs-components/src/styles/globals.css";

function App({ Component, pageProps }) {
  return (
        <Component {...pageProps} />
        <ToastArea />

export default App;