# Molcajeteai Plugin React Components
> React Components
- Skill: `tomevault-io/molcajeteai-plugin-react-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/molcajeteai-plugin-react-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/molcajeteai-plugin-react-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/molcajeteai-plugin-react-components
---
# React Components
Quick reference for building UI components with Atomic Design, shadcn/ui, and Radix UI. Each section summarizes the key rules — reference files provide full examples and edge cases.
## Atomic Design
Five-level component hierarchy: Atoms → Molecules → Organisms → Templates → Pages.
### Classification Quick Reference
| Level | Breaks Down Further? | Fetches Data? | Business Logic? | Reusable? |
|---|---|---|---|---|
| Atom | No | No | No | Yes |
| Molecule | Into atoms | No | Minimal | Yes |
| Organism | Into molecules | Maybe | Yes | Usually |
| Template | Into organisms | No | No | Yes |
| Page | Into templates | Yes | Orchestration | No |
### Examples
- **Atoms**: Button, Input, Label, Avatar, Badge, Spinner, Separator
- **Molecules**: FormField (Label + Input + Error), SearchInput (Input + Button)
- **Organisms**: Header, SignUpForm, AppointmentCard, DoctorSearchResults
- **Templates**: MainLayout (Header + Sidebar + Content), AuthLayout
- **Pages**: DashboardPage, DoctorProfilePage (fetch data, wire to template)
### Naming
- Component files: PascalCase — `Button.tsx`, `FormField.tsx`
- Directories: PascalCase — `Button/`, `FormField/`
- Tests: `Button/__tests__/Button.test.tsx`
- Barrel exports per level: `atoms/index.ts`
See [references/atomic-design.md](./references/atomic-design.md) for classification decision table, naming conventions, barrel exports, and anti-patterns.
## Shared vs App-Specific Components
### Placement Rules
```
components/web/src/ → Shared across apps (@drzum/ui)
├── atoms/ → @drzum/ui/atoms
├── molecules/ → @drzum/ui/molecules
├── organisms/ → @drzum/ui/organisms
├── templates/ → @drzum/ui/templates
└── chad-cn/ → Raw shadcn/ui copies
patient/src/components/ → Patient app only
├── atoms/
├── molecules/
├── organisms/
└── templates/
```
**Decision flow:**
1. Used by 2+ apps? → `components/web/` (shared)
2. Used by 1 app? → `{app}/src/components/` (app-specific)
3. Is a page? → `{app}/src/pages/`
4. Might become shared? → Start in the app, move later when needed
### Import Convention
```tsx
// ✅ Shared components
import { Button, Input } from "@drzum/ui/atoms";
import { FormField } from "@drzum/ui/molecules";
// ✅ App-specific components
import { AppointmentCard } from "@/components/organisms/AppointmentCard";
```
## shadcn/ui
Copy-and-own component collection. Not a dependency — source code lives in your project.
### Adding Components
```bash
pnpm dlx shadcn@latest add button input dialog
```
### Customization
Modify the source directly — you own the code:
```tsx
// Add a custom variant
const buttonVariants = cva("...", {
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
success: "bg-green-600 text-white hover:bg-green-700", // Custom
},
},
});
```
### Theming
shadcn/ui uses CSS variables. Change your theme by updating variables in `@theme`:
```css
@theme {
--color-primary: #16a34a;
--color-primary-foreground: #ffffff;
--color-destructive: #dc2626;
}
```
### Extending for Domain Use
Wrap shadcn components with domain-specific behavior:
```tsx
function LoadingButton({ isLoading, children, ...props }: LoadingButtonProps) {
return (
);
}
```
See [references/shadcn-ui.md](./references/shadcn-ui.md) for setup, configuration, form patterns with React Hook Form, and monorepo placement.
## Radix UI
Accessible, unstyled primitives that shadcn/ui builds on. Key concepts:
### The `asChild` Pattern
```tsx
// Merges Radix behavior onto YOUR component
```
Always use `asChild` when passing your own styled component as a Radix slot.
### Data Attributes for Styling
Radix exposes state via data attributes — use them for Tailwind styling:
```tsx
Tab
```
Common: `data-[state=open]`, `data-[state=active]`, `data-[state=checked]`, `data-[disabled]`
### Common Primitives
| Primitive | Use For | Key Behavior |
|---|---|---|
| Dialog | Modals, confirmations | Focus trap, Escape to close |
| DropdownMenu | Context menus | Arrow key navigation, type-ahead |
| Tabs | Tabbed content | Arrow keys between triggers |
| Select | Selection from options | Keyboard navigation, type-ahead |
| Tooltip | Hover information | Delay, accessible labels |
| Accordion | Collapsible sections | Single or multiple open |
### Accessibility Checklist
1. Always include `Dialog.Title` (use `VisuallyHidden` if not visible)
2. Use `asChild` to avoid nesting `