# @vercel/edge-functions-ui

> The UI components exported here are being used in every edge example that has an UI. The package ships untranspiled code and **only works for Next.js apps** that include the following dev dependencies:

Latest version **0.2.1** (published 2021-10-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vercel/edge-functions-ui
pnpm add @vercel/edge-functions-ui
yarn add @vercel/edge-functions-ui
bun add @vercel/edge-functions-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-10-28 |
| First published | 2021-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 28.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kelly, dferber90, healeycodes, broph123, codybrouwers, ebb-tide, gdborton, msimulcik, jeffreyarneson, jaredpalmer, kikobeats, domeccleston, nutlope, hungrybearstudio, codetaromiura, redacted-vercel, mattcleg, gkaragkiaouris, geovanisouza92, dglsparsons, lostinpatterns, pralhad-vercel, vercel-release-bot, williamli, southpolesteve, goncy, leo, chibicode, ijjk, andybitz, iamevilrabbit, joecohens, tootallnate, styfle, zeit-bot, quietshu, hankvercel, mglagola, javivelasco, igorklopov, paco, dav-is, timer, lucleray, leerobinson, matheuss, nkzawa, anatrajkovska, timneutkens, elsigh, raunofreiberg, cl3arglass, samsisle, chriswdmr, rizbizkits, ernestd, ismaelrumzan, jhoch, mrmckeb, kuvos, creationix, aboodman, rauchg, huozhi, aadityajshah, cmvnk, arv, lfades, paulogdm, ktcarter, okbel, padmaia, msweeneydev, delba, catsaremlg, steventey, sokra, gsandhu, dbredvick, kdy1 |

## Links

- npm: https://www.npmjs.com/package/@vercel/edge-functions-ui
- npm.io page: https://npm.io/package/@vercel/edge-functions-ui

## Dependencies (2)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1
- [next-transpile-modules](https://npm.io/package/next-transpile-modules.md) ^8.0.0

## Recent versions

- 0.2.1 (latest) — 2021-10-28
- 0.2.0 — 2021-10-26
- 0.1.9 — 2021-10-26
- 0.1.8 — 2021-10-26
- 0.1.7 — 2021-10-24
- 0.1.6 — 2021-10-24
- 0.1.5 — 2021-10-23
- 0.1.4 — 2021-10-23
- 0.1.3 — 2021-10-23
- 0.1.2 — 2021-10-22
- 0.1.1 — 2021-10-22
- 0.1.0 — 2021-10-22

## README

# UI components for Edge examples

The UI components exported here are being used in every edge example that has an UI. The package ships untranspiled code and **only works for Next.js apps** that include the following dev dependencies:

- TypeScript
- Tailwindcss
- PostCSS

## How to use

### 1. Package installation

Install the package with npm or yarn:

```bash
npm i @vercel/edge-functions-ui
// or
yarn add @vercel/edge-functions-ui
```

If the app doesn't already have the required dev dependencies install them like so:

```bash
npm i typescript tailwindcss postcss autoprefixer
// or
yarn add typescript tailwindcss postcss autoprefixer
```

### 2. Tailwindcss setup

Because **the package is untranspiled**, in order to get it working in your next.js app you'll need to add the following to `next.config.js`:

```js
const withTM = require('@vercel/edge-functions-ui/transpile')()

module.exports = withTM({
  // Your next.js config
})
```

Now, if the app already has a `tailwind.config.js` file, open it and add the following preset and purge path:

```js
module.exports = {
  presets: [require('@vercel/edge-functions-ui/tailwind')],
  purge: ['node_modules/@vercel/edge-functions-ui/**/*.{js,ts,jsx,tsx}'],
}
```

Otherwise, create it with:

```js
module.exports = {
  presets: [require('@vercel/edge-functions-ui/tailwind')],
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    'node_modules/@vercel/edge-functions-ui/**/*.{js,ts,jsx,tsx}',
    // Include other paths where you use tailwind
  ],
  darkMode: false, // or 'media' or 'class'
  variants: {
    extend: {},
  },
}
```

### 3. PostCSS setup

Create a `postcss.config.js` file with:

```js
// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

### 4. Adding global styles

Open `_app.tsx` and add the following import to include the global CSS of the package and Tailwind base CSS:

```tsx
import '@vercel/edge-functions-ui/globals.css'
```

If you don't have a `_app.tsx` already it should look like this:

```tsx
import type { AppProps } from 'next/app'
import '@vercel/edge-functions-ui/globals.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
```

Now, if I wanted to add the default layout used in all examples, I can import the `Layout` component and use it inside `_app.tsx` like so:

```tsx
import type { AppProps } from 'next/app'
import type { LayoutProps } from '@vercel/edge-functions-ui/layout'
import { getLayout } from '@vercel/edge-functions-ui'
import '@vercel/edge-functions-ui/globals.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  const Layout = getLayout<LayoutProps>(Component)

  return (
    <Layout title="API Rate Limiting with Upstash" path="api-rate-limit">
      <Component {...pageProps} />
    </Layout>
  )
}
```

## Contributing

If you want to make an update to the package, go to an example and install it with npm:

```bash
npm i ../../packages/ui
```

npm will add a symlink and making changes to `packages/ui` will reload the app, once you're done feel free to create a PR!

> Make sure to have dependencies installed in `packages/ui` with `npm i` or otherwise the symlink won't resolve imports

---
_Source: https://npm.io/package/@vercel/edge-functions-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._