Skip to content
stable

Components Overview

All available UI components in the Knowledge Core project

componentsuiastro

Knowledge Core provides an extensive collection of reusable Astro components. All components support dark mode and are designed with accessibility in mind.

Import

All components are imported from the @knowledge-core/ui package:

import { Callout, Tabs, TabPanel, Quiz, Hint } from '@knowledge-core/ui';

Callout

Highlighted notice boxes for important information.

Variants

Information

This is an info callout for general notes.

Success

This is a success callout for positive confirmations.

Warning

This is a warning callout for important warnings.

Error

This is an error callout for critical error messages.

Usage

<Callout type="info" title="Title">
  Callout content
</Callout>

Props

Prop Type Default Description
type 'info' | 'success' | 'warning' | 'error' 'info' Visual style
title string - Optional heading

Tabs

Organize content in switchable tabs.

Usage

<Tabs tabs={[
  { label: 'Tab 1', value: 'tab1' },
  { label: 'Tab 2', value: 'tab2' }
]}>
  <TabPanel value="tab1">Tab 1 content</TabPanel>
  <TabPanel value="tab2">Tab 2 content</TabPanel>
</Tabs>

Hint

Collapsible hints, ideal for tips or solutions.

Usage

<Hint title="Show tip">
  Hidden content here
</Hint>

Quiz

Interactive quizzes with automatic evaluation.

Knowledge Test: Astro

1. What is Astro?

2. What file extension do Astro components use?

Usage

<Quiz 
  title="My Quiz"
  questions={[
    {
      question: "Question here?",
      options: ["Option A", "Option B", "Option C"],
      correctAnswer: 0,
      explanation: "Explanation of the correct answer"
    }
  ]}
/>

Props

Prop Type Description
title string Quiz title
questions QuizQuestion[] Array of questions

Exercise

Marked exercise tasks with difficulty level.

Create your first component

Easy

Create a new Astro component called Greeting.astro that accepts a name as a prop and displays a personalized greeting.

Requirements:

  • The component accepts a name prop
  • It outputs “Hello, [Name]!”
  • Use TypeScript for the props definition

Implement state management

Medium

Implement a simple counter with vanilla JavaScript in an Astro component.

Create custom hook

Hard

Create a reusable sync mechanism for localStorage.

Usage

<Exercise title="Exercise title" difficulty="medium">
  Exercise description...
</Exercise>

Props

Prop Type Description
title string Exercise title
difficulty 'easy' | 'medium' | 'hard' Difficulty level

Card

Flexible card component for content grouping.

Simple Card

This is a simple card without a link.

Clickable Card

This card is linked and clickable.

Usage

<Card title="Title" href="/optional/link">
  Card content
</Card>

CodeBlock

Code display with syntax highlighting and copy button.

example.jsjavascript
const greeting = "Hello, World!";
console.log(greeting);

Usage

<CodeBlock 
  code="const x = 1;"
  lang="javascript"
  title="script.js"
  showLineNumbers={true}
/>

Props

Prop Type Default Description
code string - The code to display
lang string 'plaintext' Programming language
title string - Optional filename
showLineNumbers boolean false Show line numbers

More Components

Layout Components

  • AppShell - Main layout with header and footer
  • NavBar - Navigation with dark mode, search, and mobile menu
  • Footer - Page footer with links
  • SidebarLayout - Two-column layout with sidebar

Course Components

  • CourseCard - Course preview with level and progress
  • LessonNav - Navigation between lessons
  • ProgressBar - Progress indicator
  • LessonComplete - Completion marker for lessons
  • TotalProgress - Total progress across all courses

Utility Components

  • StorageUtils - Safe localStorage functions
  • SearchBar - Full-text search with Pagefind
  • FontSizeControl - Font size adjustment
  • QuizToggle - Show/hide quizzes

Next Steps