DeSo UI Component Library

A modern, type-safe React component library for building DeSo blockchain applications.

Built with TypeScript, Shadcn UI, Tailwind CSS, and Storybook.

This library provides a comprehensive suite of ready-to-use React components for interacting with the DeSo blockchain. Each component is designed to be type-safe, easily customizable, and comes with a complete set of Storybook stories for easy development and testing.

🚀 Quick Start

Installation

DeSo UI is built with Shadcn UI and can be installed with the ShadCN CLI using the shadcn@latest add command.

Components will be added to /components/deso-ui in your project.

npx shadcn@latest add http://ui.deso.com/r/copy-button.json

You can also install individual shadcn components:

npx shadcn@latest add button

To install all shadcn components:

npx shadcn@latest add --all 

Development

# Install dependencies
npm install

# Run NextJS App
npm run dev

# Start Storybook for component development
npm run storybook

# Build Storybook
npm run build-storybook

# Build the registry
npm run registry:build

# Build the library
npm run build

For monolithic applications, see: Shadcn Monorepo

📚 Component Library

This library includes 47 production-ready components for building DeSo applications:

Core Components

• ActionMenu - Dropdown menu for post/user actions
• ConfirmationDialog - User action confirmation dialogs
• CopyButton - Copy text to clipboard functionality
• Logo - DeSo logo with light/dark mode support
• SearchBar - Reusable search with autocomplete
• Timestamp - Formatted timestamp display

Editor Components

• Editor - Rich text editor with media support
• EditorEmojiPicker - Emoji selection component
• EditorMarkdown - Markdown editor for posts
• EditorUpload - File upload handling

Post Components

• PostCard - Complete post display
• PostText - Post text rendering
• PostImage - Image display with bento grids
• PostVideo - Video player component
• PostAudio - Audio player component
• PostEmbed - URL embeds (YouTube, Spotify, etc.)
• PostPoll - Interactive polls
• PostEngagement - Like, comment, repost stats
• PostReactions - Reaction display
• PostShare - Shared post component

User Components

• UserInfo - User information display
• UserMenu - User dropdown menu
• UserSearch - User search with typeahead
• UserPublicKey - Public key display
• Username - Username display options
• UsernameDisplay - Username with verification
• VerificationBadge - Verification badges

Profile Components

• ProfileCard - User profile card
• ProfilePicture - Profile pictures with NFT support
• ProfileCoverPhoto - Cover photo display
• ProfileDescription - Profile bio text
• ProfileStat - Profile statistics
• ProfileTag - Profile tags
• ProfileActions - Profile action buttons
• ProfileList - List of profiles

Media Components

• MediaCard - Media cards with video hover
• MediaGallery - Masonry layout gallery
• MediaItem - Individual media items
• VideoReel - TikTok-style video reels

Messaging Components

• MessageButton - Send message button
• MessageInbox - Complete chat interface
• MessageInboxItem - Conversation list item
• MessageChatList - Message list
• MessageChatItem - Individual messages

Navigation Components

• NavigationList - Sidebar navigation
• FeedList - Post feed display
• FollowButton - Follow/unfollow functionality

🌐 DeSo Ecosystem

Applications

• DeSo - Blockchain explorer and validator hub
• DeSo Wallet - Asset and key management
• DeSo Explorer - Blockchain explorer
• Focus - Crypto social network
• NFTz - NFT marketplace with auctions
• Openfund - On-chain orderbook exchange

Developer Resources

• DeSo GraphQL API - Query the DeSo blockchain
• NextJS Starter - Frontend starter kit
• JavaScript SDK - TypeScript/JavaScript library
• Python SDK - Python library
• HeroSwap API - Wrapped assets integration
• Developer Docs - Complete documentation
• Revolution PoS - Proof of stake protocol

📦 Component Installation

Each component can be installed individually using the shadcn CLI:

# Essential components
npx shadcn@latest add http://ui.deso.com/r/post-card.json
npx shadcn@latest add http://ui.deso.com/r/user-info.json
npx shadcn@latest add http://ui.deso.com/r/feed-list.json

# Editor components
npx shadcn@latest add http://ui.deso.com/r/editor.json
npx shadcn@latest add http://ui.deso.com/r/editor-upload.json

# Media components
npx shadcn@latest add http://ui.deso.com/r/media-gallery.json
npx shadcn@latest add http://ui.deso.com/r/video-reel.json

# Messaging components
npx shadcn@latest add http://ui.deso.com/r/message-inbox.json
npx shadcn@latest add http://ui.deso.com/r/message-chat-list.json

# Profile components
npx shadcn@latest add http://ui.deso.com/r/profile-card.json
npx shadcn@latest add http://ui.deso.com/r/profile-picture.json

🛠️ Development

Prerequisites

• Node.js 18+
• React 18+
• Modern ESM-compatible bundler

Local Development

1. Clone the repository
2. Install dependencies: npm install
3. Start Storybook: npm run storybook
4. View components at http://localhost:6006

Building Components

# Build the registry
npm run registry:build

# Build Storybook for production
npm run build-storybook

# Run tests
npm test

Registry Structure

Components are organized following the Shadcn Registry pattern:

• Source files in src/components/deso/
• Registry definitions in registry.json
• Built registry in public/r/

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Add your component with Storybook stories
4. Update the registry.json
5. Submit a pull request

📄 License

MIT © 2025 DeSo Protocol

🔗 Links

• Documentation
• GitHub Repository
• DeSo Protocol
• Shadcn UI
• Storybook