Terminal

The Terminal component is used to display terminal commands. User could copy the commands by clicking inside window area.

>npx nuxi init my-awesome-nuxt-app>yarn install

Click to copy

Props

Prop	Type	Default	Description
`content`	`[Array, String]`	`undefined`	One or multiple terminal commands. The prop is `required`

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
   docux: {
      landing: {
         terminal: {
            maxWidth: '{space.128}',
            height: '{space.64}',
            borderWidth: '0px',
            borderStyle: 'solid',
            borderColor: '{elements.border.primary.static}',
            borderRadius: '{radii.xs}',
            backgroundColor: {
               initial: 'rgba({temp.color.gray.200}, 0.7)',
               dark: 'rgba({temp.color.gray.900}, 0.7)'
            },
            boxShadow: 'inset 0px 0px 0px 1px rgba({temp.color.gray.600}, 0.3), {shadow.2xl}',
            backdropFilter: 'blur(3px)',
            header: {
               borderBottomWidth: '0px',
               borderBottomStyle: 'solid',
               borderBottomColor: '{elements.border.primary.static}',
               height: '{space.12}',
               boxShadow: 'inset 0px -1px 0px 0px rgba({temp.color.gray.600}, 0.3)'
            },
            window: {
               fontFamily: '{font.mono}',
               fontSize: '{text.sm.fontSize}',
               mixBlendMode: {
                  initial: 'normal',
                  dark: 'difference'
               },
               sign: {
                  color: {
                     initial: '{color.gray.500}',
                     dark: '{color.gray.700}'
                  }
               }
            },
            copied: {
               color: {
                  initial: '{color.gray.900}',
                  dark: '{color.gray.100}'
               }
            }
         }
      }
   }
})

Edit this page on GitHub

LandingHeroThe Hero component is a versatile and visually appealing element designed for the landing page. It serves as the first screen that captures users' attention and introduces them to the key features and messaging of the product. The component incorporates a title, description, announce, call-to-action buttons, some extra content slot and a flexible area for visual content, such as images, videos, or animations (or Terminal in case of Docux website).LandingCardThe Card component used to display content related to a single subject in a visually engaging and organized manner.