Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Keyboard Shortcut Tips Blog Block for React

Five keyboard-shortcut tips in two columns: each cell draws its chord in large key caps, names the app it works in and says what it does in one line.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A quick-tips block for React with Base UI, written for Chordwick, an editor-plugin newsletter. A centred header (with a line on reading Ctrl and Alt as ⌘ and ⌥ on a Mac) sits over five tips in two columns, each in its own cell with overshooting lines. A cell is the chord itself, drawn large in key caps, with the app it works in as a tag above it and one line on what it does; the odd fifth cell spans both columns. It's built from Kbd, Badge and Guides, and it's static: nothing to press, the chord is the picture.

FAQ

How do I add a tip?

Add an entry to TIPS: an id, the app, the chord as a list of keys and one line of text. A key that is a symbol takes a spoken name ("Up arrow") so screen readers say it in words. The header's count ("Five shortcuts") derives from the array.

Why are the chords shown for Windows and Linux?

One set of keys is easier to read than two. The header says how to translate for a Mac, and the data is plain text, so a block that detects the platform can swap "Ctrl" for "⌘" before it renders.

How are the chords built?

Each key is a Kbd, joined by a plus sign that is drawing rather than text. The chord is always read left to right, even in a right-to-left page, the way a keyboard is.

Can I press the keys to try them?

Not here: the caps are a picture of the chord. For keys you can try, see the keyboard shortcut reference card in the features category.

How does it look on a phone?

The cells go to one column and the caps wrap if a chord is long.

  • Pro

    Keyboard Shortcut Card Features

    Live controls

    A shortcut cheat sheet for a shortcut trainer: two groups of four shortcuts in one framed card, where pressing a shortcut while the card is focused lights its row.

  • Pro

    Tabbed Code Snippets Blog

    Article parts

    A code window with a tab per file, numbered lines, marked keywords and a Copy button that really copies, beside the three posts the snippets come from.

  • Pro

    Countdown Toggle Listicle Blog

    Post lists

    A seven-item countdown with huge drawn numerals, prep-time and difficulty chips, and a Countdown / Count up toggle that reverses the list without moving the page.

  • Pro

    Tick-Off Checklist Blog

    Tutorials and series

    A "before you start" checklist for a tutorial: six real checkboxes for tools and parts, struck through when ticked, with a count, a thin bar and a Reset.

  • Pro

    Pull Quotes Blog

    Article parts

    Four pull quotes from a science-writing blog in cells with line overshoot: a large drawn quotation mark, the key phrase marked by a highlighter, who said it and in which post, a Copy button and a Read in context link.

  • Pro

    Scroll Panel Glossary Blog

    Topics and indexes

    A glossary in a fixed-height scroll panel: sticky letter headings, a part-of-speech tag per term, See also buttons that open a hover card and scroll to the term, and a posts link.

All 100 blog blocks