Verified authors · Razorpay secured

contact@dev3.tech

DEV3 Technologies

Free code snippets

Free code snippets

Small, self-contained patterns from real DEV3 products, each explained, with a live preview where it makes sense. Copy them into your project; commercial use is fine.

Browse by stack Most copied

200
snippets: 7
stacks: 1
copies (top 6)

Browse by stack

Tailwind CSS40 snippets React / Next.js30 snippets Laravel45 snippets Filament25 snippets Flutter30 snippets WordPress28 snippets WooCommerce2 snippets

Most copied

stat-cards.html

<dl class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <div class="rounded-xl border border-slate-200 bg-white p-5">
    <dt class="truncate text-sm text-slate-500">Revenue</dt>
    <dd class="mt-2 flex items-baseline justify-between">
      <span class="text-2xl font-semibold tabular-nums text-slate-900…
      <span class="inline-flex items-center gap-1 rounded-full bg-eme…
        <svg class="size-3" viewBox="0 0 12 12" fill="currentColor" a…
        <span class="sr-only">Increased by</span>12.4%
      </span>

Tailwind CSS · Dashboard widgetsAdmin stat cards with trend badgesA row of KPI cards showing a label, a large value and a coloured up or down trend badge with an accessible description.statskpibadge1

All snippets

DocumentNumber.php

