Code

<Row flexWrap>
  <span>
    Use the 
    <Code>npm install</Code>
     command to install packages.
  </span>
  <span>
    The 
    <Code>const variable = 'value'</Code>
     syntax declares a constant.
  </span>
</Row>

<Col>
  <Row>
    <span>
      Size xs: 
      <Code xs>console.log('Hello')</Code>
    </span>
  </Row>
  <Row>
    <span>
      Size sm: 
      <Code sm>console.log('Hello')</Code>
    </span>
  </Row>
  <Row>
    <span>
      Size md: 
      <Code md>console.log('Hello')</Code>
    </span>
  </Row>
  <Row>
    <span>
      Size lg: 
      <Code lg>console.log('Hello')</Code>
    </span>
  </Row>
  <Row>
    <span>
      Size xl: 
      <Code xl>console.log('Hello')</Code>
    </span>
  </Row>
</Col>

<Row flexWrap>
  <Code default>default code</Code>
  <Code accent>accent code</Code>
  <Code primary>primary code</Code>
  <Code secondary>secondary code</Code>
  <Code tertiary>tertiary code</Code>
  <Code success>success code</Code>
  <Code danger>danger code</Code>
  <Code warning>warning code</Code>
  <Code info>info code</Code>
  <Code link>link code</Code>
</Row>

<Row flexWrap>
  <Code lg thin>font-thin</Code>
  <Code extralight lg>font-extralight</Code>
  <Code lg light>font-light</Code>
  <Code lg normal>font-normal</Code>
  <Code lg medium>font-medium</Code>
  <Code lg semibold>font-semibold</Code>
  <Code bold lg>font-bold</Code>
  <Code extrabold lg>font-extrabold</Code>
  <Code black lg>font-black</Code>
</Row>

<Col>
  <Text>
    To create a new React component, use 
    <Code>{`function Component() {}`}</Code>
     or the arrow function syntax 
    <Code>{`const Component = () => {}`}</Code>
    .
  </Text>
  <p>
    Install the package with 
    <Code primary>npm i @vaneui/ui</Code>
     and then import it using 
    <Code secondary>{`import { Button } from "@vaneui/ui"`}</Code>
    .
  </p>
  <Text>
    The 
    <Code info>useState</Code>
     hook returns an array with two elements: the current state value and a setter function like 
    <Code info>[state, setState]</Code>
    .
  </Text>
  <p>
    Configure your environment by setting 
    <Code warning>NODE_ENV='production'</Code>
     in your 
    <Code>.env</Code>
     file.
  </p>
</Col>

<Row flexWrap>
  <Text primary>
    <Code>Ctrl</Code>
    +
    <Code>C</Code>
  </Text>
  or
  <Text primary>
    <Code primary>Cmd</Code>
    +
    <Code primary>V</Code>
  </Text>
</Row>

<Col sm>
  <Row>
    File path: 
    <Code>/usr/local/bin/node</Code>
  </Row>
  <Row>
    Import path: 
    <Code secondary>@/components/Button</Code>
  </Row>
  <Row>
    URL: 
    <Code info>https://api.example.com/v1/users</Code>
  </Row>
  <Row>
    Config file: 
    <Code warning>tsconfig.json</Code>
  </Row>
</Col>