Content Components Demo
A comprehensive showcase of all Keystatic content components
Keystatic Content Components Showcase
This post demonstrates all the different types of content components available in Keystatic, showing how they can be used in MDX content.
1. Wrapper Components
Wrapper components have an opening and closing tag, with content wrapped inside.
InfoBox Component
This is an information box that can contain rich markdown content. It’s perfect for highlighting important information in your content.
Be careful! This component uses a warning style to draw attention to cautionary information.
Great job! Use the success style to highlight achievements or completed steps.
Something went wrong. The error style helps to clearly communicate problems or errors.
Container Component
Containers help control the width and styling of content sections:
Narrow Container This content is inside a narrow container, which has a
constrained width compared to the normal layout. - It helps focus attention on important content - It creates visual hierarchy on the page - It can contain other components inside it
Boxed Container This content appears in a boxed container with a background
color and border.
You can nest components inside wrapper components!
2. Block Components
Block components are self-closing and don’t contain child content.
Playlist Component
My Favorite Songs
Relaxing Background Music
3. Inline Components
Inline components sit inline within text content.
This task is currently In Progresswhile some other tasks are To Do. Recently, we completed the documentation which is now Done, and the code is Ready for Review.
4. Mark Components
Mark components apply formatting to selected text.
The key point to remember is that content components make your content more interactive and engaging. These components provide a beautiful way to structure your content while maintaining the simplicity of Markdown syntax. The Keystatic editor makes it easy to insert and edit these components.
5. Repeating Components
Repeating components allow you to create collections of related components.
Keystatic has completely transformed how we manage content. The developer experience is unmatched, and our content team loves how intuitive it is.
As someone who works with content daily, I appreciate how Keystatic combines the power of structured content with the flexibility of markdown.
The content components feature is amazing. It gives us so much flexibility to create rich, interactive content without sacrificing performance.
Our content now looks consistent across the entire website thanks to Keystatic’s content components. It’s been a game-changer for our brand.
Combining Components
The real power comes when you combine multiple types of components together:
When working with content, remember that consistency is key. The current status of our style guide is Ready for Review.
Music Recommendations
Focus Music
Conclusion
Keystatic content components provide a powerful way to enhance your MDX content with interactive, reusable elements while maintaining the simplicity and flexibility of Markdown syntax.
Using these components helps create more engaging, structured content that’s both easier to manage for content creators and more enjoyable for readers.