Does Features Keyboard work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Features Keyboard

A drawn keyboard that presses each shortcut in turn, for keyboard-first products.

Type: Features section
Styles: Dark, Futuristic
Licence: Charcoal UI Pro

About Features Keyboard

Features Keyboard is made for keyboard-first products. A drawn keyboard presses each shortcut in turn, the action name changes above it, and a list on the left lets visitors pick any shortcut.

It is a full-width features section for React and Tailwind CSS 4, in a dark and futuristic style. Preview it at any width above, then install it with one command.

When to use Features Keyboard

Productivity apps and editors.
Terminals and developer tools.
CRMs and email clients.
Docs and wiki tools with a command bar.

How it is built

The keyboard is plain markup with pressed keys lit in your accent, the cycle stops under reduced motion, and shortcuts are an array of keys and actions.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Features Keyboard

Features Keyboard is part of 3 full templates, so you can see it in a finished page.

Meridian template: The CRM for teams under fifty.
Vellum template: Find anything your team ever wrote.
Terminus template: A terminal with taste.
Features Grid: A React features grid of six cards with a pointer spotlight and staggered reveal
Features Bento: A React bento features section where every tile is a working component
Features Alternating: A free React alternating features section: image and text rows that slide in
Features Tabs: React feature tabs that auto-advance with a progress bar and swap visuals

Install Features Keyboard

npx shadcn@latest add @charcoal/features-keyboard

Features Keyboard is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Features Keyboard work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Features Keyboard as Markdown