Bottom CTAmobile

Fixed bottom action area with safe-area padding, reserved layout space, single and double layouts, a top accessory slot, keyboard-aware hiding and optional hide on scroll.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/bottom-cta

의존 아이템locale style

Above keyboard

bottom-cta-above-keyboard.tsx

import { Button } from "@/components/ui/button";import { Input } from "@/components/ui/input";import { BottomCTA } from "@/components/ui/bottom-cta";
export default function BottomCtaAboveKeyboard() {  return (    <div className="flex flex-col gap-4">      <Input aria-label="Coupon code" placeholder="Coupon code" />      <BottomCTA reserveSpace aboveKeyboard primary={<Button size="lg">Apply</Button>} />    </div>  );}