stable

Components Overview

All available UI components in the Knowledge Core project

componentsuiastro

Components Overview

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

PropTypeDefaultDescription
type'info' | 'success' | 'warning' | 'error''info'Visual style
titlestring-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

PropTypeDescription
titlestringQuiz title
questionsQuizQuestion[]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

PropTypeDescription
titlestringExercise 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.js javascript 
const greeting = "Hello, World!";
console.log(greeting);

Usage

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

Props

PropTypeDefaultDescription
codestring-The code to display
langstring'plaintext'Programming language
titlestring-Optional filename
showLineNumbersbooleanfalseShow 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
  • SyncProgress - Cloud synchronization of progress
  • 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