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
This is an info callout for general notes.
This is a success callout for positive confirmations.
This is a warning callout for important warnings.
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.
function greet(name) {
return `Hello, ${name}!`;
}function greet(name: string): string {
return `Hello, ${name}!`;
}def greet(name):
return f"Hello, {name}!"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
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
nameprop - It outputs “Hello, [Name]!”
- Use TypeScript for the props definition
Implement state management
Implement a simple counter with vanilla JavaScript in an Astro component.
Create custom hook
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.
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
- 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