# Code

Formatted code with line numbers and copying.

## How to use it

Set language for highlighting and filename to give the snippet context. Content must be a string.



## Import


```tsx
import { Code } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Code language="tsx" filename="example.tsx" copyable showLineNumbers>{`<Button>Hola, Kivora</Button>`}</Code>
```


## API: Code


```typescript
Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | string | Yes | Content or child elements of the component. |
| aria-label | string | No | Accessible name of the control. |
| className | string | No | Additional CSS classes to customize the element. |
| copyable | boolean | No | Show the copy action. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| filename | string | No | Filename displayed in the header. |
| id | string | No | Element identifier; associates labels and descriptions. |
| inline | boolean | No | Display content inline. |
| language | string | No | Language used for code highlighting. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| showLineNumbers | boolean | No | Show line numbers. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| theme | "light" \| "dark" | No | Component theme or theme identifier, depending on the API. |
| title | string | No | Title or supplementary information. |
| wrapLongLines | boolean | No | Allow long lines to wrap. |

Source: https://kivora.pro/docs/componentes/code