https://github.com/thirdweb-example/nft-gallery
Create a gallery of NFTs from an NFT Collection
https://github.com/thirdweb-example/nft-gallery
nft-drop ui-components
Last synced: 8 months ago
JSON representation
Create a gallery of NFTs from an NFT Collection
- Host: GitHub
- URL: https://github.com/thirdweb-example/nft-gallery
- Owner: thirdweb-example
- License: apache-2.0
- Created: 2023-01-27T02:51:22.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-23T00:36:47.000Z (almost 2 years ago)
- Last Synced: 2025-04-02T18:22:05.773Z (about 1 year ago)
- Topics: nft-drop, ui-components
- Language: TypeScript
- Homepage: https://nft-gallery.thirdweb-preview.com/
- Size: 114 KB
- Stars: 20
- Watchers: 1
- Forks: 40
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NFT Gallery
Create your own NFT gallery for any ERC721/ERC1155 NFT collection on [any EVM-compatible chain](https://blog.thirdweb.com/any-contract-any-evm-chain/).
View the metadata of all NFTs in the collection, including features such as pagination, filtering, and search.
## Using This Repo
To create your own version of this template, you can use the following steps:
Run this command from the terminal to clone this project:
```bash
npx thirdweb create --template nft-gallery
```
## Environment Variables
To run this project, you will need to add environment variables. Check the `.env.example` file for all the environment variables required and add it to `.env` file or set them up on your hosting provider.
### 1. Deploy or Import Your NFT Collection
If you haven't already deployed your contract, head over to the thirdweb dashboard and create your own [NFT collection](https://thirdweb.com/thirdweb.eth/TokenERC721) contract.
If you have an existing contract, use the [thirdweb dashboard](https://thirdweb.com/dashboard) to import it!
### 2. Configure Parameters
Go to the [`parameters.ts`](/src/consts/parameters.ts) and update the following values:
1. `contractAddress`: The smart contract address of your NFT collection.
2. `chain`: The name of the chain that your smart contract is deployed to.
3. `blockExplorer`: (Optional) - The block explorer to open when user's click on historical events of each NFT.
### 3. Customize the Styling
Update the styles in the respective components by changing the [Tailwind](https://tailwindcss.com/) classes.
## Join our Discord!
For any questions or suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).