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. import * as Card from '$lib/components/ui/card'; import CategoryComponentRecursive from './category.svelte'; import type { Category } from '../schemas/category'; let { category }: { category: Category } = $props(); {category.name} {#each category.categories as childCategory} {/each} 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.

Mar 8, 2025 - 23:25

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.




  
    {category.name}
  
  
    {#each category.categories as childCategory}
       category={childCategory} />
    {/each}

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.