Usage

import { Code } from '@pillar-ui/core'

<Code />

Examples

Corner

Default

2

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')

import { Code } from '@pillar-ui/core'

export const CodeCorner = () => {
  return (
    <>
      <Code corner="0">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="1">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="2">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="3">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="4">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="circle">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="full">{`console.log('Hello world Every thing is OK')`}</Code>
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')

import { Code } from '@pillar-ui/core'

export const CodeColor = () => {
  return (
    <>
      <Code color="d">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="su">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="w">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="p">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="b">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="se">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="i">{`console.log('Hello world Every thing is OK')`}</Code>
    </>
  )
}

Variant

Default

soft

Type

'shadow' |'solid' | 'mixed' | 'outline' | 'soft'

console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')

import { Code } from '@pillar-ui/core'

export const CodeVariant = () => {
  return (
    <>
      <Code variant="shadow">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code variant="solid">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code variant="mixed">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code variant="soft">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code variant="outline">{`console.log('Hello world Every thing is OK')`}</Code>
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')

import { Code } from '@pillar-ui/core'

export const CodeSize = () => {
  return (
    <>
      <Code size="1">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="2">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="3">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="4">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="5">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="6">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="7">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="8">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="9">{`console.log('Hello world Every thing is OK')`}</Code>
    </>
  )
}

Transform

Default

-

Type

'capitalize' | 'capitalize-once' | 'lowercase' | 'uppercase'

css cascadecss cascadecss cascadecss cascadecss cascade

import { Code } from '@pillar-ui/core'

export const CodeTransform = () => {
  return (
    <>
      <Code>css cascade</Code>
      <Code transform="capitalize">css cascade</Code>
      <Code transform="capitalize-once">css cascade</Code>
      <Code transform="lowercase">css cascade</Code>
      <Code transform="uppercase">css cascade</Code>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Code */
--code-rad:;
/* Change the default size of the Code */
--code-size:;