Modular Design System
Building complex interfaces from small, reusable, and testable atoms.
1. Atomic Design Principles
We break down interfaces into five distinct levels:
1
Atoms
2
Molecules
3
Organisms
4
Templates
5
Pages
Composition in Code
// 1. Atom (Basic building block)
const Button = ({ children }) => <button className="px-4 py-2 bg-blue-600 rounded">{children}</button>;
// 2. Molecule (Group of atoms functioning together)
const SearchBar = () => (
<div className="flex gap-2">
<Input placeholder="Search..." />
<Button>Search</Button>
</div>
);
// 3. Organism (Complex section of interface)
const Header = () => (
<header className="flex justify-between items-center p-4 border-b">
<Logo />
<SearchBar />
<UserAvatar />
</header>
);2. Component Sandbox
A key benefit of modular design is configurability. Try adjusting the properties (Props) of these components to see how they adapt while maintaining visual consistency.
About Button
Triggers an action or event, such as submitting a form or opening a dialog.
Best Practices
- Use 'default' (primary) for the main action on the page.
- Use 'ghost' or 'outline' for secondary actions to reduce visual noise.
- Use 'destructive' for dangerous actions like deleting data.
Accessibility
Ensure buttons have descriptive text. If using an icon-only button, provide an aria-label.
Code Snippet
<Button
variant="default"
size="default">
Content
</Button>