Component Recipes Overview Ready-to-use Tailwind CSS patterns for demo components. Card Recipes Basic Card Clickable Card Selected Card Badge Recipes Severity Badges Condition Badges Badge Sizes Button Recipes Primary Button Secondary Button Ghost Button Icon Button Modal Recipes Modal Overlay Modal Content Modal Header Input Recipes Text Input Input with Error Progress Recipes Progress Bar Colored Progress (Condition-based) Layout Recipes Page Container Card Grid Section Header Best Practices - Use semantic color tokens (brand-primary, severity- , condition- ) - Maintain consistent spacing (…