https://github.com/nextjs-components/nextjs-components

A collection of React components, transcribed from https://vercel.com/design.
https://github.com/nextjs-components/nextjs-components

components css-modules design design-system nextjs react typescript

Last synced: about 7 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/nextjs-components/nextjs-components
• Owner: nextjs-components
• Created: 2022-01-01T20:59:11.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-31T20:38:17.000Z (26 days ago)
• Last Synced: 2025-01-19T12:03:16.861Z (7 days ago)
• Topics: components, css-modules, design, design-system, nextjs, react, typescript
• Language: TypeScript
• Homepage: https://nextjs-components-thekevinwang.vercel.app/
• Size: 4.73 MB
• Stars: 163
• Watchers: 3
• Forks: 41
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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](https://vercel.com)

![nextjs-components](https://user-images.githubusercontent.com/26389321/187589104-77ce2ff9-ecbd-47a6-98d2-0e809930b648.jpg)

## Motivation

[Blog post](https://thekevinwang.com/2022/01/09/nextjs-components/) from 01/09/2022

## Installation

```bash

# with npm

npm i nextjs-components

```

```bash

# 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](https://nextjs.org/blog/next-13-1#built-in-module-transpilation-stable). (Up until Next.js `13.1.0`, [`next-transpile-modules`](https://github.com/martpie/next-transpile-modules) handled this use case.)

```js

// 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

```tsx

"use client";

// ./app/layout.tsx

import { ThemeContextProvider } from "nextjs-components/src/contexts/ThemeContext";

import "nextjs-components/src/styles/globals.css";

export default function RootLayout({ children }) {

  return (

    

      

        {children}

      

    

  );

}

```

Using the _traditional_ custom `_app.tsx`

```tsx

// ./pages/_app.tsx

import {

  ThemeContextProvider,

  ToastArea,

  ToastsProvider,

} from "nextjs-components";

import "nextjs-components/src/styles/globals.css";

function App({ Component, pageProps }) {

  return (

    

      

        

        

      

    

  );

}

export default App;

```

Check out the [documentation site](https://nextjs-components-thekevinwang.vercel.app/) 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.