Widget Area

Widget sizing container

1
import { WidgetArea } from "@/components/ui/pxl/widget-area";
2

3
export default function WidgetAreaDemo() {
4
  return (
5
    <WidgetArea className="bg-primary text-primary-foreground pixel-rounded flex items-center justify-center">
6
      Widget
7
    </WidgetArea>
8
  )
9
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/widget-area

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import type { PropsWithChildren } from "react";
3

4
const widgetVariants = cva("widget", {
5
  variants: {
6
    size: {
7
      sm: "widget-size-sm aspect-widget-sm",
8
      md: "widget-size-md aspect-widget-md",
9
      lg: "widget-size-lg aspect-widget-lg",
10
      xl: "widget-size-xl aspect-widget-xl",
11
    },
12
  },
13
  defaultVariants: {
14
    size: "sm",
15
  },
16
});
17

18
type Props = {
19
  className?: string;
20
} & VariantProps<typeof widgetVariants> &
21
  PropsWithChildren;
22

23
export function WidgetArea({ children, className, size }: Props) {
24
  return <div className={widgetVariants({ className, size })}>{children}</div>;
25
}

Update the import paths to match your project setup.

Usage

import { WidgetArea } from "@/components/ui/pxl/widget-area"

<WidgetArea size="sm" />

Use Widget Area to display your widgets in desktop or floating setups. For full screen scenarios, use Anchor Grid instead.

Size

Use the size prop to change the size of the widget.

1
import { WidgetArea } from "@/components/ui/pxl/widget-area";
2

3
export default function Sizes() {
4
  return (
5
    <div className="flex flex-col gap-2 w-full">
6
      <WidgetArea size="sm" className="bg-primary text-primary-foreground pixel-rounded flex items-center justify-center">
7
        Small
8
      </WidgetArea>
9
      <WidgetArea size="md" className="bg-primary text-primary-foreground pixel-rounded flex items-center justify-center">
10
        Medium
11
      </WidgetArea>
12
      <WidgetArea size="lg" className="bg-primary text-primary-foreground pixel-rounded flex items-center justify-center">
13
        Large
14
      </WidgetArea>
15
      <WidgetArea size="xl" className="bg-primary text-primary-foreground pixel-rounded flex items-center justify-center">
16
        ExtraLarge
17
      </WidgetArea>
18
    </div>
19
  )
20
}