Introduction
The Drift Common monorepo contains a suite of shared packages that provide essential functionality for building Drift Protocol applications. These packages are designed to work together seamlessly while maintaining clear separation of concerns.Available Packages
@drift-labs/common
Core utilities, clients, and helpers for interacting with Drift Protocol
@drift-labs/react
React components, hooks, and providers for building Drift applications
@drift-labs/icons
Comprehensive icon library generated from Figma designs
Package Relationships
The packages have the following dependency structure:All packages depend on
@drift-labs/sdk and @solana/web3.js as peer dependencies.Common Features
All packages in this monorepo share these characteristics:TypeScript First
Every package is written in TypeScript with full type definitions included:- Type safety for all exported functions and components
- IntelliSense support in modern IDEs
- Compile-time error checking
ESM/CJS Support
Packages are built to support both module systems:Browser Compatibility
All packages include browser-specific builds when needed, with polyfills for Node.js APIs.Monorepo Structure
Development Workflow
Building Packages
Each package can be built independently:Linking for Local Development
To use packages locally during development:Running Tests
Version Management
Current versions:@drift-labs/common: v1.0.39@drift-labs/react: v1.0.0@drift-labs/icons: v1.0.0
Best Practices
Import Patterns
Use named imports for better tree-shaking:Peer Dependencies
Always install required peer dependencies:TypeScript Configuration
Ensure yourtsconfig.json includes:
Contributing
For detailed contribution guidelines, see the Contributing Guide.Package-Specific Guidelines
Adding to @drift-labs/common
Adding to @drift-labs/common
- Ensure utilities are framework-agnostic
- Add tests for all new functionality
- Update exports in
src/index.ts - Document all public APIs
Adding to @drift-labs/react
Adding to @drift-labs/react
- Follow React hooks best practices
- Add prop type documentation
- Ensure components are accessible
- Test with React 19
Adding to @drift-labs/icons
Adding to @drift-labs/icons
- Icons are auto-generated from Figma
- Use the
bun iconsscript to regenerate - Maintain consistent naming conventions
- Test icon rendering
Next Steps
Get Started with Common
Explore utilities and clients
Build with React
Learn about hooks and components
Use Icons
Browse the icon library
API Reference
View complete API docs