Skip to content

feat: npm command shorthand contributing docs #2612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 8, 2025
+33 −0
Merged

feat: npm command shorthand contributing docs #2612

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
89904e4
feat: npm command shorthand
alexcarpenter Sep 19, 2025
e66e666
make apart of codeblock section
alexcarpenter Sep 19, 2025
01c08c4
Merge branch 'main' into alexcarpenter/npm-installs
alexcarpenter Oct 8, 2025
d09282d
move placement
alexcarpenter Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -618,6 +618,39 @@ console.log('ignored')
> [!NOTE]
> "prettier-ignore" comments are removed when a code block is rendered on the docs site.

#### npm commands

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wondering if this would not belong better within the < CodeBlockTabs/> section.

Screenshot 2025-10-08 at 8 26 05 am

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me! Will move it when I am back from lunch.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adjusted the placement d09282d

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great suggestion sarah!

npm codeblocks will automatically generate the commands for `pnpm`, `yarn`, and `bun` within a `<CodeBlockTabs />`.

````mdx
```npm
npm i @clerk/nextjs
```
````

Example output:

````mdx
<CodeBlockTabs options={["npm", "pnpm", "yarn", "bun"]}>
```bash {{ filename: 'terminal' }}
npm i @clerk/nextjs
```

```bash {{ filename: 'terminal' }}
pnpm add @clerk/nextjs
```

```bash {{ filename: 'terminal' }}
yarn add @clerk/nextjs
```

```bash {{ filename: 'terminal' }}
bunx add @clerk/nextjs
```

</CodeBlockTabs>
````

### `<Steps />`

The `<Steps />` component is used to number a set of instructions with an outcome. It uses the highest heading available in the component to denote each step. Can be used with `h2` and `h3` headings.
Expand Down