Hello! In our last session, we took the ProfileCard component and styled it from scratch using TailwindCSS, completely replacing the traditional <style> block. You now have a good grasp of how to use utility classes to build custom designs quickly.
So far, our ProfileCard has its content—name, bio, and avatar—hard-coded directly inside it. This works for a single instance, but it's not reusable. What if you wanted to display a whole team of people? Today, we'll address this by learning how to structure Svelte applications by composing components. You'll take your standalone ProfileCard and render it inside a "parent" page, creating the fundamental parent-child relationship that is the backbone of modern web applications. This process will feel very familiar, drawing on concepts similar to how you'd build a UI in React or Next.js.
By the end of this lesson, you will have created a simple page that imports and displays multiple instances of your ProfileCard component, setting the stage for making them dynamic in our next lesson.
The Component Import Pattern
In Svelte, just like in other component-based frameworks, we build complex user interfaces by nesting smaller, self-contained components. A parent component (like a page) can import and use any number of child components (like buttons, forms, or our ProfileCard).
The following video from the "Svelte 5 Basics" course provides a crystal-clear demonstration of this exact pattern. It shows how to create a Header component and then import and use it within a page. Pay close attention to the import statement in the <script> block and how the component is then used like a custom HTML tag in the markup.
Svelte 5 Basics - Complete Svelte 5 Course for Beginners
This video by Syntax is a great introduction to Svelte 5.
Watch the segment from this section where the instructor creates, imports, and renders a Header component. Notice the comparison he makes to other frameworks like React.
As you saw, the pattern is straightforward:
- Import the component in the parent's
<script>section. - Render the component in the parent's markup using an uppercase, self-closing tag (e.g.,
<Header />).
Building a "Meet the Team" Page
Now, let's apply this concept to our own project. We'll use the main page, src/routes/+page.svelte, as our parent component and render multiple ProfileCard children within it.
1. Prepare the Parent Component
Open src/routes/+page.svelte. This file represents the root page of your application. Clear out any existing content inside it. Your file should be empty.
2. Import the Child Component
First, add a <script> block at the top of the file. Inside it, import your ProfileCard component.
<script>
import ProfileCard from '$lib/components/ProfileCard.svelte';
</script>
A quick note on the path: $lib is a special alias in SvelteKit that points directly to the src/lib directory. This is a convenient shortcut that saves you from writing relative paths like ../lib/components/....
3. Render the Child Component
Now, below the <script> block, render a single instance of the ProfileCard.
<script>
import ProfileCard from '$lib/components/ProfileCard.svelte';
</script>
<ProfileCard />
Save the file and look at your browser. You should see the "Alex Doe" profile card, now being rendered by +page.svelte!
4. Composing Multiple Components
A single card is great, but the real power of components is reusability. Let's create a simple "team" section by rendering three cards. To make them look good, we'll wrap them in a div and use the Tailwind flexbox utilities you're familiar with.
Update your +page.svelte file to look like this:
<script>
import ProfileCard from '$lib/components/ProfileCard.svelte';
</script>
<div class="flex min-h-screen items-center justify-center gap-8 bg-slate-100 p-8">
<ProfileCard />
<ProfileCard />
<ProfileCard />
</div>
Now check your browser. You should see three identical profile cards, nicely arranged in a row. You've just built a new UI by composing existing components.
This is a fundamental concept, and it's worth seeing it explained in text as well. The following article from Contentful offers a concise summary.
Svelte tutorial: Building an app using Svelte 5 | Contentful
This article from Contentful gives a great overview of Svelte 5 basics.
Please read the section titled "Using your Svelte component in your app". You can find it by searching for that heading. Focus on the explanation of how one component is imported and then used within another. This reinforces exactly what we just did.
Conclusion
In this lesson, you made the crucial transition from building isolated components to composing them into a larger UI. You saw how a parent component (+page.svelte) can import and render child components (ProfileCard), a pattern that is central to building scalable applications.
Key Takeaways:
- Parent-Child Relationship: UIs are built by nesting components within one another.
- Import Syntax: Child components are imported using standard JavaScript
importstatements within the parent's<script>block. - Render Syntax: Imported components are used in the markup just like custom HTML tags, typically with an uppercase first letter (e.g.,
<MyComponent />). - Composition: You can render multiple instances of the same child component to build lists and grids, promoting code reuse.
Of course, you've probably noticed the major limitation: all three of our profile cards are identical. They all show "Alex Doe" because that data is hard-coded within the ProfileCard component itself.
In our next lesson, we will solve this problem by learning how to pass data from a parent to a child using props. You'll learn how to use the $props() rune to make your ProfileCard truly dynamic and reusable.