final class DocumentNumber
{
    /**
     * Call inside the same transaction that saves the invoice. If th…
     * transaction rolls back, the counter rolls back too: no gaps.
     */
    public static function next(string $prefix = 'INV', ?int $year = …
    {
        $year ??= (int) now()->format('Y');

Laravel · DatabaseYearly invoice numbering sequenceGap-free invoice numbers such as INV-2026-000042 using one locked counter row per year and prefix, safe under concurrent requests.invoicesequencetransactions

#!/usr/bin/env bash
# Generate and refresh translation files for a theme or plugin.
# Requires WP-CLI with the i18n command package:  wp package install …
set -euo pipefail
TEXT_DOMAIN="${TEXT_DOMAIN:-acme-theme}"
ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
LANG_DIR="$ROOT/languages"
POT="$LANG_DIR/$TEXT_DOMAIN.pot"
command -v wp >/dev/null 2>&1 || { echo "wp-cli is required" >&2; exi…

WordPress · InternationalisationPOT generation script with WP-CLIA shell script that extracts translatable strings to a .pot file, merges them into .po files and compiles .mo and JSON files.i18npotwp-cli

/**
 * Room post type and Amenity taxonomy.
 *
 * @package Acme_Theme
 */
defined( 'ABSPATH' ) || exit;
function acme_register_room_content(): void {
  register_post_type(
    'acme_room',

WordPress · DatabaseCustom post type with a linked taxonomyRegister a bookable-room post type with a hierarchical amenity taxonomy, REST support and a safe rewrite flush on theme switch.cpttaxonomyrewrite

/**
 * Dark / light mode toggle.
 *
 * @package Acme_Theme
 */
defined( 'ABSPATH' ) || exit;
// Runs before paint so the saved or system mode is applied with no f…
function acme_mode_bootstrap(): void {
  echo "<script>(function(){var m;try{m=localStorage.getItem('acme-mo…

WordPress · ThemingDark and light mode toggle without flashA theme-level colour mode switch that respects the visitor's system setting, remembers a choice and avoids a flash of the wrong theme.dark-modetoggleaccessibility

product-tab.php

/**
 * Custom "Care guide" product tab.
 *
 * @package Acme_Core
 */
defined( 'ABSPATH' ) || exit;
// 1. Admin: a textarea in the General tab of the product data box.
add_action( 'woocommerce_product_options_general_product_data', stati…
  woocommerce_wp_textarea_input( array(

WooCommerce · HooksWooCommerce custom product tab with admin fieldAdd a custom tab on the single product page and a matching admin field, saved and escaped through WooCommerce hooks.woocommerceproduct-tabsmeta

export type RGB = [number, number, number];
export function parseHex(hex: string): RGB {
  let h = hex.trim().replace(/^#/, '');
  if (h.length === 3) h = [...h].map((c) => c + c).join('');
  if (!/^[0-9a-f]{6}$/i.test(h)) throw new Error(`Invalid colour "${h…
  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)) as RGB;
}
const toHex = (rgb: RGB) => '#' + rgb.map((v) => Math.round(v).toStri…
// sRGB channel -> linear light, then weighted by how the eye sees ea…

React / Next.js · UtilitiesWCAG contrast ratio functionCalculate the WCAG 2 contrast ratio between two hex colours, grade it AA or AAA and find the nearest passing shade.wcagcontrastaccessibility

VendorLedger.php

final class VendorLedger
{
    public function __construct(private readonly int $commissionBps =…
    /** Order delivered: credit the sale, debit the platform's cut. */
    public function recordSale(int $vendorId, int $grossCents, string…
    {
        $fee = intdiv($grossCents * $this->commissionBps + 5000, 1000…
        DB::transaction(function () use ($vendorId, $grossCents, $fee…
            $this->add($vendorId, 'sale', $grossCents, $ref);

Laravel · DatabaseVendor payout ledgerAn append-only ledger where sales, commissions and payouts are signed entries, so a vendor's balance is always a sum and never a stored guess.ledgerpayoutsmarketplace

VcardBuilder.php

final class VcardBuilder
{
    /** @param array{first:string,last:string,org?:string,title?:stri…
    public static function build(array $c): string
    {
        $lines = [
            'BEGIN:VCARD',
            'VERSION:3.0',
            'N:'.self::esc($c['last']).';'.self::esc($c['first']).';;…

Laravel · UtilitiesvCard download responseBuild an RFC 6350 compliant contact card with escaping and line folding, and return it as a downloadable .vcf file.vcardcontactsdownload

<!-- Upvote button: optimistic UI, rolls back if the request fails -->
<button type="button" data-vote-url="/api/ideas/42/vote" aria-pressed…
  class="group inline-flex flex-col items-center rounded-lg border bo…
         hover:border-indigo-400 aria-pressed:border-indigo-500 aria-…
  <svg viewBox="0 0 20 20" class="size-4 fill-current" aria-hidden="t…
  <span data-count class="text-sm font-semibold tabular-nums">24</spa…
  <span class="sr-only">upvotes</span>
</button>
<script>

Tailwind CSS · Feedback and empty statesUpvote button with live countA toggle upvote button that updates the count instantly, confirms with the server and rolls back on failure, styled by aria-pressed.upvotebuttonoptimistic-ui

CheckMonitor.php

class CheckMonitor implements ShouldQueue
{
    public int $tries = 1;
    public function __construct(public int $monitorId) {}
    /** One check per monitor at a time, even if the scheduler fires …
    public function middleware(): array
    {
        return [(new WithoutOverlapping((string) $this->monitorId))->…
    }

Laravel · Queue jobsUptime check job with alert debouncingA queued HTTP monitor check that only raises an alert after several consecutive failures and sends one recovery notice when the site returns.monitoringqueuehttp

<!-- One container per page; toasts are appended by toast.js -->
<div id="toast-region" aria-live="polite" aria-atomic="false"
  class="pointer-events-none fixed inset-x-4 bottom-4 z-50 flex flex-…
<button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 text-…
  onclick="toast('Changes saved', 'success')">Try a toast</button>

Tailwind CSS · NotificationsToast stackA stacked toast notification system with variants, auto-dismiss timers, pause on hover and a polite live region.toastnotificationslive-region

slot-picker.html

<fieldset class="mx-auto max-w-md rounded-2xl border border-slate-200…
  <legend class="px-1 text-base font-semibold text-slate-900">Pick a …
  <div id="days" role="radiogroup" aria-label="Day" class="mt-3 flex …
  <div id="slots" role="radiogroup" aria-label="Available times" clas…
  <p id="picked" class="mt-4 min-h-6 text-sm text-slate-600" aria-liv…
  <input type="hidden" name="slot" id="slot-value">
</fieldset>

Tailwind CSS · FormsTime-slot pickerA booking picker with a row of days and a grid of half-hour slots, disabling taken times and writing the choice to a hidden field.bookingtime-slotspicker

SendCampaign.php

class SendCampaign
{
    public function __invoke(Campaign $campaign, int $chunkSize = 200…
    {
        $jobs = [];
        // chunkById keeps memory flat even for very large audiences.
        $campaign->recipients()->select('id')->chunkById($chunkSize, …
            $jobs[] = new SendChunk($campaign->id, $rows->first()->id…
        });

Laravel · Queue jobsThrottled campaign batch senderSplit a mailing list into chunked queued jobs that respect a per-minute sending cap using Laravel's rate limiter and job batching.emailbatchthrottle

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "layout": { "contentSize": "720px", "wideSize": "1200px" },
    "color": {
      "defaultPalette": false,
      "palette": [

WordPress · Themingtheme.json colour, type and spacing presetsA compact theme.json that defines a palette, fluid font sizes, a spacing scale and element styles for the block editor.theme-jsonblock-themedesign-tokens

BelongsToTeam.php

trait BelongsToTeam
{
    public static function bootBelongsToTeam(): void
    {
        static::addGlobalScope('team', new class implements Scope
        {
            public function apply(Builder $builder, Model $model): vo…
            {
                // Fails closed: no team means an error, never "all r…

Laravel · DatabaseTeam-scoped global scope traitA BelongsToTeam trait that filters every query by the current team and stamps new rows automatically, failing closed when no team is set.multi-tenantglobal-scopeeloquent

export const STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900…
// Target lightness (%) for each step of the ramp.
const LIGHTNESS = [97, 93, 85, 75, 63, 52, 43, 35, 27, 19, 11];
type HSL = [number, number, number]; // h 0-360, s/l 0-100
function hexToHsl(hex: string): HSL {
  const v = hex.replace('#', '');
  const full = v.length === 3 ? [...v].map((c) => c + c).join('') : v;
  const [r, g, b] = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2…
  const max = Math.max(r, g, b);

React / Next.js · ThemingTailwind shade scale generatorTurn one base colour into a 50 to 950 shade scale by mixing toward white and black in HSL, ready for Tailwind theme tokens.tailwindcolorpalette

CheckoutController.php

class CheckoutController extends Controller
{
    public function __invoke(Invoice $invoice): RedirectResponse
    {
        abort_unless($invoice->status === 'pending', 409);
        $session = Http::asForm()
            ->withToken(config('services.stripe.secret'))
            ->baseUrl('https://api.stripe.com/v1')
            ->timeout(15)

Laravel · PaymentsStripe Checkout session and verified webhookCreate a hosted Stripe Checkout session over plain HTTP and handle the signed webhook that confirms the payment, with replay protection.stripecheckoutwebhook

KeywordConsent.php

final class KeywordConsent
{
    private const OUT = ['STOP', 'STOPALL', 'UNSUBSCRIBE', 'CANCEL', …
    private const IN = ['START', 'YES', 'UNSTOP'];
    /** Returns 'opted_out', 'opted_in' or null. The whole body must …
    public static function interpret(string $body): ?string
    {
        $word = strtoupper(trim(preg_replace('/[^\p{L}\p{N}\s]/u', ''…
        return match (true) {

Laravel · WebhooksSTOP keyword opt-out handling for inbound SMSDetect STOP, UNSUBSCRIBE and START keywords in inbound text messages, update consent atomically and answer with the required confirmation.smsopt-outconsent

<header class="sticky top-0 z-40 border-b border-slate-200 bg-white/8…
  <nav class="mx-auto flex h-16 max-w-6xl items-center justify-betwee…
    <a href="/" class="text-lg font-bold text-slate-900">Acme</a>
    <ul class="hidden items-center gap-8 text-sm font-medium text-sla…
      <li><a class="hover:text-slate-900" href="#features">Features</…
      <li><a class="hover:text-slate-900" href="#pricing">Pricing</a>…
      <li><a class="hover:text-slate-900" href="#faq">FAQ</a></li>
      <li><a class="rounded-lg bg-indigo-600 px-4 py-2 text-white" hr…
    </ul>

Tailwind CSS · NavigationSticky navbar with mobile drawerA sticky top navigation that collapses into a slide-in drawer on small screens, with Escape to close and a backdrop.navbardrawerresponsive

/**
 * Sticky audio dock.
 *
 * @package Acme_Theme
 */
defined( 'ABSPATH' ) || exit;
function acme_audio_dock_assets(): void {
  $uri = get_template_directory_uri() . '/assets/';
  wp_enqueue_style( 'acme-dock', $uri . 'audio-dock.css', array(), '1…

WordPress · UtilitiesSticky mini audio player dockA fixed bottom audio dock that plays any link marked with data-audio and keeps playing while the visitor browses the page.audioplayerpodcast

<section class="mx-auto max-w-2xl px-4" aria-labelledby="status-title…
  <h2 id="status-title" class="mb-4 text-lg font-semibold text-slate-…
  <ul id="components" class="divide-y divide-slate-200 rounded-xl bor…
</section>

Tailwind CSS · Dashboard widgetsStatus components with uptime barsA status page component list with a state badge and a 45-day bar strip per service, coloured by daily availability.status-pageuptimebars

SslExpiryChecker.php

final class SslExpiryChecker
{
    /**
     * @return array{host: string, issuer: string, subject: string, e…
     */
    public function check(string $host, int $port = 443, int $timeout…
    {
        $host = strtolower(trim($host));
        if (! preg_match('/^[a-z0-9]([a-z0-9.-]*[a-z0-9])?$/', $host)…

Laravel · UtilitiesSSL certificate expiry checkerOpen a TLS connection to a host, read the peer certificate and return days remaining, issuer and subject without any extra packages.ssltlsmonitoring

OrderSplitter.php

final class OrderSplitter
{
    /**
     * @param  Collection<int, array{vendor_id:int, product_id:int, q…
     * @param  int  $discount  order-level discount in cents
     */
    public function split(Order $order, Collection $lines, int $disco…
    {
        $groups = $lines->groupBy('vendor_id');

Laravel · DatabaseSplit an order per vendorGroup cart lines by vendor, create one sub-order each and share the order discount across them using integer largest-remainder allocation.marketplaceordersdiscount

<div class="max-h-72 overflow-auto rounded-xl border border-slate-200…
  <table id="orders" class="w-full text-left text-sm">
    <thead>
      <tr>
        <th scope="col" aria-sort="none" class="sticky top-0 bg-slate…
          <button type="button" class="font-semibold text-slate-700">…
        <th scope="col" aria-sort="none" class="sticky top-0 bg-slate…
          <button type="button" class="font-semibold text-slate-700">…
        <th scope="col" aria-sort="none" class="sticky top-0 bg-slate…

Tailwind CSS · TablesSortable table with sticky headerA data table with click-to-sort column headers, a sticky header inside a scroll box and correct aria-sort state.tablesortingsticky