Panel Component
A versatile container used to provide layout and styling capabilities.import { Panel } from "@locus-ui/components";import styles from "./styles.css";
<Panel variant="outlined" p="4"> Outlined Panel</Panel>Anatomy
Import the component:Anatomy
import { Panel } from "@locus-ui/components";
<Panel />Examples
Variants
Panel components come with three built in variants,solid, outlined, and muted.
Solid Panel
Outlined Panel
Muted Panel
variants.tsx
import { Panel } from "@locus-ui/components";
const variants = ["solid", "outlined", "muted"];
return variants.map((variant) => ( <Panel key={variant} variant={variant} p="4"> {variant.charAt(0).toUpperCase() + variant.slice(1)} Panel </Panel>));Blurring
Theblur prop applies a backdrop blur effect to the panel content.
Test Text Test Text Test Text Test Text Test Test Text Test Text Test Text Test Text Test
Blur: 0px
Blur: 2px
Blur: 4px
blur.tsx
import { Box, Flex, Panel, Text } from "@locus-ui/components";
const blurs = ["0px", "2px", "4px"];
return ( <Box className="relative"> <Box className="absolute"> <Text px="2" py="2">Test Text Test Text Test Text Test Text Test Test Text Test Text Test Text Test Text Test</Text> </Box> <Flex gap="3"> {blurs.map((blur) => (Colors
The panel component uses thecolor prop to allow for predefined and custom colors.
Primary Panel
Secondary Panel
Tertiary Panel
Success Panel
Danger Panel
Warning Panel
Info Panel
colors.tsx
import { Panel } from "@locus-ui/components";
const colors = [ "primary", "secondary", "tertiary", "success", "danger", "warning", "info",];
return colors.map((color) => ( <Panel key={color} color={color} px="4" py="2" variant="muted"> <Text color={color}> {color.charAt(0).toUpperCase() + color.slice(1)} Panel </Text>