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 Dec 25Pushed 4mo 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 1mo ago

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

19

—

LowBetter than 10% of packages

Maintenance50

Moderate activity, may be stable

Popularity6

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

 Bus Factor1

Top contributor holds 94.4% 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://www.gravatar.com/avatar/11e6638cc4909b4b9bb3a9345336c3c14fe1dc2991c3aa98da2301402e4dfa15?d=identicon)[divotek](/maintainers/divotek)

---

Top Contributors

[![MaxBoiko21](https://avatars.githubusercontent.com/u/92517114?v=4)](https://github.com/MaxBoiko21 "MaxBoiko21 (17 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/passport

Laravel Passport provides OAuth2 server support to Laravel.

3.4k85.0M532](/packages/laravel-passport)[nolimits4web/swiper

Most modern mobile touch slider and framework with hardware accelerated transitions

41.8k177.2k1](/packages/nolimits4web-swiper)[laravel/dusk

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

1.9k36.7M259](/packages/laravel-dusk)[laravel/prompts

Add beautiful and user-friendly forms to your command-line applications.

712181.8M596](/packages/laravel-prompts)[cakephp/chronos

A simple API extension for DateTime.

1.4k47.7M121](/packages/cakephp-chronos)[laravel/pail

Easily delve into your Laravel application's log files directly from the command line.

91545.3M590](/packages/laravel-pail)

PHPackages © 2026

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