Recursive components

Given the recursive structure of my project I have to render the Category multiple times calling itself.
Fortunately in svelte that is not a problem.
My component file is called category.svelte and the only thing I need to do is importing category.svelte from within category.svelte again. I named the component CategoryComponentRecursive as you can see below.

<script lang="ts"> import * as Card from '$lib/components/ui/card'; import CategoryComponentRecursive from './category.svelte'; import type { Category } from '../schemas/category'; let { category }: { category: Category } = $props(); </script> <Card.Root> <Card.Header> <Card.Title>{category.name}</Card.Title> </Card.Header> <Card.Content> {#each category.categories as childCategory} <CategoryComponentRecursive category={childCategory} /> {/each} </Card.Content> </Card.Root> 

I have a category component which is a shadcn svelte card and this calls itself if child categories where detected.
You can look up the category component in the repo.