Mockup

A very simple mockup component that can be used to display content in a webpage.

Built with Tailwind CSS.

Check out the example below:

There are a couple of variant types to choose from filled or default:

filled

default

Here is the reference code:

tsx
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const mockupVariants = cva('rounded-md shadow-md', {
  variants: {
    variant: {
      default: 'bg-background border',
      filled: 'border-none bg-secondary'
    }
  },
  defaultVariants: {
    variant: 'default'
  }
});

const childrenVariants = cva('divide-y', {
  variants: {
    variant: {
      default: 'border-secondary',
      filled: 'border-background'
    }
  },
  defaultVariants: {
    variant: 'default'
  }
});

export interface MockupProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof mockupVariants | typeof childrenVariants> {
  withColor?: boolean;
}

const Mockup = React.forwardRef<HTMLDivElement, MockupProps>(
  ({ className, variant, children, withColor }, ref) => {
    return (
      <div className={cn(mockupVariants({ className, variant }))} ref={ref}>
        <div className="p-4 flex items-center justify-between gap-4 w-full">
          <div className="flex items-center gap-2">
            <div
              className={`w-4 h-4 rounded-full ${
                withColor
                  ? 'bg-red-500'
                  : variant === 'filled'
                  ? 'bg-card'
                  : 'bg-accent'
              }`}
            />
            <div
              className={`w-4 h-4 rounded-full ${
                withColor
                  ? 'bg-yellow-500'
                  : variant === 'filled'
                  ? 'bg-card'
                  : 'bg-accent'
              }`}
            />
            <div
              className={`w-4 h-4 rounded-full ${
                withColor
                  ? 'bg-green-500'
                  : variant === 'filled'
                  ? 'bg-card'
                  : 'bg-accent'
              }`}
            />
          </div>
        </div>
        <hr className={cn(childrenVariants({ variant }))} />
        <div className="min-h-80">{children}</div>
      </div>
    );
  }
);
Mockup.displayName = 'Mockup';

export { Mockup, mockupVariants, childrenVariants };