All components
Code Window
LayoutA macOS-style window frame around a code block.
main.dart
void main() {
runApp(const App());
}Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/code-window.jsonOr install manually
1. Install dependencies
pnpm add clsx tailwind-merge2. Copy the component source into
components/library/code-window.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "index.ts" | Filename shown in the title bar. |
| children | ReactNode | - | Code to display. |
Accessibility
- Uses a real <pre>, so whitespace and copy behaviour are preserved.
- Traffic lights are decorative and carry no meaning.
- Overflows horizontally rather than wrapping code lines.
Dependencies
clsxtailwind-merge