Elevator

Elevate you elements by adding shadows and deepness.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius dolores, tempore quas labore officiis praesentium. Porro sed dolorem, numquam temporibus.

View source

Anatomy

import { Elevator, Card } from "@lualtek/react-components";
 
export default () => {
  return (
    <Elevator resting={1} hover={4}>
      <Card>Lorem ipsum dolor sit.</Card>
    </Elevator>
  );
};

API Reference

export type ElevatorProps = {
  /**
   * Set the elevation of the component when is resting.
   */
  resting: 0 | 1 | 2 | 3 | 4;
 
  /**
   * Set the elevation of the component when is hovered.
   */
  hover?: 0 | 1 | 2 | 3 | 4;
 
  /**
   * Set the direction of shadow casting
   * @default 'bottom'
   */
  direction?: "top" | "bottom" | "left" | "right";
 
  /**
   * Set the color of the shadow
   * @default 'oklch(0% 0 0)'
   */
  shadowColor?: string;
 
  /**
   * Add extra shadow to the component.
   * Whis shadow is added to the elevation shadow.
   */
  extraShadow?: string;
};

Datetime Glow