saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Code Block

Code Block

A styled code block with syntax highlighting, line numbers, filename display, and copy functionality.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/code-block.json

Usage

import { CodeBlock } from "@/components/ui/code-block"
<CodeBlock
  code={`const greeting = "Hello, world!"`}
  language="typescript"
  filename="example.ts"
  showLineNumbers
/>

API Reference

CodeBlock

PropTypeDefaultDescription
codestring—The code string to display.
languagestring—The programming language for syntax highlighting.
filenamestring—Optional filename shown in the header.
showLineNumbersbooleanfalseWhether to display line numbers.
highlightLinesnumber[]—Array of line numbers to highlight.
variant"default" | "ghost""default"Visual style variant.
classNamestring—Additional CSS classes.
PreviousCircular ProgressNextCollapsible

On This Page

  • Installation
  • Usage
  • API Reference
  • CodeBlock
app.tsx
1400">"text-purple-400">import { Button } 400">"text-purple-400">from 400">"@/components/ui/button"
2 
3400">"text-purple-400">export 400">"text-purple-400">function App() {
4  400">"text-purple-400">return (
5    400"> variant=400">"outline">
6      Click me
7    400">>
8  )
9}