diff --git a/site/docs/components/NFTComponents.tsx b/site/docs/components/NFTComponents.tsx
new file mode 100644
index 0000000000..d6f01e04dd
--- /dev/null
+++ b/site/docs/components/NFTComponents.tsx
@@ -0,0 +1,222 @@
+import { NFTCard, NFTMintCard } from '@coinbase/onchainkit/nft';
+import {
+ NFTAssetCost,
+ NFTCollectionTitle,
+ NFTCreator,
+ NFTMintButton,
+ NFTQuantitySelector,
+} from '@coinbase/onchainkit/nft/mint';
+import {
+ NFTLastSoldPrice,
+ NFTMedia,
+ NFTNetwork,
+ NFTOwner,
+ NFTTitle,
+} from '@coinbase/onchainkit/nft/view';
+import App from './App.tsx';
+
+export function MintCardMain() {
+ return (
+
+
+ ({
+ name: 'OCK Mint Component',
+ description: 'OnchainKit highlights',
+ imageUrl:
+ 'https://ipfs.io/ipfs/bafybeifbnyvwfrbdr4r3nn7joi5eznbype27fynyat7rr52ckmqnz3camm',
+ animationUrl:
+ 'https://ipfs.io/ipfs/bafybeia7fmwmyvxxmx6cnokvhyeyafa7gzpkhildz2keu6ca2ln3dlsxum',
+ mimeType: 'video/mp4',
+ contractType: 'ERC1155',
+ price: {
+ amount: '0.000111',
+ currency: 'ETH',
+ amountUSD: '0.264674505',
+ },
+ mintFee: {
+ amount: '0.0001',
+ currency: 'ETH',
+ amountUSD: '0.2384455',
+ },
+ maxMintsPerWallet: 1,
+ isEligibleToMint: true,
+ creatorAddress: '0xb4e741b761d8b69103cc986f1b7cd71ed627f8cc',
+ network: 'networks/base-mainnet',
+ totalTokens: '1',
+ totalOwners: '1',
+ })}
+ buildMintTransaction={() => Promise.resolve([{ callData: '0x' }])}
+ >
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function MintCardTitleAbove() {
+ return (
+
+
+ ({
+ name: "Job's Not Finished",
+ imageUrl:
+ 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy',
+ mimeType: 'image/png',
+ })}
+ >
+
+
+
+
+
+ );
+}
+
+export function MintCardScaled({ square }: { square: boolean }) {
+ return (
+
+ ({
+ name: 'Videos',
+ animationUrl:
+ 'https://ipfs.io/ipfs/bafybeigg7e2m2ubmntg4z7uvqzatpnkxs6w5celjky5o32uakskkrwyqpi',
+ mimeType: 'video/mp4',
+ })}
+ >
+
+
+
+ );
+}
+
+export function MintCardOverrideStyles() {
+ return (
+
+
+ ({
+ name: "Job's Not Finished",
+ imageUrl:
+ 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy',
+ mimeType: 'image/png',
+ })}
+ >
+
+
+
+
+
+ );
+}
+
+export function ViewCardMain() {
+ return (
+
+
+ ({
+ collectionName: 'Base Around The World 2024 Recap Video',
+ collectionDescription:
+ 'Get ready for a fast-paced journey as BASE goes global! š This recap takes you through regional buildathons across Africa, India, Southeast Asia, and Latin America, where builders came together to innovate, create, and solve local challengesāall for a chance to win from a massive 100 ETH prize pool. With a mission to onboard a billion users onchain, watch how these visionaries are shaping the future, one solution at a time!',
+ name: 'Base Around The World 2024 Recap Video #1',
+ description:
+ 'Get ready for a fast-paced journey as BASE goes global! š This recap takes you through regional buildathons across Africa, India, Southeast Asia, and Latin America, where builders came together to innovate, create, and solve local challengesāall for a chance to win from a massive 100 ETH prize pool. With a mission to onboard a billion users onchain, watch how these visionaries are shaping the future, one solution at a time!',
+ imageUrl: '',
+ animationUrl:
+ 'https://ipfs.io/ipfs/QmfAGdrbm48zie8BRjfkbc5yN8DGyM9nt9dozvAsNHGmFo/nft-gallery-1mp4',
+ ownerAddress: '0x2f21f94e1e57543f4663b722b6b1bed97c576bd4',
+ lastSoldPrice: {
+ amount: '0.0004',
+ currency: 'ETH',
+ amountUSD: '0.982512',
+ },
+ mimeType: 'video/quicktime',
+ contractType: 'ERC721',
+ })}
+ >
+
+
+
+
+
+
+
+
+ );
+}
+
+export function ViewCardTitleAbove() {
+ return (
+
+
+ ({
+ name: "Job's Not Finished",
+ imageUrl:
+ 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy',
+ mimeType: 'image/png',
+ })}
+ >
+
+
+
+
+
+ );
+}
+
+export function ViewCardScaled({ square }: { square: boolean }) {
+ return (
+
+ ({
+ name: 'Videos',
+ animationUrl:
+ 'https://ipfs.io/ipfs/bafybeigg7e2m2ubmntg4z7uvqzatpnkxs6w5celjky5o32uakskkrwyqpi',
+ mimeType: 'video/mp4',
+ })}
+ >
+
+
+
+ );
+}
+
+export function ViewCardOverrideStyles() {
+ return (
+
+
+ ({
+ name: "Job's Not Finished",
+ imageUrl:
+ 'https://ipfs.io/ipfs/bafybeibozzie5uy6tc2adpklc5rygchjgw5uqrgnmspzzpoveibwpqnbwy',
+ mimeType: 'image/png',
+ })}
+ >
+
+
+
+
+
+ );
+}
diff --git a/site/docs/components/StartBuilding.tsx b/site/docs/components/StartBuilding.tsx
index fbed3141bd..67dc1cbd18 100644
--- a/site/docs/components/StartBuilding.tsx
+++ b/site/docs/components/StartBuilding.tsx
@@ -165,6 +165,33 @@ export default function StartBuilding() {
in your app.
+