SolanaUI is a collection of beautifully designed UI components and utility functions, built for Solana. It extends the powerful shadcn/ui library with Solana-specific components along with asset / price fetching utilites, making it easier to get started with Solana UI development. The project is fully open source and it is intended for components and utilities to be copy and pasted into your project

Building Solana apps at scale is notoriously complex and often requires custom indexing and data storage / retrieval. SolanaUI is designed to be a starting point for your project and can be extended as needed.

To get started with SolanaUI, you'll need a React project with TailwindCSS, shadcn/ui, and Solana web3.js. If you have an existing project then skip this step, otherwise you can follow the steps below.

• Install NextJS with TailwindCSS
• Install shadcn/ui
• Install Solana web3.js

Set your RPC url in your .env.local file as NEXT_PUBLIC_RPC_URL. In production we recommend proxying your RPC requests via a server side route to avoid exposing your API key.

SolanaUI extends @shadcn/ui and therefore inherits the theming system. Copy and paste components into your project and they will adapt according to your theme.

Try changing the theme to see the components adapt.

Fetching data on Solana is notoriously complex. If you are doing anything at scale you likely have your own indexing and data storage / retrieval systems. All SolanaUI components are designed to be data source agnostic.

SolanaUI provides a few utilities to help you get started with fetching assets and prices from Birdeye, Helius, and Metaplex UMI. The examples in our documentation all use these utilities. Read more about the asset / price fetching utilities.