Next.js Adapter

Payments and Checkouts made dead simple with Next.js

  • Secure & Simple Checkouts

  • Integrated Customer Portal

  • Granular & Reliable Webhook Handler

  • Global Merchant of Record

<button class="gap-2 [&_svg]:pointer-events-none [&_svg]:size-4! [&_svg]:shrink-0 relative inline-flex items-center cursor-pointer font-medium select-none justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 whitespace-nowrap text-black dark:text-white hover:bg-gray-200 dark:bg-polar-700 dark:hover:bg-polar-600 bg-gray-100 border dark:border-white/5 border-black/4 h-10 px-4 py-2 text-sm rounded-full" type="button">
Learn More
</button>
<pre class="shiki shiki-themes catppuccin-latte poimandres" style="background-color: #eff1f5; --shiki-dark-bg: #1b1e28; color: #4c4f69; --shiki-dark: #a6accd;"><code>import { Checkout } from "@polar-sh/nextjs";export const GET = Checkout({ accessToken: 'xxx'});</code></pre>
下にずらす
基準
上にずらす

CATEGORY

写真と文字が一部重なるブロークングリッド

文章背景をくすんだピンクにして、写真に少し被せています。スマホでは縦積みになります。

詳しく見る

画像が斜めに切り取られたレイアウト

clip-pathで画像の端を斜めにカットしています。横並びのまま、印象を一気に変えられます。

詳しく見る

上から下へ一直線で斜めカット

画像の右端が、上→下に一直線でスパッと切られた形です。 エディトリアル感・建築系・ブランドサイトと相性がいいです。

詳しく見る

タイトルが入ります

ここに文章が入ります。画像は右端が上から下へ一直線で斜めにカットされるように、 arbitrary value の clip-path を使っています。角丸や影は付けていません。

詳しく見る