---
title: "CodeCollapse"
description: "Make long code blocks collapsible to save space and improve readability."
canonical_url: "https://ui.nuxt.com/docs/typography/code-collapse"
last_updated: "2026-05-07"
---
# CodeCollapse

> Make long code blocks collapsible to save space and improve readability.

## Usage

Wrap your code-block with a `code-collapse` component to display a collapsible code block.

```vue
<template>
  <__flatten>
  <pre className=language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=@import "tailwindcss";
  @import "@nuxt/ui";
  
  @theme static {
    --font-sans: 'Public Sans', sans-serif;
  
    --breakpoint-3xl: 1920px;
  
    --color-green-50: #EFFDF5;
    --color-green-100: #D9FBE8;
    --color-green-200: #B3F5D1;
    --color-green-300: #75EDAE;
    --color-green-400: #00DC82;
    --color-green-500: #00C16A;
    --color-green-600: #00A155;
    --color-green-700: #007F45;
    --color-green-800: #016538;
    --color-green-900: #0A5331;
    --color-green-950: #052E16;
  }
   filename=app/assets/css/main.css language=css meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=s7zQu>
  @import</span>
  <span class=sMK4o>
   "</span>
  <span class=sfazB>
  tailwindcss</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ;
  </span></span>
  <span class=line>
  <span class=s7zQu>
  @import</span>
  <span class=sMK4o>
   "</span>
  <span class=sfazB>
  @nuxt/ui</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ;
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=s7zQu>
  @theme</span>
  <span class=sTEyZ>
   static </span>
  <span class=sMK4o>
  {
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --font-sans: 'Public Sans'</span>
  <span class=sMK4o>
  ,</span>
  <span class=sBMFI>
   sans-serif</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sTEyZ>
    --breakpoint-3xl: 1920px;
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-50: </span>
  <span class=s7r4c>
  #EFFDF5</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-100: </span>
  <span class=s_yAY>
  #D9FBE8</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-200: </span>
  <span class=svDi6>
  #B3F5D1</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-300: </span>
  <span class=sX0M8>
  #75EDAE</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-400: </span>
  <span class=sMfEM>
  #00DC82</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-500: </span>
  <span class=sLUHb>
  #00C16A</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-600: </span>
  <span class=sm-p6>
  #00A155</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-700: </span>
  <span class=sNqnt>
  #007F45</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-800: </span>
  <span class=s74mv>
  #016538</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-900: </span>
  <span class=sWbUt>
  #0A5331</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-950: </span>
  <span class=sB4BK>
  #052E16</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  }
  </span></span></code></pre></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::code-collapse
  
  ```css [app/assets/css/main.css]
  @import "tailwindcss";
  @import "@nuxt/ui";
  
  @theme static {
    --font-sans: 'Public Sans', sans-serif;
  
    --breakpoint-3xl: 1920px;
  
    --color-green-50: #EFFDF5;
    --color-green-100: #D9FBE8;
    --color-green-200: #B3F5D1;
    --color-green-300: #75EDAE;
    --color-green-400: #00DC82;
    --color-green-500: #00C16A;
    --color-green-600: #00A155;
    --color-green-700: #007F45;
    --color-green-800: #016538;
    --color-green-900: #0A5331;
    --color-green-950: #052E16;
  }
  ```
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  code-collapse
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  css [app/assets/css/main.css]
  </span></span>
  <span class=line>
  <span class=s7zQu>
  @import</span>
  <span class=sMK4o>
   "</span>
  <span class=sfazB>
  tailwindcss</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ;
  </span></span>
  <span class=line>
  <span class=s7zQu>
  @import</span>
  <span class=sMK4o>
   "</span>
  <span class=sfazB>
  @nuxt/ui</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ;
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=s7zQu>
  @theme</span>
  <span class=sTEyZ>
   static </span>
  <span class=sMK4o>
  {
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --font-sans: 'Public Sans'</span>
  <span class=sMK4o>
  ,</span>
  <span class=swJcz>
   sans-serif</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sTEyZ>
    --breakpoint-3xl: 1920px;
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-50: </span>
  <span class=s7r4c>
  #EFFDF5</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-100: </span>
  <span class=s_yAY>
  #D9FBE8</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-200: </span>
  <span class=svDi6>
  #B3F5D1</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-300: </span>
  <span class=sX0M8>
  #75EDAE</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-400: </span>
  <span class=sMfEM>
  #00DC82</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-500: </span>
  <span class=sLUHb>
  #00C16A</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-600: </span>
  <span class=sm-p6>
  #00A155</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-700: </span>
  <span class=sNqnt>
  #007F45</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-800: </span>
  <span class=s74mv>
  #016538</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-900: </span>
  <span class=sWbUt>
  #0A5331</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
    --color-green-950: </span>
  <span class=sB4BK>
  #052E16</span>
  <span class=sTEyZ>
  ;
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  }
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseCodeCollapse component
 */
interface ProseCodeCollapseProps {
  /**
   * The icon displayed to toggle the code.
   */
  icon?: any;
  /**
   * The name displayed in the trigger label.
   */
  name?: string | undefined;
  /**
   * The text displayed when the code is collapsed.
   */
  openText?: string | undefined;
  /**
   * The text displayed when the code is expanded.
   */
  closeText?: string | undefined;
  ui?: { root?: ClassNameValue; footer?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; } | undefined;
  /**
   * @default "false"
   */
  open?: boolean | undefined;
}
```

### Slots

```ts
/**
 * Slots for the CodeCollapse component
 */
interface CodeCollapseSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      codeCollapse: {
        slots: {
          root: 'relative [&_pre]:h-[200px] bg-muted',
          footer: 'h-16 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center',
          trigger: 'group',
          triggerIcon: 'group-data-[state=open]:rotate-180'
        },
        variants: {
          open: {
            true: {
              root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'
            },
            false: {
              root: '[&_pre]:overflow-hidden',
              footer: 'bg-linear-to-t from-muted'
            }
          }
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/CodeCollapse.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/code-collapse.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.