Shim

Well

Group content in a visually distinct container.

Source
GitHub
Issues
Report
Install
pnpm dlx @kkga/shim add well

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address
import { Link } from "@/shim-ui/link";
import { Well } from "@/shim-ui/well";

export default () => (
  <Well className="max-w-[32ch]">
    <h3 className="font-bold text-neutral-text-contrast">Shipping info</h3>
    <p>
      Your order will be shipped to your primary address. Please make sure it is
      up to date.
    </p>
    <Link className="mt-2 self-start" href="#">
      Edit address
    </Link>
  </Well>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add well

Size

Use the size prop to set the size of the well.

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address
"use client";
import { Link } from "@/shim-ui/link";
import { Well } from "@/shim-ui/well";

export default () =>
  ([1, 2, 3, 4] as const).map((size) => (
    <Well className="max-w-[32ch]" key={size} size={size}>
      <h3 className="font-bold text-neutral-text-contrast">Shipping info</h3>
      <p>
        Your order will be shipped to your primary address. Please make sure it
        is up to date.
      </p>
      <Link className="mt-2 self-start" href="#">
        Edit address
      </Link>
    </Well>
  ));

Variant

Use the variant prop to set the visual style of the well.

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address

Shipping info

Your order will be shipped to your primary address. Please make sure it is up to date.

Edit address
"use client";
import { Link } from "@/shim-ui/link";
import { Well } from "@/shim-ui/well";

export default () =>
  (["classic", "soft", "surface", "outline"] as const).map((variant) => (
    <Well className="max-w-[32ch]" key={variant} variant={variant}>
      <h3 className="font-bold text-neutral-text-contrast">Shipping info</h3>
      <p>
        Your order will be shipped to your primary address. Please make sure it
        is up to date.
      </p>
      <Link className="mt-2 self-start" href="#">
        Edit address
      </Link>
    </Well>
  ));