nextjs-components
v6.0.0-rc.2
Published
React components transcribed from the Vercel design system.
Readme
[!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
Motivation
Blog post from 01/09/2022
Installation
# with npm
npm i nextjs-components# with yarn
yarn add nextjs-componentsThis 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-appsupport.In older versions, usage with
create-react-appwas supported. However, from>=v1.0.0, the pre-built/distfolder was dropped.