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.