Styled-Components

import styled, { css, keyframes } from 'styled-components';

// Basic styled component
const Button = styled.button`
  background: #3498db;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    background: #2980b9;
  }
`;

// Dynamic styles via props
const Card = styled.div`
  padding: ${(props) => props.padding || '16px'};
  background: ${(props) => props.primary ? '#3498db' : '#f0f0f0'};
  border-radius: 8px;
  
  ${(props) => props.highlighted && css`
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  `}
`;

// Animations
const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const Modal = styled.div`
  animation: ${fadeIn} 0.3s ease-in;
  padding: 24px;
`;

// Theme
import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71',
  },
};

const ThemedButton = styled.button`
  background: ${(props) => props.theme.colors.primary};
  color: white;
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedButton>زر مع الثيم</ThemedButton>
    </ThemeProvider>
  );
}