Embed your Content Growth articles anywhere with beautiful, customizable components
npm install @contentgrowth/content-widgetEmbed your Content Growth content anywhere with beautiful, customizable components.
- 🎨 Beautiful UI - Pre-styled components with light/dark themes
- 🚀 Multi-Framework - React, Vue, Astro, and Vanilla JS support
- 📦 Zero Config - Works out of the box with sensible defaults
- 🎯 Type Safe - Full TypeScript support
- âš¡ Fast - Built-in caching and optimized performance
- 🎨 Customizable - Multiple layouts and display modes
- 📱 Responsive - Mobile-first design
``bash`
npm install @content-growth/content-widget
`html
`
`jsx
import { ContentList } from '@content-growth/content-widget/react';
import '@content-growth/content-widget/styles.css';
function App() {
return
}
`
With Hooks:
`jsx
import { useArticles } from '@content-growth/content-widget/react';
function CustomContentList() {
const { articles, loading, error } = useArticles({
apiKey: 'pk_your_key_here',
page: 1,
limit: 12
});
if (loading) return
return (
{article.summary}
$3
vue
`With Composables:
vue
Loading...
Error: {{ error.message }}
{{ article.title }}
{{ article.summary }}
`$3
astro
---
import { ContentList } from '@content-growth/content-widget/astro';
import '@content-growth/content-widget/styles.css';
---
`$3
typescript
import { ContentGrowthClient } from '@content-growth/content-widget/core';const client = new ContentGrowthClient({
apiKey: 'pk_your_key_here'
});
const { articles, pagination } = await client.listArticles({
page: 1,
limit: 12,
tags: ['tutorial']
});
`Components
$3
javascript
import { ContentGrowthWidget } from '@content-growth/content-widget/widget';const widget = new ContentGrowthWidget(container, {
apiKey: 'pk_your_key_here',
baseUrl: 'https://api.content-growth.com',
layoutMode: 'cards', // 'cards' | 'rows'
displayMode: 'comfortable', // 'compact' | 'comfortable' | 'spacious'
theme: 'light', // 'light' | 'dark'
pageSize: 12,
tags: ['tutorial', 'guide'],
category: 'guides',
viewerMode: 'inline', // 'inline' | 'modal' | 'external'
mode: 'list' // 'list' | 'article-only'
});
`$3
ContentList:
jsx
layout="cards"
displayMode="comfortable"
theme="light"
pageSize={12}
tags={['tutorial', 'guide']}
category="guides"
showPagination={true}
/>
`ContentViewer:
jsx
uuid="article-uuid"
theme="light"
showBackButton={true}
backUrl="/articles"
/>
`Hooks:
-
- Fetch articles list
- useArticle(options) - Fetch single article
- useCategories(options) - Fetch categories
- useTags(options) - Fetch tags$3
ContentList:
`vue
layout="cards"
display-mode="comfortable"
theme="light"
:page-size="12"
:tags="['tutorial', 'guide']"
category="guides"
:show-pagination="true"
/>
`ContentViewer:
vue
uuid="article-uuid"
theme="light"
:show-back-button="true"
back-url="/articles"
/>
`Composables:
-
- Fetch articles list
- useArticle(options) - Fetch single article
- useCategories(options) - Fetch categories
- useTags(options) - Fetch tags$3
ContentList:
`astro
layout="cards"
displayMode="comfortable"
theme="light"
pageSize={12}
tags={['tutorial', 'guide']}
category="guides"
showPagination={true}
/>
`ContentViewer:
astro
uuid={uuid}
theme="light"
showBackButton={true}
backUrl="/articles"
/>
`ContentCard:
A standalone article card component. Use it to display individual articles outside of ContentList.
astro
slug="my-article-slug"
linkPattern="/articles/{slug}"
/>
uuid="article-uuid"
/>
linkPattern="/articles/{slug}"
showSummary={true}
showTags={true}
/>
`| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
| string | - | Your API key (required unless article is provided) |
| article | Article | - | Pre-loaded article data (skips API fetch) |
| slug | string | - | Load specific article by slug |
| uuid | string | - | Load specific article by UUID |
| linkPattern | string | '/articles/{slug}' | URL pattern for link |
| linkTarget | string | - | Link target attribute |
| showSummary | boolean | true | Show article summary |
| summaryMaxLength | number | - | Truncate summary at length |
| showTags | boolean | false | Show article tags |
| showCategory | boolean | true | Show category badge |FeaturedCard:
A compact card displaying the Featured Summary with customizable styling. Perfect for landing pages.
`astro
category="announce"
linkPattern="/articles/{slug}"
layout="horizontal"
borderStyle="dashed"
borderColor="#e5e7eb"
padding="20px"
ctaText="Read full story"
/>
slug="my-article-slug"
linkPattern="/articles/{slug}"
/>
linkPattern="/articles/{slug}"
/>
`| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
| string | - | Your API key (required unless article is provided) |
| article | Article | - | Pre-loaded article data (skips API fetch) |
| slug | string | - | Load specific article by slug |
| uuid | string | - | Load specific article by UUID |
| category | string | - | Filter by category |
| tags | string[] | [] | Filter by tags |
| layout | 'vertical' \| 'horizontal' | auto | Card layout (auto uses article setting) |
| borderStyle | 'none' \| 'line' \| 'dashed' | 'none' | Card border style |
| borderColor | string | '#e5e7eb' | Border color (CSS value) |
| cardBackground | string | 'none' | Card background ('none' = transparent) |
| itemsBackground | string | '#f3f4f6' | Background for list/quote section |
| padding | string | - | Custom padding (e.g., '10px', '2rem 3rem') |
| ctaText | string | 'Read full story' | Call-to-action text |
| showAuthor | boolean | false | Show author name |
| showReadingTime | boolean | false | Show reading time |
| linkPattern | string | '/articles/{slug}' | URL pattern for link |Featured Summary Types:
FeaturedCard supports structured JSON summaries generated via the portal wizard:
| Type | Description |
|------|-------------|
|
list | Intro text on left, bulleted key points on right |
| steps | Intro text on left, numbered action steps on right |
| quote | Intro text on left, styled pullquote on right |
| classic | Simple text summary (legacy) |Featured Cards List:
Display all articles as FeaturedCards in a grid using
displayAs:`astro
displayAs="featured-cards"
linkPattern="/articles/{slug}"
pageSize={12}
/>
`| displayAs Value | Description |
|-----------------|-------------|
|
| Standard card/row layout |
| 'featured-cards' | Renders each article as a FeaturedCard |API Client
$3
`typescript
import { ContentGrowthClient } from '@content-growth/content-widget/core';const client = new ContentGrowthClient({
apiKey: 'pk_your_key_here',
baseUrl: 'https://api.content-growth.com', // optional
cacheTTL: 300000, // 5 minutes, optional
debug: false // optional
});
`$3
####
typescript
const { articles, pagination } = await client.listArticles({
page: 1,
limit: 12,
tags: ['tutorial', 'guide'],
category: 'guides'
});
`####
typescript
const article = await client.getArticle('article-uuid');
`####
typescript
const { categories } = await client.getCategories();
`####
typescript
const { tags } = await client.getTags();
`####
typescript
client.clearCache();
`Styling
Import the CSS file:
javascript
import '@content-growth/content-widget/styles.css';
`$3
Override CSS variables:
css
.cg-content-list {
--cg-primary: #3b82f6;
--cg-primary-hover: #2563eb;
--cg-bg: #ffffff;
--cg-bg-secondary: #f9fafb;
--cg-text: #1f2937;
--cg-text-secondary: #6b7280;
--cg-border: #e5e7eb;
--cg-radius: 12px;
}
`TypeScript
Full TypeScript support with exported types:
typescript
import type {
Article,
ArticleWithContent,
Pagination,
Category,
Tag,
ClientConfig,
ListArticlesOptions,
ContentListProps,
ContentViewerProps
} from '@content-growth/content-widget/core';
`Getting Your API Key
1. Sign in to Content Growth
2. Go to Settings → API Keys
3. Create a new API key
4. Copy the key (starts with
)Examples
$3
`tsx
// app/articles/page.tsx
import { ContentList } from '@content-growth/content-widget/react';
import '@content-growth/content-widget/styles.css';export default function ArticlesPage() {
return (
Articles
);
}
`$3
vue
Articles
`$3
html
``MIT