);
}
```
### 2. Complete Admin Interface
```jsx
import { AdminLayout } from '@voilajsx/uikit/admin';
import { DataTable } from '@voilajsx/uikit/data-table';
function AdminDashboard() {
return (
);
}
```
### 3. Marketing Site
```jsx
import { PageLayout } from '@voilajsx/uikit/page';
function MarketingSite() {
return (
Build Better Apps
With UIKit's composite system
);
}
```
---
## 💡 Best Practices
### ✅ Do This
- **Use semantic colors** for theme compatibility
- **Individual imports** for better tree-shaking
- **Compound patterns** for AdminLayout and PageLayout
- **Single patterns** for AuthLayout, BlankLayout, PopupLayout
- **Consistent props** (scheme, tone, size) across components
### ❌ Avoid This
- **Hardcoded colors** that break in themes
- **Barrel imports** that increase bundle size
- **Wrong layout patterns** (single vs compound)
- **Inconsistent navigation** structure
- **Missing semantic classes**
### Component Selection Guide
```jsx
// Forms with validation → Use Enhanced Components
// Simple forms → Use Basic Components
// Complex data → Use DataTable
// Simple data → Use Table
