{config.label && (
);
case "Separator":
return
{config.label}
{formattedValue}%
)}
{/* Primary action */}
{primary && (
)}
{/* Secondary actions */}
{secondary && secondary.length > 0 && (
{context.map((action, index) => (
)}
{/* Confirmation dialog */}
{confirmAction && (
{secondary.map((action) => (
))}
)}
{/* Context menu (more actions) */}
{context && context.length > 0 && (
{index > 0 && action.variant === "danger" && (
handleAction(action)}
className={
action.variant === "danger" ? "text-destructive" : ""
}
>
{action.label}
))}
{items.slice(0, connectionConfig.max || 5).map((item) => (
{item.name}
))}
);
default:
return null;
}
});
const validBadges = badges.filter(Boolean);
if (validBadges.length === 0) return null;
return {validBadges}
;
}
```
---
## Field Components with shadcn/ui
### Price Component
```tsx
// frontend/src/components/fields/Price.tsx
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
interface PriceProps {
value: number;
currency?: string;
format?: "full" | "compact";
badge?: boolean;
size?: "sm" | "md" | "lg";
strikethrough?: boolean;
free?: { label: string; badge: boolean };
className?: string;
}
export function Price({
value,
currency = "USD",
format = "compact",
badge = false,
size = "md",
strikethrough = false,
free,
className,
}: PriceProps) {
// Show "Free" if value is 0 and free config provided
if (value === 0 && free) {
return free.badge ? (
{loading && 
setLoading(false)}
onError={() => {
setError(true);
setLoading(false);
}}
/>
);
}
```
### TagList Component
```tsx
// frontend/src/components/fields/TagList.tsx
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
interface TagListProps {
tags: string[];
max?: number;
color?: string;
moreLabel?: string;
}
export function TagList({
tags,
max = 3,
color = "default",
moreLabel = "+{count} more",
}: TagListProps) {
if (!tags || tags.length === 0) return null;
const visibleTags = tags.slice(0, max);
const hiddenTags = tags.slice(max);
return (
{visibleTags.map((tag) => (
{tag}
))}
{hiddenTags.length > 0 && (
{moreLabel.replace("{count}", hiddenTags.length.toString())}
)}
);
}
```
---
## Empty State with shadcn/ui
```tsx
// frontend/src/components/generic/EmptyState.tsx
import { type EmptyStateConfig } from "@/ontology/types";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
interface EmptyStateProps {
config: EmptyStateConfig;
onAction?: () => void;
}
export function EmptyState({ config, onAction }: EmptyStateProps) {
return (
{hiddenTags.map((tag) => (
{tag}
))}
{/* Icon from lucide-react */}
{config.title}
{config.description}
{config.action && ( )}
{/* Responsive grid */}
```
---
## Accessibility
shadcn/ui components are built on Radix UI, which provides:
- ✅ **Keyboard navigation** - Full keyboard support
- ✅ **Screen reader support** - ARIA labels and descriptions
- ✅ **Focus management** - Proper focus handling
- ✅ **Color contrast** - WCAG AA compliant
- ✅ **RTL support** - Right-to-left languages
### Example: Accessible Form
```tsx
```
---
## Usage Examples
### Course Card
```tsx
import { ThingCard } from "@/components/generic/ThingCard";
export function CoursesPage() {
const courses = await getCourses();
return (
Courses
{courses.map((course) => (
{
router.push(`/courses/${thing._id}`);
}}
/>
))}
{products.map((product) => (