@ngrok/mantle 0.8.1 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,100 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ngrok-oss/mantle/HEAD/.github/mantle-dark.svg">
|
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ngrok-oss/mantle/HEAD/.github/mantle-light.svg">
|
|
5
|
+
<img alt="Mantle" src="https://raw.githubusercontent.com/ngrok-oss/mantle/HEAD/.github/mantle-light.svg" width="176" height="34" style="max-width: 100%;">
|
|
6
|
+
</picture>
|
|
7
|
+
</p>
|
|
8
|
+
<h1 align="center">
|
|
9
|
+
Mantle Design System
|
|
10
|
+
</h1>
|
|
11
|
+
|
|
12
|
+
[Mantle](https://mantle.ngrok.com) is [ngrok](https://ngrok.com/)’s UI library and design system. It’s inspired by [shadcn/ui](https://ui.shadcn.com) and uses [Radix](https://www.radix-ui.com) with [Tailwind](https://tailwindcss.com/) for styling. It’s documented using [Remix](https://remix.run/docs).
|
|
13
|
+
|
|
14
|
+
## Getting Started
|
|
15
|
+
|
|
16
|
+
Install `@ngrok/mantle` with your preferred package manager:
|
|
17
|
+
|
|
18
|
+
| package manager | command |
|
|
19
|
+
| --------------- | ---------------------------- |
|
|
20
|
+
| npm | npm install -E @ngrok/mantle |
|
|
21
|
+
| yarn | yarn add -E @ngrok/mantle |
|
|
22
|
+
| pnpm | pnpm add -E @ngrok/mantle |
|
|
23
|
+
| bun | bun add -E @ngrok/mantle |
|
|
24
|
+
|
|
25
|
+
Then, add the [preset](https://tailwindcss.com/docs/presets) and mantle content to your tailwind configuration.
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { createRequire } from "node:module";
|
|
29
|
+
import { mantlePreset, resolveMantleContentGlob } from "@ngrok/mantle/tailwind-preset";
|
|
30
|
+
import type { Config } from "tailwindcss";
|
|
31
|
+
|
|
32
|
+
const require = createRequire(import.meta.url);
|
|
33
|
+
|
|
34
|
+
export default {
|
|
35
|
+
presets: [mantlePreset],
|
|
36
|
+
content: [resolveMantleContentGlob(require), "./app/**/*.tsx"], // 👈 don't forget to swap out app content glob here!
|
|
37
|
+
// ... the rest of your tailwind config!
|
|
38
|
+
} satisfies Config;
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Next, check out the [Overview & Setup](https://mantle.ngrok.com/) and [Theme Provider](https://mantle.ngrok.com/components/theme-provider) usage docs and start using mantle components in your application!
|
|
42
|
+
|
|
43
|
+
### Prerequisites
|
|
44
|
+
|
|
45
|
+
The following prerequisites are required to contribute to `@ngrok/mantle`.
|
|
46
|
+
We walk through the [tooling installation](#installation) steps below.
|
|
47
|
+
|
|
48
|
+
- [Node 20](https://nodejs.org/en/download)
|
|
49
|
+
- [pnpm 9](https://pnpm.io/installation#using-npm)
|
|
50
|
+
- [nvm](https://github.com/nvm-sh/nvm)
|
|
51
|
+
|
|
52
|
+
### Installation
|
|
53
|
+
|
|
54
|
+
Install the prerequisites through either the [automated](#automated-installation) or [manual](#manual-installation) installation guides.
|
|
55
|
+
|
|
56
|
+
#### Automated Installation
|
|
57
|
+
|
|
58
|
+
We use [direnv](https://direnv.net/) to assist you with setting up all of the required tooling.
|
|
59
|
+
Prefer to install and manage the tooling yourself? See [the manual installation instructions below](#manual-installation).
|
|
60
|
+
|
|
61
|
+
First, install `direnv`:
|
|
62
|
+
|
|
63
|
+
| OS | command |
|
|
64
|
+
| ------ | ----------------------- |
|
|
65
|
+
| macOS | brew install direnv |
|
|
66
|
+
| ubuntu | sudo apt install direnv |
|
|
67
|
+
|
|
68
|
+
For all other OSes, see the [direnv installation guide](https://direnv.net/docs/installation.html).
|
|
69
|
+
|
|
70
|
+
> [!NOTE]
|
|
71
|
+
> Don't forget to [set up direnv integration with your shell](https://direnv.net/docs/hook.html).
|
|
72
|
+
|
|
73
|
+
Next, clone the repo and move into the directory:
|
|
74
|
+
|
|
75
|
+
```sh
|
|
76
|
+
git clone git@github.com:ngrok-oss/mantle.git
|
|
77
|
+
cd frontend
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Next, run:
|
|
81
|
+
|
|
82
|
+
```sh
|
|
83
|
+
direnv allow
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
> [!WARNING]
|
|
87
|
+
> If `direnv allow` does nothing for you (you should see things happening!), consider following the [guides to integrate direnv with your shell](https://direnv.net/docs/hook.html) and then try `direnv allow` again! As a last resort, you can follow the [manual installation instructions up above](#manual-installation).
|
|
88
|
+
|
|
89
|
+
This will install `nvm` (if not already installed) as well as set the correct `node` and `pnpm` versions for you.
|
|
90
|
+
It will also run `pnpm install` at the end to install all `node_modules`.
|
|
91
|
+
|
|
92
|
+
#### Manual Installation
|
|
93
|
+
|
|
94
|
+
If you prefer to manually manage and install the tooling yourself, follow these steps:
|
|
95
|
+
|
|
96
|
+
1. Install [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or your node version manager of choice.
|
|
97
|
+
2. Ensure that `node 20` is installed. With `nvm`, run `nvm install`.
|
|
98
|
+
3. Enable `pnpm` with `corepack`: `corepack enable pnpm`
|
|
99
|
+
4. Install `pnpm` with `corepack`: `corepack install`
|
|
100
|
+
5. Install project dependencies with `pnpm`: `pnpm install`
|