Fabrials UI

Loading state

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

Installation

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

API reference

Prop / export	Type	Description
`items`	`CodeTab[]`	value, label and every CodePanel option except title.
`defaultValue / value / onValueChange`	`string`	Uncontrolled or controlled.
`label`	`string`	Accessible name of the tab list.

Behavior

Tabs follow the Tabs keyboard model. Copy takes the open tab.

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.