Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ngrok/mantle

Package Overview
Dependencies
Maintainers
0
Versions
148
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ngrok/mantle

mantle is ngrok's UI library and design system.

  • 0.16.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Mantle

Mantle Design System

Mantle is ngrok’s UI library and design system. It’s inspired by shadcn/ui and uses Radix with Tailwind for styling. It’s documented using Remix.

Getting Started

Install @ngrok/mantle with your preferred package manager:

package managercommand
npmnpm install -E @ngrok/mantle
yarnyarn add -E @ngrok/mantle
pnpmpnpm add -E @ngrok/mantle
bunbun add -E @ngrok/mantle

Then, add the preset and mantle content to your tailwind configuration.

import { createRequire } from "node:module";
import { mantlePreset, resolveMantleContentGlob } from "@ngrok/mantle/tailwind-preset";
import type { Config } from "tailwindcss";

const require = createRequire(import.meta.url);

export default {
	presets: [mantlePreset],
	content: [resolveMantleContentGlob(require), "./app/**/*.tsx"], // 👈 don't forget to swap out app content glob here!
	// ... the rest of your tailwind config!
} satisfies Config;

Next, check out the Overview & Setup and Theme Provider usage docs and start using mantle components in your application!

Prerequisites

The following prerequisites are required to contribute to @ngrok/mantle. We walk through the tooling installation steps below.

Installation

Install the prerequisites through either the automated or manual installation guides.

Automated Installation

We use direnv to assist you with setting up all of the required tooling. Prefer to install and manage the tooling yourself? See the manual installation instructions below.

First, install direnv:

OScommand
macOSbrew install direnv
ubuntusudo apt install direnv

For all other OSes, see the direnv installation guide.

[!NOTE] Don't forget to set up direnv integration with your shell.

Next, clone the repo and move into the directory:

git clone git@github.com:ngrok-oss/mantle.git
cd frontend

Next, run:

direnv allow

[!WARNING] If direnv allow does nothing for you (you should see things happening!), consider following the guides to integrate direnv with your shell and then try direnv allow again! As a last resort, you can follow the manual installation instructions up above.

This will install nvm (if not already installed) as well as set the correct node and pnpm versions for you. It will also run pnpm install at the end to install all node_modules.

Manual Installation

If you prefer to manually manage and install the tooling yourself, follow these steps:

  1. Install nvm or your node version manager of choice.
  2. Ensure that node 20 is installed. With nvm, run nvm install.
  3. Enable pnpm with corepack: corepack enable pnpm
  4. Install pnpm with corepack: corepack install
  5. Install project dependencies with pnpm: pnpm install

FAQs

Package last updated on 11 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc