# New Component

> Create new GPUI components. Use when building components, writing UI elements, or creating new component implementations.

- Skill: `majiayu000/new-component` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/new-component`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/new-component/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/new-component

---


## Instructions

When creating new GPUI components:

1. **Follow existing patterns**: Base implementation on components in `crates/ui/src` (examples: `Button`, `Select`)
2. **Style consistency**: Follow existing component styles and Shadcn UI patterns
3. **Component type decision**:
   - Use stateless elements for simple components (like `Button`)
   - Use stateful elements for complex components with data (like `Select` and `SelectState`)
4. **API consistency**: Maintain the same API style as other elements
5. **Documentation**: Create component documentation
6. **Stories**: Write component stories in the story folder

## Component Types

- **Stateless**: Pure presentation components without internal state
- **Stateful**: Components that manage their own state and data