Theme Packs

Creating Theme Packs

Theme packs are bundles of related components that can be installed together with a single click. Package your components into cohesive collections for easy distribution, versioning, and reuse across multiple projects.

What is a Theme Pack?

A theme pack is a collection of related components bundled together. Each component lives as its own self-contained island, independent, fully hydrated, and ready to render. Grouped together, they form a cohesive archipelago of building blocks for crafting beautiful pages.

Creating a Theme Pack

1. Initialize your project

Start with a new component project using the CLI:

Terminal
oaysus init marketing-starter

Choose your framework when prompted. This creates a project with a starter component.

2. Configure your theme pack

Theme pack metadata lives in package.json. Add display name, category, and tags for discoverability:

package.json
1{
2  "name": "marketing-starter",
3  "version": "1.0.0",
4  "description": "Landing page components for marketing sites",
5  "oaysus": {
6    "displayName": "Marketing Starter",
7    "category": "marketing",
8    "tags": ["landing-page", "saas", "startup"]
9  },
10  "framework": "react"
11}

3. Add a banner image

Add a marketing/banner.png file to display in the theme pack gallery. This image appears when users browse and preview your theme pack.

Dimensions:1200 x 630px recommended (16:9 aspect ratio)
Format:PNG or JPG
Location:marketing/banner.png

4. Add components

Use the CLI to scaffold new components, or create them manually in the components/ directory:

Terminal
oaysus create FeatureGrid

A typical theme pack structure looks like this:

marketing-starter/
├── components/
│   ├── HeroBanner/
│   │   ├── index.tsx
│   │   └── schema.json
│   ├── FeatureGrid/
│   │   ├── index.tsx
│   │   └── schema.json
│   ├── Testimonials/
│   │   ├── index.tsx
│   │   └── schema.json
│   └── PricingTable/
│       ├── index.tsx
│       └── schema.json
├── marketing/
│   └── banner.png
├── shared/
├── package.json
└── README.md

5. Validate your pack

Check for errors before publishing:

Terminal
oaysus validate
✓ package.json valid
✓ 4 components discovered
✓ All schemas valid
✓ Ready to push!

Publishing Your Theme Pack

Push your theme pack to Oaysus with a single command:

Terminal
oaysus push
✓ Validated package
✓ Built 4 components
✓ Bundled dependencies
✓ Uploaded to Oaysus
✓ Published: Marketing Starter v1.0.0

Your theme pack is now available. Go to Content → Theme Packs in the dashboard to install it.

Versioning

Theme pack versions are controlled by the version field in your package.json. We recommend semantic versioning:

1.0.0 → 1.0.1Bug fixes, no breaking changes
1.0.0 → 1.1.0New components added
1.0.0 → 2.0.0Breaking changes to existing components

To publish an update, bump the version in package.json and push:

# Update version in package.json, then:
oaysus push
✓ Published: Marketing Starter v1.1.0

Installing Theme Packs

After pushing, install your theme pack from the Oaysus dashboard:

  1. 1Go to Content → Theme Packs in the dashboard
  2. 2Find your theme pack and click Install
  3. 3All components from the pack are now available in the page builder
  4. 4Drag components onto your pages and customize their content

Categories

Set a category in your package.json to help users discover your theme pack:

marketing
ecommerce
portfolio
blog
landing-page
saas
agency
business
Continue to Page Builder