# Styled Components

> Styled Components theming, variants, SSR support, and patterns.

- Skill: `a5c-ai/styled-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add a5c-ai/styled-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/a5c-ai/styled-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: a5c-ai (https://skillmd.com/u/a5c-ai)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/a5c-ai/styled-components

---


# Styled Components Skill

Expert assistance for CSS-in-JS with styled-components.

## Capabilities

- Create styled components
- Implement theming
- Handle SSR
- Create variants
- Extend components

## Patterns

```typescript
import styled, { css } from 'styled-components';

const Button = styled.button<{ $variant?: 'primary' | 'secondary' }>`
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

  ${({ $variant }) =>
    $variant === 'primary' &&
    css`
      background: ${({ theme }) => theme.colors.primary};
      color: white;
    `}
`;

// Theming
const theme = {
  colors: { primary: '#3b82f6' },
};

<ThemeProvider theme={theme}>
  <Button $variant="primary">Click me</Button>
</ThemeProvider>
```

## Target Processes

- react-application-development
- theming-implementation
- component-library