--- name: byte-ui description: Reusable UI component patterns for Byte Integration Hub. Use when building new UI components, views, or layouts. Provides Card, Badge, Button, Input, Modal, EmptyState, StatusIndicator, ProgressBar, Spinner, SplitView, SidebarLayout, and FilterBar patterns matching Byte's cyan\/teal design system. --- # Byte UI Components Provides reusable UI component patterns that match Byte's design system. ## Core Component Patterns ```jsx \/\/ Card Component const Card = ({ children, className = '' }) => (

{children} <\/div> ); \/\/ Badge Component const Badge = ({ children, color = 'cyan' }) => { const colors = { cyan: 'bg-cyan-500\/20 text-cyan-400 border-cyan-500\/30', teal: 'bg-teal-500\/20 text-teal-400 border-teal-500\/30', indigo: 'bg-indigo-500\/20 text-indigo-400 border-indigo-500\/30', orange: 'bg-orange-500\/20 text-orange-400 border-orange-500\/30', red: 'bg-red-500\/20 text-red-400 border-red-500\/30', }; return ( {children} <\/span> ); }; \/\/ Button Component const Button = ({ children, variant = 'primary', size = 'md', ...props }) => { const variants = { primary: 'bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-medium', secondary: 'bg-slate-800 hover:bg-slate-700 text-white', ghost: 'hover:bg-slate-800 text-slate-400 hover:text-white', danger: 'bg-red-500\/20 hover:bg-red-500\/30 text-red-400', }; const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-sm', lg: 'px-6 py-3 text-base', }; return (

{title}<\/h3>