PHPackages                             smart-cms/starter-kit - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. smart-cms/starter-kit

ActiveProject[Framework](/categories/framework)

smart-cms/starter-kit
=====================

The starter kit for the Smart CMS application.

023TypeScript

Since Apr 14Pushed 2mo agoCompare

[ Source](https://github.com/s-cms/starter)[ Packagist](https://packagist.org/packages/smart-cms/starter-kit)[ RSS](/packages/smart-cms-starter-kit/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

Project Documentation
=====================

[](#project-documentation)

Smart CMS project built with React + Zod + Inertia.js with validation and type safety.

Quick Start
-----------

[](#quick-start)

```
# Install dependencies
composer setup

# Start dev server
composer dev

# Build the project
npm run build
```

How to Use This Documentation
-----------------------------

[](#how-to-use-this-documentation)

### For Creating New Sections

[](#for-creating-new-sections)

1. **Read the [Universal Section Creation Guide](docs/universal-section-creation-guide.md)** - Learn the Smart CMS patterns, Zod schemas, and workflow
2. **Reference [Project Design System](docs/project-design-system.md)** - Get exact colors, components, and design patterns for this project
3. **Check existing sections** in `resources/js/sections/` for real examples
4. **Build and test** with `npm run build`

### Documentation Approach

[](#documentation-approach)

This project uses a **two-guide approach**:

- **Universal Guide** = Smart CMS stack patterns (works for any project)
- **Project Design System** = This project's specific choices (colors, components, etc.)

This separation allows the universal guide to be reused across different Smart CMS projects while keeping project-specific details separate.

---

Documentation Structure
-----------------------

[](#documentation-structure)

### Core Documentation (English)

[](#core-documentation-english)

#### [universal-section-creation-guide.md](docs/universal-section-creation-guide.md) ⭐ **START HERE**

[](#universal-section-creation-guidemd--start-here)

Universal guide for creating sections in any Smart CMS project. Technology stack-specific but project-agnostic.

**What's inside:**

- Smart CMS + Tailwind 4 + Laravel 12+ stack overview
- Complete Zod schema patterns
- Section creation workflow (3 steps)
- All available variable types (Image, Link, Navigation, etc.)
- System variables reference
- Project-specific context gathering template
- Best practices and validation patterns
- Complete code examples

#### [project-design-system.md](docs/project-design-system.md) ⭐ **PROJECT REFERENCE**

[](#project-design-systemmd--project-reference)

This project's specific design choices, colors, components, and patterns.

**What's inside:**

- Color palette with usage guidelines
- Typography (fonts, sizes, weights)
- Spacing standards
- Button component variants
- Kit components reference
- Animations and transitions
- Responsive patterns
- Common section templates

---

Core Concepts
-------------

[](#core-concepts)

### Creating a Section

[](#creating-a-section)

```
import z from "zod";

// 1. Schema
const mySchema = z.object({
  title: z.string().describe("Title"),
}).meta({
  id: "MySection",
  title: "My Section",
  component: MySection
});

// 2. Component
export default function MySection(props: z.infer) {
  return {props.title};
}

// 3. Build
// npm run build
```

### System Variables

[](#system-variables)

```
import { usePage } from "@inertiajs/react";

const { props: pageProps } = usePage();
const logo = pageProps.logo;
const companyName = pageProps.company_name;
```

### Using Components

[](#using-components)

```
import { Button } from '@/components/ui';
import { KitLink, KitImage } from '@/components/kit';

Contact

```

---

Available Sections
------------------

[](#available-sections)

- **Header** - Header with topbar, navbar, dropdown menu
- **Footer** - Footer with 4 columns
- **HeroBanner** - Main banner with background and CTA
- **ContentFlat** - Page content with sidebar

Available Components
--------------------

[](#available-components)

### UI Components

[](#ui-components)

- **Button** - Button with 3 variants (primary, secondary, outline)

### Kit Components

[](#kit-components)

- **KitLink** - Link with automatic routing
- **KitImage** - Image with lazy loading
- **KitIcon** - Icons
- **KitHeading** - Headings

Color Palette
-------------

[](#color-palette)

```
--color-primary: #001F54      /* Dark Blue */
--color-secondary: #D4A574    /* Gold */
--color-accent: #FFD700       /* Bright Yellow */
--color-dark: #0F1A2E         /* Dark */
--color-light: #F8F9FA        /* Light */
```

Typography
----------

[](#typography)

- **M PLUS Rounded 1c** - Headings
- **Exo 2** - Body text

Workflow
--------

[](#workflow)

1. Create section file `resources/js/sections/MySection.tsx`
2. Define Zod schema with `.meta()`
3. Implement React component
4. Run `npm run build`
5. Section will appear in admin panel

---

Technology Stack
----------------

[](#technology-stack)

- **Smart CMS** - Block-based content management system
- **Laravel 12+** - Backend framework
- **React** - Frontend framework
- **Inertia.js** - Server-side routing with SPA experience
- **Tailwind CSS v4** - Utility-first CSS framework
- **Zod** - TypeScript-first schema validation
- **TypeScript** - Type safety

Additional Resources
--------------------

[](#additional-resources)

- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Zod Documentation](https://zod.dev)
- [Inertia.js Documentation](https://inertiajs.com)
- [React Documentation](https://react.dev)

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance56

Moderate activity, may be stable

Popularity6

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

 Bus Factor1

Top contributor holds 58.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/17353886?v=4)[DiVotek](/maintainers/divotek)[@DiVotek](https://github.com/DiVotek)

---

Top Contributors

[![MaxBoiko21](https://avatars.githubusercontent.com/u/92517114?v=4)](https://github.com/MaxBoiko21 "MaxBoiko21 (17 commits)")[![TsukuroTadzaki](https://avatars.githubusercontent.com/u/40655949?v=4)](https://github.com/TsukuroTadzaki "TsukuroTadzaki (11 commits)")[![claude](https://avatars.githubusercontent.com/u/81847?v=4)](https://github.com/claude "claude (1 commits)")

### Embed Badge

![Health badge](/badges/smart-cms-starter-kit/health.svg)

```
[![Health](https://phpackages.com/badges/smart-cms-starter-kit/health.svg)](https://phpackages.com/packages/smart-cms-starter-kit)
```

###  Alternatives

[laravel/dusk

Laravel Dusk provides simple end-to-end testing and browser automation.

1.9k39.6M299](/packages/laravel-dusk)[nineinchnick/edatatables

Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin

173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf

LinkCloud Fast Hyperf

241.2k1](/packages/link-cloud-fast-hyperf)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)