Skip to content

CCV2 Template Tutorials #1434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sfc-gh-dmatthews wants to merge 7 commits into
base: prettier-python-diff
Choose a base branch
from
Open

CCV2 Template Tutorials #1434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1b01d8d
CCV2 Template Tutorials
sfc-gh-dmatthews Mar 7, 2026
367fa92
Use diff highlighting
sfc-gh-dmatthews Mar 7, 2026
f6fa293
Update tutorials
sfc-gh-dmatthews Mar 7, 2026
a186941
Update react tutorial
sfc-gh-dmatthews Mar 7, 2026
e098455
Doublecheck result TS tutorial files
sfc-gh-dmatthews Mar 8, 2026
cef42a1
Double check result React tutorial files
sfc-gh-dmatthews Mar 8, 2026
7b3c831
Clarify react tutorial
sfc-gh-dmatthews Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions content/develop/concepts/custom-components/components-v2/package-based.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,15 @@ Choose package-based components when you need one of the following features:

The fastest way to create a package-based component is with the official [component template](https://github.com/streamlit/component-template). It generates a complete project with all the configuration, build tooling, and boilerplate you need.

<Tip>

For step-by-step walkthroughs of using the template, see the tutorials:

- [Create a component with Pure TypeScript](/develop/tutorials/custom-components/template-typescript)
- [Create a component with React + TypeScript](/develop/tutorials/custom-components/template-react)

</Tip>

### Prerequisites

- Python >= 3.10
Expand Down
8 changes: 8 additions & 0 deletions content/develop/tutorials/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,14 @@ Build simple apps and walk through examples to learn about Streamlit's core feat

</RefCard>

<RefCard href="/develop/tutorials/custom-components">

<h5>Build custom components</h5>

Build package-based custom components with the official component template.

</RefCard>

<RefCard href="/develop/tutorials/multipage">

<h5>Create multipage apps</h5>
Expand Down
30 changes: 30 additions & 0 deletions content/develop/tutorials/custom-components/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
title: Build custom components
slug: /develop/tutorials/custom-components
description: Step-by-step tutorials for building Streamlit custom components with the official component template.
keywords: custom components v2, tutorials, TypeScript, React, template, package-based
---

# Build 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.

<TileContainer layout="list">

<RefCard href="/develop/tutorials/custom-components/template-typescript">

<h5>Create a component with Pure TypeScript</h5>

Build a package-based component using Pure TypeScript and Vite. Best for lightweight components without framework overhead.

</RefCard>

<RefCard href="/develop/tutorials/custom-components/template-react">

<h5>Create a component with React + TypeScript</h5>

Build a package-based component using React, TypeScript, and Vite. Best for components with complex, state-driven UIs.

</RefCard>

</TileContainer>
Loading