# Code Block components > Choose from 9 code block components for React and Next.js, making it easy to present syntax-highlighted code in your apps. 56 components available. Showing all of them below. - [Code Block](https://21st.dev/@ibelick/components/code-block/different-themes.md) — by Julien Thibeaut - [Code Block](https://21st.dev/@ibelick/components/code-block.md) — by Julien Thibeaut - [Code block](https://21st.dev/@manuarora700/components/code-block.md) — by Manu Arora - [Code block](https://21st.dev/@ayushmxxn_c278bc2d/components/code-block.md) — by Ayushmaan Singh - [CodeBlock](https://21st.dev/@popov-dmitry/components/code-block.md) — by Popov Dmitry - [Code Block](https://21st.dev/@vercel-crawled/components/code-block.md) — by Vercel - [Stack Overflow Q&A Interface](https://21st.dev/@vaib215/components/stack-overflow-q-a-interface.md) — by Vaibhav Kumar Singh - [Simple Code Block](https://21st.dev/@maxim.bort.devel/components/simple-code-block.md) — by Maxim Bortnikov - [Package Installer Tabs](https://21st.dev/@ruixen.ui/components/package-installer-tabs.md) — by Ruixen UI - [Install Package](https://21st.dev/@samsiavoshian2009/components/install-package.md) — by Sam siavoshian - [JSON Config Viewer](https://21st.dev/@samsiavoshian2009/components/json-config-viewer.md) — by Sam siavoshian - [Code Block](https://21st.dev/@skyleen77/components/primitives-animate-code-block.md) — by Elliot Sutton - [Compare](https://21st.dev/@manuarora700/components/compare.md) — by Manu Arora - [File Viewer](https://21st.dev/@bankkroll/components/file-viewer.md) — by Bankk - [Disclosure](https://21st.dev/@ibelick/components/disclosure.md) — by Julien Thibeaut - [Image Crop](https://21st.dev/@originui/components/image-crop/image-cropper-8.md) — by Origin UI - [Terminal Control Section Animated](https://21st.dev/@minhxthanh/components/terminal-control-section-animated.md) — by Le Thanh - [Edit Tool](https://21st.dev/@serafimcloud/components/edit-tool.md) — by Serafim - [Section Component](https://21st.dev/@minhxthanh/components/section-component.md) — by Le Thanh - [Edit Tool](https://21st.dev/@serafimcloud/components/edit-tool/waiting.md) — by Serafim - [Edit Tool](https://21st.dev/@serafimcloud/components/edit-tool/approval-footer.md) — by Serafim - [Edit Tool](https://21st.dev/@serafimcloud/components/edit-tool/write-tool.md) — by Serafim - [Sandbox](https://21st.dev/@haydenbleasel/components/sandbox.md) — by Hayden Bleasel - [Markdown](https://21st.dev/@serafimcloud/components/markdown/streaming.md) — by Serafim - [Github Inline Diff](https://21st.dev/@jatin-yadav05/components/github-inline-diff.md) — by Jatin Yadav - [Markdown](https://21st.dev/@serafimcloud/components/markdown.md) — by Serafim - [MCP Tool](https://21st.dev/@serafimcloud/components/mcp-tool.md) — by Serafim - [Flexnative Tabs](https://21st.dev/@felipemenezes098/components/flexnative-tabs/preview-and-code.md) — by felipemenezes098 - [Steps](https://21st.dev/@reuno-ui/components/steps.md) — by reuno-ui - [Snippet](https://21st.dev/@haydenbleasel/components/snippet.md) — by Hayden Bleasel - [Bash Tool](https://21st.dev/@serafimcloud/components/bash-tool.md) — by Serafim - [Code Snippet](https://21st.dev/@beratberkayg/components/code-snippet.md) — by beratberkay - [Features Card](https://21st.dev/@mokshithcodez/components/features-card.md) — by Mokshith_Codez - [useToggle](https://21st.dev/@strlrd-29/components/use-toggle.md) — by Ghribi Ouassim - [8-bit Demo Shell](https://21st.dev/@theorcdev/components/8bit-advanced1.md) — by OrcDev - [useDebounceCallback](https://21st.dev/@strlrd-29/components/use-debounce-callback.md) — by Ghribi Ouassim - [Code Snippet](https://21st.dev/@beratberkayg/components/code-snippet/copy-button.md) — by beratberkay - [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3.md) — by deltacomponents - [Copy to clipboard](https://21st.dev/@lukacho/components/copy-to-clipboard.md) — by lukacho/ui - [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3/adaptive-dark-n-light-mode.md) — by deltacomponents - [Bash Tool](https://21st.dev/@serafimcloud/components/bash-tool/approval-footer.md) — by Serafim - [featuresgrid](https://21st.dev/@mokshithcodez/components/featuresgrid.md) — by Mokshith_Codez - [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3/c-20-custom-theme.md) — by deltacomponents - [Response](https://21st.dev/@ElevenLabs-crawled/components/response.md) — by ElevenLabs - [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3/tabbed-code-snippets.md) — by deltacomponents - [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3/theme-customization.md) — by deltacomponents - [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3/display-options.md) — by deltacomponents - [Bash Tool](https://21st.dev/@serafimcloud/components/bash-tool/running-state.md) — by Serafim - [Error](https://21st.dev/@ravikatiyar162/components/error.md) — by Ravi Katiyar - [AI Prompt Diff](https://21st.dev/@elements-/components/prompt-diff.md) — by Cameron Kelliher - [DevTool Landing Page](https://21st.dev/@mokshithcodez/components/dev-tool-landing-page.md) — by Mokshith_Codez - [AI Message Bubble](https://21st.dev/@elements-/components/message-bubble.md) — by Cameron Kelliher - [Toggle Group](https://21st.dev/@cnippet.dev/components/cnippet-toggle-group/code-language.md) — by Cnippet - [CLI Spinner Loader](https://21st.dev/@elements-/components/loader-cli-spinner.md) — by Cameron Kelliher - [Tree Code Viewer](https://21st.dev/@uilayout.contact/components/tree-code-viewer.md) — by UI Layouts - [Error Boundary UI](https://21st.dev/@elements-/components/error-boundary-ui.md) — by Cameron Kelliher Full component directory: https://21st.dev/llms.txt