Compositions
Core Primitives
Transitions
Typography
Customize
30
16
1
720
Installation
$ pnpm dlx shadcn@latest add @framecn/code-accordion
Usage
import { CodeAccordion } from "@/components/framecn/code-accordion";<CodeAccordion />API Reference
CodeAccordion
| Prop | Type | Default |
|---|---|---|
lines | string[] | DEFAULT_LINES |
collapseRange | [number, number] | [3, 14] |
collapseAt | number | 30 |
title | string | "process-orders.ts" |
fontSize | number | 16 |
width | number | 720 |
background | string | "#050505" |
cardColor | string | "#0a0a0a" |
textColor | string | "#e4e4e7" |
mutedColor | string | "#52525b" |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 150 |
height | number | 720 |
className | string | - |
Notes
Collapsible code region
Long code blocks collapse in the middle with a line count badge. Click to expand and see the full code.