Fabrials UI

Loading state

app/layout.tsx

import "./globals.css";import { ThemeProvider } from "@fabrials/ui"; export default function RootLayout({ children }) {  return (    <html lang="en">    <html lang="en" suppressHydrationWarning>      <body>{children}</body>      <body>        <ThemeProvider>{children}</ThemeProvider>      </body>    </html>  );}

bunx --bun shadcn@latest add @fabrials/code-panel

Installation

Import the control from @fabrials/ui, after setting the app up.
TypeScript
```
import { CodePanel, highlightCode } from "@fabrials/ui";
```

API reference

Prop / export	Type	Description
`code`	`string`	The source. Copy puts exactly this on the clipboard (without removed lines).
`language`	`string`	ts, tsx, js, json, bash, css or html are highlighted; anything else is plain text.
`title`	`ReactNode`	Usually the file path; the icon follows the language.
`lineNumbers / highlightLines`	`boolean / number[]`	Numbers in the gutter; 1-based lines drawn with a Stormlight edge.
`addedLines / removedLines`	`number[]`	Diff marks; removed lines are left out of Copy.
`highlightWords`	`string[]`	Boxes each occurrence, to point at a name.
`children`	`ReactNode`	Pre-highlighted lines (from Shiki, for instance) instead of the built-in highlighter.
`bare`	`boolean`	No bar; the copy button floats. For one-line snippets.

Behavior

The highlighter is pure and server-safe. Copy results are announced; when the clipboard refuses, the panel says how to copy by hand.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.