- Installed necessary MDX and Prism dependencies
- Updated vite.config.js to include MDX plugin
- Created example MDX file in src/pages
- Imported example MDX file in App component
- Set up MDXProvider and ThemeProvider in main.jsx
- Created theme.js with Prism styles
- Registered Prism component in components.js"
This documentation provides an overview of the reusable components (Card
, Button
, and CodeBlock
) integrated into your UI Maxing project. Each component leverages Theme UI for dynamic styling.
A flexible container for displaying content like text, images, or actions.
import Card from '../components/Card';
<Card>
<h3>Card Title</h3>
<p>This is a reusable card component styled with Theme UI.</p>
</Card>
Prop | Type | Default | Description |
---|---|---|---|
children |
node |
Required | Content to be displayed in the card. |
The Card
component uses the following styles from theme.js
:
styles: {
card: {
backgroundColor: 'background',
borderColor: 'muted',
borderRadius: '8px',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
fontSize: '1rem',
},
},
A customizable button component with support for styling variants.
import Button from '../components/Button';
<Button variant="primary" onClick={() => alert('Primary Button Clicked')}>
Click Me
</Button>
<Button variant="secondary" onClick={() => alert('Secondary Button Clicked')}>
Learn More
</Button>
Prop | Type | Default | Description |
---|---|---|---|
children |
node |
Required | Content inside the button. |
variant |
string |
'primary' |
Style variant (e.g., primary , secondary ). |
...props |
any |
N/A | Additional props like onClick . |
Button styles are defined under buttons
in theme.js
:
buttons: {
primary: {
backgroundColor: 'primary',
color: 'background',
'&:hover': {
backgroundColor: 'secondary',
},
},
secondary: {
backgroundColor: 'secondary',
color: 'background',
'&:hover': {
backgroundColor: 'primary',
},
},
},
A component for rendering styled code snippets with syntax highlighting.
import CodeBlock from '../components/CodeBlock';
<CodeBlock />
Prop | Type | Default | Description |
---|---|---|---|
children |
node |
Optional | Custom code snippet to display. |
The CodeBlock
component uses pre
and code
styles from theme.js
:
styles: {
pre: {
fontSize: '0.9rem',
padding: '1rem',
backgroundColor: 'codeBg',
borderRadius: '8px',
overflowX: 'auto',
color: 'codeText',
code: {
fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
},
},
code: {
color: 'inherit',
},
},
All components dynamically pull styles from the theme.js
configuration. Modify theme.js
to adjust the look and feel of the components.
Example theme.js
:
export default {
colors: {
text: '#333',
background: '#fff',
primary: '#07c',
secondary: '#ff4081',
muted: '#f6f8fa',
codeBg: '#282c34',
codeText: '#61dafb',
},
styles: { ... },
buttons: { ... },
};
A versatile component for displaying contextual messages like info, success, or warnings.
import Alert from '../components/Alert';
<Alert variant="info">This is an informational alert.</Alert>
<Alert variant="success">Operation completed successfully!</Alert>
<Alert variant="warning">Please proceed with caution.</Alert>
A component for highlighting quotes or references in a stylish way.
import Blockquote from '../components/Blockquote';
<Blockquote>
"The only way to do great work is to love what you do." – Steve Jobs
</Blockquote>
A responsive table component for displaying data in an organized manner.
import Table from '../components/Table';
<Table
headers={['Feature', 'Description']}
rows={[
['MDX Support', 'Embed React components in Markdown.'],
['Theme UI', 'Style components with a theme-based system.'],
['PrismJS', 'Syntax highlighting for code snippets.'],
]}
/>
These components use new theme values. Update theme.js
with the following:
colors: {
success: '#28a745',
successBg: '#e6f4ea',
successText: '#155724',
warning: '#ffc107',
warningBg: '#fff3cd',
warningText: '#856404',
},
styles: {
blockquote: {
fontStyle: 'italic',
borderLeft: '4px solid',
paddingLeft: '1rem',
},
},