Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Codeblock overview

Codeblock gives you a ready-made wrapper for rendered source with copy actions, line numbers, focused ranges, wrapping, and highlighting metadata.

Imports

Component import

ts
import { TngCodeBlockComponent } from '@tailng-ui/components';

Style variants

Use the wrapper inside a plain CSS shell or a utility-authored Tailwind surface.

Plain CSS codeblock

app.config.ts

ts
const config = {
  mode: 'preview',
  retries: 2,
};

export function buildLabel(name: string): string {
  return `${name}:${config.mode}`;
}

Default wrapper shell

Accessibility baseline

  • Use a meaningful title or caption when the snippet stands alone.
  • Keep copy labels explicit with copyLabel, copiedLabel, and errorLabel.
  • Use highlightLines and focusLines sparingly so emphasis stays readable.