Desktop base

A desktop app isn't a page. Dragging across a toolbar shouldn't highlight its labels, buttons don't turn the pointer into a hand, and the window doesn't bounce past its edges. The desktop base gives an Electron or Tauri app that feel in a few base rules.

It's separate from the theme so a website can wear the tokens and keep selectable text. This docs site uses the theme without it.

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/desktop

What it doesCopy Anchor Link

The whole item is one base layer:

@layer base {
  html {
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    overscroll-behavior: none;
  }
  input,
  textarea,
  [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
  }
  img {
    -webkit-user-drag: none;
  }
}

Making content selectableCopy Anchor Link

Content people copy opts back in with select-text: chat messages, notes, transcripts, logs, error details. Put it on the element, or on a container to cover everything inside.

<p className="select-text">{message.text}</p>

Copy that's useful to grab, such as a stream key or a file path, is better served by a copy button next to it than by asking someone to drag across it.

When not to use itCopy Anchor Link

• On a website or a docs site. Readers expect to select and copy any text, and to see the hand over a link.
• In a window that's mostly content. A document viewer or a log window would opt back in almost everywhere; leave the base out there, or scope select-text to the content pane.
• In a component embedded in someone else's page. The rules sit on html, so they'd change the whole host page.