- Component
- Stylesheet
import { Command } from 'cmdk'
export function LinearCMDK() {
return (
<div className="linear">
<Command>
<div cmdk-linear-badge="">Issue - FUN-343</div>
<Command.Input autoFocus placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
{items.map(({ icon, label, shortcut }) => {
return (
<Command.Item key={label} value={label}>
{icon}
{label}
<div cmdk-linear-shortcuts="">
{shortcut.map((key) => {
return <kbd key={key}>{key}</kbd>
})}
</div>
</Command.Item>
)
})}
</Command.List>
</Command>
</div>
)
}
const items = [
{
icon: <AssignToIcon />,
label: 'Assign to...',
shortcut: ['A'],
},
{
icon: <AssignToMeIcon />,
label: 'Assign to me',
shortcut: ['I'],
},
{
icon: <ChangeStatusIcon />,
label: 'Change status...',
shortcut: ['S'],
},
{
icon: <ChangePriorityIcon />,
label: 'Change priority...',
shortcut: ['P'],
},
{
icon: <ChangeLabelsIcon />,
label: 'Change labels...',
shortcut: ['L'],
},
{
icon: <RemoveLabelIcon />,
label: 'Remove label...',
shortcut: ['⇧', 'L'],
},
{
icon: <SetDueDateIcon />,
label: 'Set due date...',
shortcut: ['⇧', 'D'],
},
]
function AssignToIcon() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M7 7a2.5 2.5 0 10.001-4.999A2.5 2.5 0 007 7zm0 1c-1.335 0-4 .893-4 2.667v.666c0 .367.225.667.5.667h2.049c.904-.909 2.417-1.911 4.727-2.009v-.72a.27.27 0 01.007-.063C9.397 8.404 7.898 8 7 8zm4.427 2.028a.266.266 0 01.286.032l2.163 1.723a.271.271 0 01.013.412l-2.163 1.97a.27.27 0 01-.452-.2v-.956c-3.328.133-5.282 1.508-5.287 1.535a.27.27 0 01-.266.227h-.022a.27.27 0 01-.249-.271c0-.046 1.549-3.328 5.824-3.509v-.72a.27.27 0 01.153-.243z" />
</svg>
)
}
function AssignToMeIcon() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M7.00003 7C8.38128 7 9.50003 5.88125 9.50003 4.5C9.50003 3.11875 8.38128 2 7.00003 2C5.61878 2 4.50003 3.11875 4.50003 4.5C4.50003 5.88125 5.61878 7 7.00003 7Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.00005 8C5.66505 8 3.00006 8.89333 3.00006 10.6667V11.3333C3.00006 11.7 3.22506 12 3.50006 12H3.98973C4.01095 11.9415 4.04535 11.8873 4.09266 11.8425L7.21783 8.88444C7.28966 8.81658 7.38297 8.77917 7.4796 8.77949C7.69459 8.78018 7.86826 8.96356 7.86753 9.1891L7.86214 10.629C9.00553 10.5858 10.0366 10.4354 10.9441 10.231C10.5539 8.74706 8.22087 8 7.00005 8Z"
/>
<path d="M6.72511 14.718C6.80609 14.7834 6.91767 14.7955 7.01074 14.749C7.10407 14.7036 7.16321 14.6087 7.16295 14.5047L7.1605 13.7849C11.4352 13.5894 12.9723 10.3023 12.9722 10.2563C12.9722 10.1147 12.8634 9.9971 12.7225 9.98626L12.7009 9.98634C12.5685 9.98689 12.4561 10.0833 12.4351 10.2142C12.4303 10.2413 10.4816 11.623 7.15364 11.7666L7.1504 10.8116C7.14981 10.662 7.02829 10.5412 6.87896 10.5418C6.81184 10.5421 6.74721 10.5674 6.69765 10.6127L4.54129 12.5896C4.43117 12.6906 4.42367 12.862 4.52453 12.9723C4.53428 12.9829 4.54488 12.9928 4.55621 13.0018L6.72511 14.718Z" />
</svg>
)
}
function ChangeStatusIcon() {
return (
<svg width="16" height="16" viewBox="-1 -1 15 15" fill="currentColor">
<path d="M10.5714 7C10.5714 8.97245 8.97245 10.5714 7 10.5714L6.99975 3.42857C8.9722 3.42857 10.5714 5.02755 10.5714 7Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5ZM7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z"
/>
</svg>
)
}
function ChangePriorityIcon() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<rect x="1" y="8" width="3" height="6" rx="1"></rect>
<rect x="6" y="5" width="3" height="9" rx="1"></rect>
<rect x="11" y="2" width="3" height="12" rx="1"></rect>
</svg>
)
}
function ChangeLabelsIcon() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
/>
</svg>
)
}
function RemoveLabelIcon() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
/>
</svg>
)
}
function SetDueDateIcon() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M15 5C15 2.79086 13.2091 1 11 1H5C2.79086 1 1 2.79086 1 5V11C1 13.2091 2.79086 15 5 15H6.25C6.66421 15 7 14.6642 7 14.25C7 13.8358 6.66421 13.5 6.25 13.5H5C3.61929 13.5 2.5 12.3807 2.5 11V6H13.5V6.25C13.5 6.66421 13.8358 7 14.25 7C14.6642 7 15 6.66421 15 6.25V5ZM11.5001 8C11.9143 8 12.2501 8.33579 12.2501 8.75V10.75L14.2501 10.75C14.6643 10.75 15.0001 11.0858 15.0001 11.5C15.0001 11.9142 14.6643 12.25 14.2501 12.25L12.2501 12.25V14.25C12.2501 14.6642 11.9143 15 11.5001 15C11.0859 15 10.7501 14.6642 10.7501 14.25V12.25H8.75C8.33579 12.25 8 11.9142 8 11.5C8 11.0858 8.33579 10.75 8.75 10.75L10.7501 10.75V8.75C10.7501 8.33579 11.0859 8 11.5001 8Z"
/>
</svg>
)
}
.linear {
[cmdk-root] {
max-width: 640px;
width: 100%;
background: #ffffff;
border-radius: 8px;
overflow: hidden;
padding: 0;
font-family: var(--font-sans);
box-shadow: var(--cmdk-shadow);
outline: none;
.dark & {
background: linear-gradient(136.61deg, rgb(39, 40, 43) 13.72%, rgb(45, 46, 49) 74.3%);
}
}
[cmdk-linear-badge] {
height: 24px;
padding: 0 8px;
font-size: 12px;
color: var(--gray11);
background: var(--gray3);
border-radius: 4px;
width: fit-content;
display: flex;
align-items: center;
margin: 16px 16px 0;
}
[cmdk-linear-shortcuts] {
display: flex;
margin-left: auto;
gap: 8px;
kbd {
font-family: var(--font-sans);
font-size: 13px;
color: var(--gray11);
}
}
[cmdk-input] {
font-family: var(--font-sans);
border: none;
width: 100%;
font-size: 18px;
padding: 20px;
outline: none;
background: var(--bg);
color: var(--gray12);
border-bottom: 1px solid var(--gray6);
border-radius: 0;
caret-color: #6e5ed2;
margin: 0;
&::placeholder {
color: var(--gray9);
}
}
[cmdk-item] {
content-visibility: auto;
cursor: pointer;
height: 48px;
font-size: 14px;
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
color: var(--gray12);
user-select: none;
will-change: background, color;
transition: all 150ms ease;
transition-property: none;
position: relative;
&[data-selected='true'] {
background: var(--gray3);
svg {
color: var(--gray12);
}
&:after {
content: '';
position: absolute;
left: 0;
z-index: 123;
width: 3px;
height: 100%;
background: #5f6ad2;
}
}
&[data-disabled='true'] {
color: var(--gray8);
cursor: not-allowed;
}
&:active {
transition-property: background;
background: var(--gray4);
}
& + [cmdk-item] {
margin-top: 4px;
}
svg {
width: 16px;
height: 16px;
color: var(--gray10);
}
}
[cmdk-list] {
height: min(300px, var(--cmdk-list-height));
max-height: 400px;
overflow: auto;
overscroll-behavior: contain;
transition: 100ms ease;
transition-property: height;
}
[cmdk-group-heading] {
user-select: none;
font-size: 12px;
color: var(--gray11);
padding: 0 8px;
display: flex;
align-items: center;
}
[cmdk-empty] {
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
height: 64px;
white-space: pre-wrap;
color: var(--gray11);
}
}
Notable implementation details
Data-driven item list. All items are defined in a single
items array outside the component, each entry holding an icon, a label, and a shortcut array. The JSX simply maps over this array to produce Command.Item elements. This approach makes it trivial to add, remove, or reorder actions without touching the component tree.Left-border selection indicator. The selected state is styled with a CSS
::after pseudo-element — a 3 px wide, full-height bar in Linear’s signature purple (#5f6ad2) — pinned to the left edge of the item using position: absolute; left: 0. This is a purely CSS technique that requires no extra DOM nodes.Branded caret color. The input uses
caret-color: #6e5ed2 to tint the text cursor in Linear’s purple. This small detail ties the palette to the host app’s brand with a single CSS property and no JavaScript.The shortcut display is intentionally minimal — plain
<kbd> text with no background chip. If you want Vercel-style pill-shaped keys instead, add a background and border-radius to the kbd rule inside [cmdk-linear-shortcuts].