Code block

A dark code panel with copy-to-clipboard.

npm install ng-blatui

import { BuiCodeBlock } from 'ng-blatui';

<bui-code-block [code]="'npm install ng-blatui'" />

With filename

hello.ts

const greet = (name: string) => `Hello, ${name}!`;

<bui-code-block filename="hello.ts" [code]="'const x = 1;'" />

Tabs

npm

pnpm

yarn

<!-- compose tabs with a code block per panel -->
<div ngTabs buiTabs>
  <div ngTabList buiTabList selectedTab="npm">
    <div ngTab value="npm" buiTabTrigger>npm</div>
    <div ngTab value="pnpm" buiTabTrigger>pnpm</div>
  </div>
  <div ngTabPanel value="npm" buiTabPanel>
    <ng-template ngTabContent><bui-code-block [code]="'npm install ng-blatui'" /></ng-template>
  </div>
</div>

API reference

Inputs

Prop	Type	Default	Description
`code`	`string`	`''`	Source code shown in the panel and copied to the clipboard.
`filename`	`string \| null`	`null`	Optional filename shown in the header; omit for the floating copy button.
`copyLabel`	`string`	—	Accessible label for the copy button.
`copyShortLabel`	`string`	—	Short visible text for the copy button.
`copiedLabel`	`string`	—	Text shown briefly after the code is copied.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.