Design Overview
An overview of DeDevs Design
Design Overview
Welcome to the DeDevs UI Design Registry docs. This overview orients you across the core sections, shows how the registry relates to shadcn/ui, and gives you a quick path to start installing and using components.
What you'll find here
- Introduction — High-level context, goals, and who this registry is for. See
Introductionat/docs/design. - Philosophy — Principles that guide component design: composability, simplicity, accessibility, performance, and DX. See
/docs/design/philosophy. - Setup — Prerequisites and installation via the DeDevs UI CLI or shadcn/ui CLI. See
/docs/design/setup. - Usage — Practical examples for AI interfaces, Blockchain/Web3 dashboards, and Developer portfolios. See
/docs/design/usage. - Component Registry — Browse available components and install via CLI. See
/docs/design/registry. - Benefits — Why use the registry across domains and teams. See
/docs/design/benefits. - New Components — Guidelines for proposing and contributing new specialized components. See
/docs/design/new-components. - How to Contribute — Issue/PR guidance and contribution areas. See
/docs/design/how-to-contribute. - MCP Server — Enable AI tooling to query the registry through MCP. See
/docs/design/mcp. - Troubleshooting — Common pitfalls and fixes. See
/docs/design/troubleshooting. - Resources — Extra references and pointers. See
/docs/design/resources/components. - Concepts — Foundational ideas and system-level context. See
/docs/design/concepts/system.
Quick start
Ensure a Next.js/React project with Tailwind and shadcn/ui (CSS Variables mode) is set up. See /docs/design/setup.
Use the CLI to add your first component:
npx dedevs-ui add buttonImport and compose the component within your UI. See domain-specific examples in /docs/design/usage.
Browse available components and install more as needed. See /docs/design/registry.
Domains we focus on
- AI Interfaces — Conversation UIs, reasoning visualization, streaming responses, source attribution.
- Blockchain/Web3 — Wallet connect, token balances, transaction histories, protocol interactions.
- Developer Portfolios — Project showcases, code snippets, skill matrices, professional sections.
These components are designed to be composable and accessible, using Tailwind CSS and aligning with shadcn/ui primitives.
Install components on demand
Install any component from the registry. The CLI places code directly in your project so you retain full control and can theme with Tailwind utilities.
npx dedevs-ui add <component-name>Install multiple at once:
npx dedevs-ui add button card dialogFeatured components
Core building blocks you’ll use in almost every page.
Transient layers for dialogs, menus, and hints.
- - Dialog — Modals for focused tasks.
- - Dropdown Menu — Action menus.
- - Tooltip — Lightweight hints.
- - Sheet — Slide-over panels.
Helpful next steps
- New here? Start at
/docs/designthen read/docs/design/philosophy. - Ready to build? Jump to
/docs/design/setupand/docs/design/usage. - Browsing components? See
/docs/design/registry. - Integrating with AI tools? Configure the MCP server via
/docs/design/mcp. - Hit a snag? Check
/docs/design/troubleshooting.
Last updated on