ShiftBy


No matter how impressive your design system is, there will always be times that small layout adjustments are required. This handy component lets you shift things around in small increments.

It's used like this:

<ShiftBy x={-3}>
  <Heading>Slightly Misaligned Heading</Heading>
</ShiftBy>

Usage

import type { ReactNode } from 'react'

interface ShiftByProps {
   x?: number
   y?: number
   children: ReactNode
}

export function ShiftBy({ x = 0, y = 0, children }: ShiftByProps) {
   return (
      <div
         style={{
            transform: `translate(${x}px, ${y}px)`,
         }}
      >
         {children}
      </div>
   )
}

Component

import type { ReactNode } from 'react'

interface ShiftByProps {
   x?: number
   y?: number
   children: ReactNode
}

export function ShiftBy({ x = 0, y = 0, children }: ShiftByProps) {
   return (
      <div
         style={{
            transform: `translate(${x}px, ${y}px)`,
         }}
      >
         {children}
      </div>
   )
}