ponyo-ui
v0.0.9
Published
Reusable React component kit with a built-in company theme system.
Readme
Ponyo UI – Developer Guide
Reusable React component kit with a built-in company theme system.
Install
npm install ponyo-ui
# or
yarn add ponyo-ui
pnpm add ponyo-uiQuick Start (consumer app)
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider, Button } from "ponyo-ui";
import "ponyo-ui/dist/ponyo-ui.css";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<ThemeProvider>
<Button variant="primary">Hello Ponyo</Button>
</ThemeProvider>
</StrictMode>
);Switch company / theme
import { useTheme } from "ponyo-ui";
function CompanySwitcher() {
const { companyId, companyData, setCompanyId } = useTheme();
return (
<div>
<p>Current: {companyData.name}</p>
<p>Theme: {companyData.theme}</p>
<button onClick={() => setCompanyId("APAT")}>APAT</button>
<button onClick={() => setCompanyId("TBTech")}>TBTech</button>
<button onClick={() => setCompanyId("NewCo")}>NewCo</button>
</div>
);
}Notes:
setCompanyIdaccepts uppercase/lowercase. Selected company persists inlocalStorage(selected_company_id).<ThemeProvider>appliesdata-theme="<theme-name>"on<html>.- Remember to import the CSS bundle (
ponyo-ui/dist/ponyo-ui.css).
Company/Theming Reference
Exports from ponyo-ui:
companyConfigData,selectableCompanies,availableCompanies,defaultCompany- Types:
CompanyID,CompanyConfig,Theme
Current companies:
APAT→theme-oceanTBTech→theme-forestNewCo→theme-desert
CSS variables set per theme (can be used in custom styles):
--color-primary
--color-secondary
--color-bg-main
--color-bg-sidebar
--color-text-main
--color-text-mutedAdd or adjust a company by editing src/config/companyConfig.ts (name, logo, theme, toggleColor). For new theme tokens update src/styles.css.
Library Development (this repo)
- Install deps:
npm install - Dev server:
npm run dev - Build package:
npm run build - Lint:
npm run lint
Build outputs are emitted to dist/ and are what consumers import.