Nextjs-components NPM | npm.io

6.0.0-rc.2 • Published 5 months ago

Install

Weekly downloads

-

License

ISC

Repository

Last release

5 months ago

!WARNING This project is not actively maintained.

nextjs-components

A collection of React components, transcribed from https://vercel.com/design. ^1

^1: This is not affiliated with Vercel

nextjs-components

Motivation

Blog post from 01/09/2022

Installation

# with npm
npm i nextjs-components

# with yarn
yarn add 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;

Usage

Using Next 13's app directory

"use client";

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

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

Using the traditional custom _app.tsx

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

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

export default App;

Check out the documentation site for more examples!

!WARNING Dropped create-react-app support.
In older versions, usage with create-react-app was supported. However, from >=v1.0.0, the pre-built /dist folder was dropped.

@radix-ui/react-popover @radix-ui/react-portal clsx next-themes react-aria react-stately react-use-measure

@infinitebrahmanuniverse/nolb-nextj @everything-registry/sub-chunk-2269 rafsun-core-services @zalastax/nolb-nextj

6 months ago

5 months ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago