Introduction
Keth UI is a set of beautifully-designed, accessible Web3 wallet components built with BaseUI primitives, Tailwind CSS, and Wagmi. Copy-paste components for seamless wallet integration.
This is not just a component library. It's how you build your Web3 wallet experience.
Keth UI provides copy-paste components for Web3 wallet connection and wallet features, built on top of BaseUI primitives. Each component is beautifully designed, accessible, and styled with Tailwind CSS, enhanced with motion animations and powered by Wagmi for seamless wallet integration.
Why Keth UI?
Traditional Web3 component libraries often require complex setup, have limited customization options, or don't integrate well with modern design systems. Keth UI solves these problems by offering:
- Copy-Paste Ready: Install components directly through the shadcn registry or copy-paste the code
- BaseUI Foundation: Built on proven, accessible BaseUI primitives
- Tailwind Styling: Modern, utility-first CSS framework for consistent design
- Wagmi Integration: Seamless wallet connection and Web3 functionality
- Motion Animations: Smooth, engaging user interactions
- Accessibility First: WCAG compliant components out of the box
Core Principles
Open Code
Every component is open source and copy-pasteable. You have full control to customize and extend components to fit your design system.
Web3 Native
Built specifically for Web3 applications with wallet connection, transaction signing, and blockchain interactions in mind.
Beautiful by Default
Carefully crafted default styles that look great immediately while remaining highly customizable.
AI-Ready
Open code structure makes it easy for AI tools to understand, modify, and generate new components.
Getting Started
What's Included
- Wallet Connection: Connect, disconnect, and manage wallet states
- Transaction Components: Sign, send, and track blockchain transactions
- NFT Components: Display, mint, and interact with NFTs
- DeFi Components: Swap, stake, and manage DeFi positions
- Utility Components: Address display, balance views, and more
Tech Stack
- BaseUI: Accessible component primitives
- Tailwind CSS: Utility-first styling
- Wagmi: React hooks for Ethereum
- Framer Motion: Smooth animations
- TypeScript: Full type safety
- Next.js: React framework support
Ready to build the future of Web3? Let's get started with the installation guide.
Last updated on