Laravel + Vue Starter Kit

A production-ready boilerplate with 95+ components, atomic design architecture, and full Storybook documentation. Clone, customize, ship.

95+ Components
3 Layouts
5 Page Templates
Vue + Blade Dual Support
What's Included

Everything You Need to Build

Skip weeks of setup. Start with a complete design system that's ready to customize.

Atomic Design

31 atoms, 36 molecules, and 28 organisms organized for predictable composition and reuse.

Design Tokens

Colors, spacing, typography centralized in SCSS variables. Change your brand in one place.

Vue + Blade

Every component works in both Vue 3 SFCs and Laravel Blade templates with identical props.

Storybook Docs

Interactive documentation for every component with props, variations, and usage examples.

Vite Powered

Lightning-fast HMR in development and optimized production builds out of the box.

Fully Responsive

Fluid typography with Utopia scale and responsive components for every screen size.

Starter Templates

Ready-to-Use Page Layouts

See how components compose into real interfaces. Each template is a working demo you can build from.

Dashboard

Admin Dashboard

Stats cards, recent orders table, activity feed, and quick actions sidebar.

Sidebar Stats Grid Data Table
View Template
Data Table

Entity List (CRUD)

Searchable data table with filters, bulk actions, pagination, and row actions.

Search Filters Pagination
View Template
Detail View

Entity Detail

Order detail page with items table, timeline, customer info, and action sidebar.

Timeline Info Cards Actions
View Template
Edit Form

Entity Form

Full CRUD edit form with sections, validation states, and sticky action sidebar.

Form Sections Validation Actions
View Template
Auth

Authentication Pages

Login and register pages with split layout, social auth buttons, and brand panel.

Split Layout Social Auth Forms
View Template
Landing

Marketing Landing

Full marketing page with hero, features, pricing table, testimonials, and FAQ.

Hero Pricing FAQ
View Template
Quick Start

Up and Running in Minutes

Clone the repo, install dependencies, and start building. Here's how.

1

Clone the Repository

Get the starter kit from GitHub.

git clone https://github.com/SheetLabelscom/sli-design-system.git my-app
2

Install Dependencies

Install both PHP and Node.js packages.

cd my-app && composer install && npm install
3

Configure Environment

Copy the example env file and generate an app key.

cp .env.example .env && php artisan key:generate
4

Customize Your Brand

Update colors and tokens in the SCSS variables file.

resources/sass/abstracts/_variables.scss
5

Start Development

Run the Laravel server and Vite dev server.

php artisan serve & npm run dev
Preview

Component Samples

A taste of what's included. Explore the full library in Storybook.

Buttons
Badges
Active Pending Error
Input
Checkbox
Alert
Avatar
JD
AB
XY

Ready to Build?

Clone the repo and start shipping your next project faster than ever.