Content Components
Content Components
36 components for rich documentation content.
Code
Syntax-highlighted code blocks with copy button.
function greet(name: string) {
return `Hello, ${name}!`;
}function greet(name: string) {
return `Hello, ${name}!`;
} Callout
Highlight important information with different types.
Note
Pro Tip
Helpful tips for users.
Warning
Danger
Info
Tabs
Organize content in tabbed panels.
bash npm install astroria-docs bash pnpm add astroria-docs bash yarn add astroria-docs bash bun add astroria-docs Table
Responsive data tables.
Accordion
Collapsible content sections.
What is Astroria?
Astroria is a premium documentation theme for Astro 5.
How to customize?
Edit CSS variables in src/styles/global.css.
Is it free?
Yes, Astroria is open source under MIT license.
Blockquote
Styled quotes with attribution.
Build faster websites with less client-side JavaScript.
API Reference
Document functions and methods.
getCollection getCollection(name: string, filter?: Function): Promise<Entry[]> name string β Collection name filter Function β Optional filter function Timeline
Display chronological events.
Initial release
Public beta testing
Internal testing
Steps
Numbered step-by-step guides.
InlineCode
Styled inline code snippets.
Use npm install to get started. You can specify language hints like const x = 42 .
CodeGroup
Group multiple code blocks with synchronized tabs.
bash npm install astroria-docs bash pnpm add astroria-docs
bash yarn add astroria-docs
LinkPreview
Show preview cards on link hover.
Visit Astro Docs
Astro
Build faster websites with modern web architecture
https://astro.build
FileTree
Display file/folder structures.
Project Structure
src
- components
- content
- layouts
- index.astro
- package.json
- astro.config.mjs
Kbd
Display keyboard shortcuts.
Press Ctrl + K to open search, or Esc to close.
Mark
Highlight important text.
Default yellow highlight or custom colors like blue , red , and purple .
Abbr
Abbreviations with tooltips.
HTML HyperText Markup Language and CSS Cascading Style Sheets are fundamental web technologies.
Details
Collapsible content sections.
What is Astroria Docs?
A premium documentation theme built with Astro 5, featuring 70+ components and optimized for performance.
Bordered variant
Content with bordered styling.
Filled variant
Content with filled background.
Figure
Images with captions and attribution.
Footnote
Add footnotes to your content.
Main text with reference
Glossary
Define terms with hover tooltips.
- SSG
-
SSG
and
- SSR
-
SSR
are rendering modes.
Changelog
Version history display.
v
patchDiffViewer
Side-by-side code comparison.
function hello() {
console.log('old');
}function hello() {
console.log('updated');
return true;
}Mermaid
Render Mermaid diagrams.
Math
Display mathematical formulas with KaTeX.
E = mc^2 or inline:
\\sum_{i=1}^n x_iVideoEmbed
Embed videos from YouTube, Vimeo, or direct sources.
ImageGallery
Responsive image gallery with lightbox.
FeatureMatrix
Compare features across options.
| Feature | Free | Pro | Enterprise |
|---|---|---|---|
| Unlimited Users | |||
| 10GB Storage | |||
| Priority Support | |||
| API Access | |||
| Custom Domain |
StatsCounter
Animated statistics counters.
TestimonialCarousel
Rotating customer testimonials.
"Best documentation theme I've used. Clean, fast, and feature-rich."
"The component library is incredible. Saved hours of development time."
"Performance is outstanding. Our docs load instantly now."
FAQAccordion
Frequently asked questions.
Is Astroria free?
Can I customize the theme?
Does it support dark mode?
What's the browser support?
PricingTable
Multi-tier pricing display.
Starter
Perfect for personal projects
- 5 projects
- 1GB storage
- Community support
Pro
For professional developers
- Unlimited projects
- 50GB storage
- Priority support
- Custom domain
Enterprise
For large teams
- Everything in Pro
- Unlimited storage
- 24/7 phone support
- SLA guarantee
- Custom integrations
AlertBanner
Site-wide announcement banner.
π New release: Astroria Docs v1.2 is now available!
ProgressBar
Visual progress indicator.
CopyButton
Copy text to clipboard.
npm install astroria-docsExpandCollapse
Expandable content sections.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HighlightBox
Highlighted content boxes.
Always test your code thoroughly before deploying to production.
This feature requires Astro 5.0 or higher.
Use semantic HTML elements for better accessibility.