# Code Snippet components

> Display code beautifully with 15 snippet components for React, perfect for documentation and developer-focused Next.js sites.

39 components available. Showing all of them below.

- [Snippet](https://21st.dev/@shugar/components/snippet-1/callback.md) — by tigran tumasov
- [Snippet](https://21st.dev/@shugar/components/snippet-1/inverted.md) — by tigran tumasov
- [Snippet](https://21st.dev/@shugar/components/snippet-1.md) — by tigran tumasov
- [Snippet](https://21st.dev/@shugar/components/snippet-1/variants.md) — by tigran tumasov
- [Snippet](https://21st.dev/@shugar/components/snippet-1/multi-line.md) — by tigran tumasov
- [Snippet](https://21st.dev/@shugar/components/snippet-1/no-prompt.md) — by tigran tumasov
- [Snippet](https://21st.dev/@shugar/components/snippet-1/custom-width.md) — by tigran tumasov
- [Snippet](https://21st.dev/@shugar/components/snippet.md) — by tigran tumasov
- [Snippet](https://21st.dev/@haydenbleasel/components/snippet.md) — by Hayden Bleasel
- [Code Snippet](https://21st.dev/@beratberkayg/components/code-snippet.md) — by beratberkay
- [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
- [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/c-20-custom-theme.md) — by deltacomponents
- [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
- [Code Leaf](https://21st.dev/@platejs/components/code-node.md) — by Plate
- [Claude Style AI Input](https://21st.dev/@suraj-xd/components/claude-style-ai-input.md) — by Suraj Gaud
- [Code Block](https://21st.dev/@ibelick/components/code-block/with-header.md) — by Julien Thibeaut
- [Code Block](https://21st.dev/@ibelick/components/code-block.md) — by Julien Thibeaut
- [Copy Code Button](https://21st.dev/@minhxthanh/components/copy-code-button.md) — by Le Thanh
- [Code block](https://21st.dev/@manuarora700/components/code-block.md) — by Manu Arora
- [Section Component](https://21st.dev/@minhxthanh/components/section-component.md) — by Le Thanh
- [useCopyToClipboard](https://21st.dev/@strlrd-29/components/use-copy-to-clipboard.md) — by Ghribi Ouassim
- [useMouseVector](https://21st.dev/@danielpetho/components/use-mouse-vector.md) — by Daniel Petho
- [Simple Code Block](https://21st.dev/@maxim.bort.devel/components/simple-code-block.md) — by Maxim Bortnikov
- [Steps](https://21st.dev/@reuno-ui/components/steps.md) — by reuno-ui
- [Script Copy Button](https://21st.dev/@dillionverma/components/script-copy-button.md) — by Dillion Verma
- [Input Group](https://21st.dev/@shadcn/components/input-group/textarea.md) — by shadcn
- [Copy to clipboard](https://21st.dev/@lukacho/components/copy-to-clipboard.md) — by lukacho/ui
- [Package Installer Tabs](https://21st.dev/@ruixen.ui/components/package-installer-tabs.md) — by Ruixen UI
- [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
- [call to action](https://21st.dev/@mokshithcodez/components/call-to-action.md) — by Mokshith_Codez
- [Chromatic Lens](https://21st.dev/@16inam06/components/chromatic-lens.md) — by Inamandla Mchunu
- [Code Block](https://21st.dev/@shugar/components/code-block-old.md) — by tigran tumasov

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