npm install @nextui-org/react npm install @nextui-org/react npm install @nextui-org/react

); } `;var E={"/App.jsx":h},b={...E};var y=`import {Code} from "@nextui-org/react"; export default function App() { return (

npm install @nextui-org/react npm install @nextui-org/react npm install @nextui-org/react npm install @nextui-org/react npm install @nextui-org/react npm install @nextui-org/react

); } `;var R={"/App.jsx":y},A={...R};var s={usage:g,sizes:b,colors:A};var U={title:"Code",description:"Code is a component used to display inline code. "};function z(t){let e={h1:"h1",h2:"h2",h3:"h3",hr:"hr",p:"p",...t.components},{APITable:n,CarbonAd:d,CodeDemo:r,ComponentLinks:c,ImportTabs:l,PackageManagers:p,Spacer:m}=e;return n||i("APITable",!0),d||i("CarbonAd",!0),r||i("CodeDemo",!0),c||i("ComponentLinks",!0),l||i("ImportTabs",!0),p||i("PackageManagers",!0),m||i("Spacer",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{id:"code",children:"Code"}),` `,(0,o.jsx)(e.p,{children:"Code is a component used to display inline code."}),` `,(0,o.jsx)(c,{component:"code",rscCompatible:!0}),` `,(0,o.jsx)(e.hr,{}),` `,(0,o.jsx)(d,{}),` `,(0,o.jsx)(e.h2,{id:"installation",children:"Installation"}),` `,(0,o.jsx)(p,{showGlobalInstallWarning:!0,commands:{cli:"npx nextui-cli@latest add code",npm:"npm install @nextui-org/code",yarn:"yarn add @nextui-org/code",pnpm:"pnpm add @nextui-org/code",bun:"bun add @nextui-org/code"}}),` `,(0,o.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,o.jsx)(l,{commands:{main:'import {Code} from "@nextui-org/react";',individual:'import {Code} from "@nextui-org/code";'}}),` `,(0,o.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,o.jsx)(r,{title:"Usage",files:s.usage}),` `,(0,o.jsx)(e.h3,{id:"sizes",children:"Sizes"}),` `,(0,o.jsx)(r,{title:"Sizes",files:s.sizes}),` `,(0,o.jsx)(e.h3,{id:"colors",children:"Colors"}),` `,(0,o.jsx)(r,{title:"Colors",files:s.colors}),` `,(0,o.jsx)(m,{y:4}),` `,(0,o.jsx)(e.h2,{id:"api",children:"API"}),` `,(0,o.jsx)(e.h3,{id:"code-props",children:"Code Props"}),` `,(0,o.jsx)(n,{data:[{attribute:"children",type:"ReactNode",description:"The content of the code.",default:"-"},{attribute:"size",type:"sm | md | lg",description:"The size of the code.",default:"sm"},{attribute:"color",type:"default | primary | secondary | success | warning | danger",description:"The color of the code.",default:"default"},{attribute:"radius",type:"none | sm | md | lg | full",description:"The radius of the code.",default:"sm"}]})]})}function j(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(z,{...t})}):z(t)}function i(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(X);})(); ;return Component;

屬性	類型	預設值
`children`	`ReactNode`
`size`	`sm \| md \| lg`	`"sm"`
`color`	`default \| primary \| secondary \| success \| warning \| danger`	`"default"`
`radius`	`none \| sm \| md \| lg \| full`	`"sm"`

程式碼

安裝

導入

用法

尺寸

顏色

API

程式碼屬性