Code Line Selection
A free React code review component for selecting source lines in Next.js and Tailwind projects.
import { createWorkspace } from "@/lib/workspaces";export async function WorkspaceOverview() { const workspaces = await createWorkspace.list({ status: "active" }); return <WorkspaceGrid workspaces={workspaces} />;}Scroll horizontally to read long lines. Select the source text to copy it.
Customise
Code
const code = "import { createWorkspace } from \"@/lib/workspaces\";\n\nexport async function WorkspaceOverview() {\n const workspaces = await createWorkspace.list({ status: \"active\" });\n return <WorkspaceGrid workspaces={workspaces} />;\n}";
<ShowcaseCodeLineSelection
id="workspace-review"
label="Workspace overview source"
code={code}
defaultSelectedRange={{ start: 3, end: 4 }}
/>Code Line Selection is a free React code review component for Next.js and Tailwind. It displays caller-supplied source with stable line anchors and lets reviewers mark one inclusive range using a pointer or keyboard.
The code remains real selectable text in its original order, while line controls announce the selected state and preserve a single keyboard tab stop. The range is a visual review aid rather than an editor selection or comment system.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/showcase-code-line-selectionUsage
import { ShowcaseCodeLineSelection } from "@/components/showcase-code-line-selection";
const source = [
"export function WorkspaceOverview() {",
" return <WorkspaceGrid />;",
"}",
].join("\n");
export function ReviewNote() {
return (
<ShowcaseCodeLineSelection
id="workspace-overview"
label="Workspace overview source"
filename="app/workspaces/page.tsx"
language="TSX"
code={source}
defaultSelectedRange={{ start: 1, end: 2 }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | required | Stable unique ID used to form each source-line anchor. |
| label | string | required | Accessible name for the code and line-selection controls. |
| code | string | required | Caller-supplied source displayed verbatim with line breaks preserved. |
| filename | string | undefined | Optional filename displayed above the excerpt. |
| language | string | undefined | Optional language label displayed above the excerpt. |
| selectedRange | { start: number; end: number } | null | undefined | Controlled inclusive one-based line range; null clears selection. |
| defaultSelectedRange | { start: number; end: number } | null | null | Initial uncontrolled inclusive one-based line range. |
| onSelectedRangeChange | (range: { start: number; end: number } | null) => void | undefined | Called after a user changes the range. |
| className | string | undefined | Additional classes merged onto the component root. |
Customisation
The component uses semantic background, border, foreground, muted, primary and focus-ring tokens, so it adapts to the consuming theme without a component-specific variable contract. Use the root className to add a scoped surface treatment:
<ShowcaseCodeLineSelection
id="review"
label="Review excerpt"
code={source}
className="review-excerpt rounded-xl shadow-sm"
/>
.review-excerpt {
border-color: var(--ring);
background: var(--card);
}Frequently asked questions
- Is Code Line Selection free for commercial use?
- Yes. Code Line Selection is MIT licensed for personal and commercial use.
- Can I select a code range with a keyboard?
- Yes. Focus a line control and use ArrowUp or ArrowDown to move. Hold Shift with an arrow, Home or End to extend one contiguous range. Press Escape to clear the range. The source remains readable and selectable as ordinary text.
- Does it syntax-highlight or edit my code?
- No. It displays the source string supplied by your application and highlights the selected range. Your code text remains unchanged and copyable.