Panel

Wrapper panel for content with vibrancy and border.

My favouritesLorem ipsum dolor sit, amet consectetur adipisicing elit. Cum tempora magni quaerat libero recusandae itaque quod. Unde a, ratione quas nihil, at sapiente ducimus fugit ex quasi minus corporis commodi.

View source

Anatomy

import { Panel } from "@lualtek/react-components";
 
export default () => {
  return (
    <Panel bordered vibrancy="strong" vibrancyColor="mid">
      ...
    </Panel>
  );
};

API Reference

export type PanelProps = {
  /**
   * Enable or disable the vibrant effect. Add translucent and blurred background.
   *
   * @defaultValue false
   */
  vibrant?: boolean;
 
  /**
   * Set the vibrancy level of the panel.
   *
   * @defayltValue "strong"
   */
  vibrancyLevel?: "strong" | "soft";
 
  /**
   * Change the background color of the card.
   */
  vibrancyColor?: "soft" | "background" | "mid" | "hard";
 
  /**
   * Change the saturation of the elements behind the vibrancy effect.
   *
   * @defaultValue "standard"
   */
  vibrancySaturation?: "standard" | "high";
 
  /**
   * Show a border around the panel.
   */
  bordered?: boolean;
 
  /**
   * Define the edge radius of the card.
   */
  radius?: TokensTypes["radius"];
 
  /**
   * Enable border on a specific side.
   * @defaultValue 'all'
   */
  borderSide?: "all" | "top" | "right" | "bottom" | "left";
 
  /**
   * Set the horizontal padding (left/right)
   */
  hPadding?: TokensTypes["space"];
 
  /**
   * Set the vertical padding (top/bottom)
   */
  vPadding?: TokensTypes["space"];
};

Overlay Separator