Code components

Code Snippet

A code snippet component with a copy to clipboard button.

Variants list

Code Card

A code card component with a copy to clipboard button.

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

Variants list

Edit on Github

Inline Code

A code snippet component with a copy to clipboard button.

This is an example of a code found on cuicui.day which you can simply copy component and paste it in your project.

Variants list

Edit on Github

Advanced Code Block

A code snippet component with a copy to clipboard button.

Inspired by Clerk

./explanations.ts

export const = explanations = {
  main : "This component needs more than the default code block to be displayed"
  detailed : "For now, if you want the exact same behaviour, please check the github"
}

Variants list