Mono chip

Marks a short technical identifier. Monospace text with a 1px mixed border.

Preview

/noord-brand0.3.0

In action

Id

The job

A name and a version. Flush, no pill radius.

/noord-brand0.3.0

When to use

Use it for

  • Identifiers in monospace: paths, handles, keys, short code.
  • Inline in copy or in a list of tags.

Not for

  • Status words; use Badge.
  • Removable filter tokens; the chip has no close control.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Chip } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/chip.

2. Vendor the source

npx @noorddev/vlak-cli add chip

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/chip.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Chip } from "@noorddev/vlak-react";

<Chip>/noord-brand</Chip>

Props

Chip

Mono identifier with a 1px mixed border.

Also accepts HTMLAttributes<HTMLSpanElement>.

Accessibility

Markup

<span class="rs-chip">/noord-brand</span>

Classes

.rs-chip