Build Your First Component
In this guide, you'll create an announcement bar component in React, push it to Oaysus with a single command, and see it appear in the visual page builder. Once it's there, your marketing team can update the message anytime without touching code or waiting for deployments.
What you're building
Set up your environment
Install the CLI
npm install -g @oaysus/cliAuthenticate
oaysus loginEnter your email and click the magic link we send you.
Create a theme pack project
oaysus theme init my-components && cd my-componentsChoose React, Vue, or Svelte when prompted. We'll use React in this guide.
Create the component
Replace the example component with a simple announcement bar. Each component needs two files:
1export default function AnnouncementBar({ message }) {
2 return (
3 <div className="bg-blue-600 text-white py-3 px-4 text-center font-medium">
4 {message}
5 </div>
6 );
7}1{
2 "displayName": "Announcement Bar",
3 "props": {
4 "message": {
5 "type": "string",
6 "default": "Free shipping on orders over $50"
7 }
8 }
9}The schema defines what marketing can edit. They change the message, you never touch the code.
Push to Oaysus
oaysus theme pushUse it in the page builder
Install your theme pack
- 1Open your Oaysus dashboard
- 2Go to Content → Theme Packs
- 3Click Install on your theme pack
Build a page
- 1Go to Pages → Create Page
- 2Drag the Announcement Bar onto the canvas
- 3Edit the message and click Publish
Done. Your marketing team is unblocked.
Next time they need to update the announcement, they do it themselves. "20% off this weekend" or "New arrivals in stock." No ticket, no deploy, no waiting on you.
- Add more props like colors, images, links, and rich text
- Explore the CLI to validate, build, and manage versions
- Build a full theme pack with hero sections, features, and more