# Code components

> Display code snippets with clarity using 9 code components for React, all styled with Tailwind CSS for developer-focused UIs.

40 components available. Showing all of them below.

- [Code](https://21st.dev/@sean0205/components/code/copy-button.md) — by Sean Hello
- [Code](https://21st.dev/@sean0205/components/code.md) — by Sean Hello
- [Code](https://21st.dev/@sean0205/components/code/size.md) — by Sean Hello
- [Code](https://21st.dev/@sean0205/components/code/variants.md) — by Sean Hello
- [File Tree](https://21st.dev/@jatin-yadav05/components/file-tree.md) — by Jatin Yadav
- [Compare](https://21st.dev/@manuarora700/components/compare.md) — by Manu Arora
- [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
- [Interactive Scrolling Story Component](https://21st.dev/@minhxthanh/components/interactive-scrolling-story-component.md) — by Le Thanh
- [File Tree](https://21st.dev/@dillionverma/components/file-tree.md) — by Dillion Verma
- [Code Editor Sheet](https://21st.dev/@bankkroll/components/code-editor-sheet.md) — by Bankk
- [Code block](https://21st.dev/@manuarora700/components/code-block.md) — by Manu Arora
- [Edit Tool](https://21st.dev/@serafimcloud/components/edit-tool.md) — by Serafim
- [Type Table](https://21st.dev/@fuma-nama/components/type-table.md) — by Fuma Nama
- [Mouse-Responsive Background](https://21st.dev/@minhxthanh/components/mouse-responsive-background.md) — by Le Thanh
- [Edit Tool](https://21st.dev/@serafimcloud/components/edit-tool/approval-footer.md) — by Serafim
- [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
- [Github Inline Diff](https://21st.dev/@jatin-yadav05/components/github-inline-diff.md) — by Jatin Yadav
- [Flexnative Tabs](https://21st.dev/@felipemenezes098/components/flexnative-tabs/preview-and-code.md) — by felipemenezes098
- [Simple Code Block](https://21st.dev/@maxim.bort.devel/components/simple-code-block.md) — by Maxim Bortnikov
- [File Tree](https://21st.dev/@justinlevinedotme/components/file-tree.md) — by Justin Levine
- [Tabs](https://21st.dev/@fuma-nama/components/tabs.md) — by Fuma Nama
- [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3.md) — by deltacomponents
- [Code Snippets 3](https://21st.dev/@deltacomponents/components/code-snippets-3/adaptive-dark-n-light-mode.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
- [Scramble Text](https://21st.dev/@dqnamo/components/scramble-text.md) — by dqnamo
- [Code Editor](https://21st.dev/@lovesickfromthe6ix/components/code-editor.md) — by scott clayton
- [Animated File Tree Primitives](https://21st.dev/@unlumen/components/primitives-animate-files.md) — by Unlumen UI
- [Install Package](https://21st.dev/@samsiavoshian2009/components/install-package.md) — by Sam siavoshian
- [Terminal Card](https://21st.dev/@cnippet.dev/components/terminal-card.md) — by Cnippet
- [JSON Config Viewer](https://21st.dev/@samsiavoshian2009/components/json-config-viewer.md) — by Sam siavoshian
- [DevTool Landing Page](https://21st.dev/@mokshithcodez/components/dev-tool-landing-page.md) — by Mokshith_Codez
- [Color Generator](https://21st.dev/@designali-in/components/color-generator/color-generator.md) — by Ali Imam
- [Collapsible](https://21st.dev/@cnippet.dev/components/cnippet-collapsible/pipeline.md) — by Cnippet
- [Tree Code Viewer](https://21st.dev/@uilayout.contact/components/tree-code-viewer.md) — by UI Layouts
- [Inline Code Typography](https://21st.dev/@uiable/components/uiable-typography-inline-code.md) — by uiable
- [Message Circle Code Icon](https://21st.dev/@skyleen77/components/icons-message-circle-code.md) — by Elliot Sutton

Full component directory: https://21st.dev/llms.txt