# Build custom components

Source: https://docs.streamlit.io/develop/tutorials/custom-components

Build package-based Streamlit custom components using the official [component template](https://github.com/streamlit/component-template). These tutorials walk you through generating a project, understanding the generated code, and extending the template.

> **Tip**
>
> If you use an AI coding agent while building a component, install Streamlit's official agent skills with [`streamlit skills`](https://docs.streamlit.io/develop/api-reference/cli/skills).

**[Create a component with Pure TypeScript](https://docs.streamlit.io/develop/tutorials/custom-components/template-typescript)**: Build a package-based component using Pure TypeScript and Vite. Best for lightweight components without framework overhead.

**[Create a component with React + TypeScript](https://docs.streamlit.io/develop/tutorials/custom-components/template-react)**: Build a package-based component using React, TypeScript, and Vite. Best for components with complex, state-driven UIs.