New Components

One of the most exciting ways to contribute is by adding new components to the DeDevs UI Design Registry. Maybe you have a specialized component that you built in your app that you think would be useful for others – whether it's an AI interface element, a blockchain interaction component, or a portfolio display feature. Here are some guidelines for contributing a new component:

Fit & Scope

First, consider whether the component fits the specialized scope of the Design Registry. Our philosophy is to provide composable building blocks for modern web applications across various domains. If your component solves a common challenge in specialized applications, it's likely a great fit. For example:

AI Interface Components:

• Components that help visualize AI reasoning or thought processes
• Elements that enhance the presentation of AI-generated content
• Tools for managing conversation context or history
• UI patterns for source attribution and citation in AI responses
• Components that handle streaming responses effectively

Blockchain/Web3 Components:

• Wallet connection and management interfaces
• Token display and transaction components
• DeFi protocol interaction elements
• NFT galleries and marketplace interfaces
• Governance and DAO voting components

Developer Portfolio Components:

• Project showcase and case study displays
• Code snippet and syntax highlighting components
• Skill visualization and technology matrices
• Professional contact and social media integrations
• Interactive resume and CV components

Components that don't fit these specialized domains might be better suited for the broader shadcn/ui ecosystem.

Design Consistency

Ensure your component integrates with the existing design system. Use the same CSS variable themes from shadcn, and follow accessibility practices. For example, if you create a specialized component, make sure it works in dark mode, handles its specific functionality properly, and is keyboard accessible, similar to other components in the registry.

Consider the unique aspects of your domain when designing components:

AI Interface Considerations:

• Handling streaming/progressive responses
• Supporting rich content types (markdown, code, etc.)
• Visualizing complex AI processes (reasoning, citations)
• Providing appropriate feedback for loading/thinking states

Blockchain/Web3 Considerations:

• Handling asynchronous blockchain operations
• Displaying transaction states and confirmations
• Managing wallet connection states
• Showing loading states for network operations

Portfolio Considerations:

• Responsive design across all device sizes
• Smooth animations and transitions
• Accessibility for professional presentation
• Print-friendly styling options

Documentation

When you add a component, prepare thorough documentation for it. This means a Markdown file in the docs site with:

• An overview of the component and its domain-specific use cases
• Installation instructions (npx dedevs-ui add ...)
• A list of features and props
• Example usage code showing common patterns for the component's domain
• A props table with detailed explanations
• Integration examples with popular libraries/services if applicable

Consider including interactive examples that demonstrate the component's behavior with realistic content. Good documentation ensures developers can effectively implement your component in their own applications, whether they're building AI interfaces, blockchain applications, or portfolio sites.

Testing & Quality

Testing specialized components presents unique challenges depending on the domain. If possible, include tests for your component logic, especially around handling domain-specific scenarios, error states, and accessibility. At minimum, test it manually with realistic content scenarios within the docs.

Consider testing based on your component's domain:

AI Components:

• How the component handles varying lengths of AI responses
• Performance with large conversation histories
• Edge cases like error handling or malformed responses

Blockchain Components:

• Network error handling and retry logic
• Different wallet connection states
• Transaction failure and success scenarios
• Gas estimation and fee calculations

Portfolio Components:

• Responsive behavior across device sizes
• Performance with large datasets (many projects, skills, etc.)
• Accessibility with screen readers and keyboard navigation
• Print and export functionality
• Accessibility with screen readers and keyboard navigation
• Responsive behavior across device sizes

We want to maintain a high quality bar so that any component in the Design Registry can be trusted in production AI applications.

When your new component PR is opened, maintainers might review and give feedback. Be open to making changes – code review is a positive process to maintain quality and consistency. Once merged, you've officially added a valuable piece to the AI Design Registry ecosystem! 🎊