Back to Home

Customization

Brand, features, theme configuration, plan definitions, and UI components.

PropelKit is configured through a set of TypeScript config files in src/config/. These control branding, features, theming, plans, and more.

Brand Configuration

src/config/brand.ts is the single source of truth for all branding. Never hardcode brand values anywhere.

src/config/brand.ts
TypeScript
import { brand } from '@/config/brand';

// Product info
brand.name              // "YOUR_BRAND_NAME"
brand.tagline           // "YOUR_TAGLINE"
brand.product.url       // "https://yourapp.com"

// Company details (for invoicing)
brand.company.legalName // "YOUR_COMPANY Private Limited"
brand.company.gstin     // GST identification number
brand.company.pan       // PAN number
brand.company.address   // Full address object

// Contact
brand.contact.email     // "support@yourdomain.com"
brand.contact.phone     // "+91-XXXXXXXXXX"

// Email senders
brand.email.fromSupport // "YOUR_BRAND Support "
brand.email.fromBilling // "YOUR_BRAND Billing "

// Pricing
brand.pricing.currency       // "USD" (or "INR" for India)
brand.pricing.currencySymbol // "$" (or "₹")
brand.pricing.locale         // "en-US" (or "en-IN")

// SEO
brand.seo.title         // Page title
brand.seo.description   // Meta description
brand.seo.ogImage       // Open Graph image path

// Social links
brand.social.twitter
brand.social.github
brand.social.discord

Helper Functions

TypeScript
import { formatPrice, formatCurrency, generateInvoiceNumber } from '@/config/brand';

formatPrice(149900)                    // "$1,499" (based on brand.pricing)
formatCurrency(99.99)                  // "$99.99"
generateInvoiceNumber('abc123def456')  // "INV-2601-DEF456"

Feature Flags

Toggle features on and off in src/config/features.ts:

src/config/features.ts
TypeScript
import { features } from '@/config/features';

features.multiTenancy     // false — Enable organizations/teams
features.credits          // false — Usage-based billing
features.gst              // false — GST invoicing for India
features.demoMode         // false — Mock everything (set via npm run demo)
features.plans            // true  — Subscription plans (always on)
features.paymentProcessor // 'stripe' | 'razorpay' | 'both'
features.analytics        // 'vercel' | 'posthog' | 'none'

Theme Configuration

src/config/theme.ts
TypeScript
import { themeConfig } from '@/config/theme';

themeConfig.colorScheme  // 'blue' | 'green' | 'purple' | 'red'
themeConfig.variant      // 'modern' | 'classic' | 'minimal'

themeConfig.layout.cardStyle    // 'elevated' | 'flat' | 'bordered'
themeConfig.layout.buttonStyle  // 'rounded' | 'sharp' | 'pill'
themeConfig.layout.spacing      // 'compact' | 'comfortable' | 'spacious'

themeConfig.typography.fontFamily // 'inter' | 'poppins' | 'roboto'
themeConfig.typography.scale      // 'small' | 'medium' | 'large'

Plans & Feature Gating

Plan Configuration

src/config/plans.ts
TypeScript
export const plansConfig = {
  plans: {
    free: {
      name: 'Free',
      features: {
        basicAnalytics: true,
        advancedAnalytics: false,
        teamMembers: false,
        apiAccess: false,
        prioritySupport: false,
      },
      limits: {
        projects: 5,
        teamMembers: 1,
        apiCallsPerMonth: 0,
        storageGB: 1,
      },
    },
    starter: { /* ... */ },
    pro: { /* ... */ },
  },
  planOrder: ['free', 'starter', 'pro'],
};

Checking Access in API Routes

TypeScript
import { checkPlanAccess } from '@/lib/plans/check-access';

export async function POST(request: NextRequest) {
  const planCheck = await checkPlanAccess('customIntegrations');

  if (!planCheck.allowed) {
    return NextResponse.json({
      error: 'Feature requires upgrade',
      requiredPlan: planCheck.requiredPlan,
    }, { status: 403 });
  }

  // Feature is available, proceed
}

Plan Utility Functions

TypeScript
import {
  getPlanForKey,
  planHasFeature,
  getPlanLimit,
  getMinPlanForFeature,
  getUpgradePlan,
  comparePlans,
} from '@/lib/plans';

getPlanForKey('pro')                      // Full plan config
planHasFeature('starter', 'teamMembers')  // true
getPlanLimit('pro', 'teamMembers')        // -1 (unlimited)
getMinPlanForFeature('customIntegrations') // 'pro'
getUpgradePlan('starter')                 // 'pro'

UI Components

shadcn/ui Components (50+)

Pre-installed in src/components/ui/:

  • Layout: accordion, breadcrumb, card, sidebar, separator, tabs, collapsible, aspect-ratio
  • Forms: button, checkbox, combobox, date-picker, input, form, label, radio-group, select, textarea, toggle, switch, slider
  • Overlays: alert-dialog, dialog, drawer, dropdown-menu, context-menu, hover-card, popover, sheet, tooltip, menubar, navigation-menu
  • Data Display: badge, avatar, table, progress, skeleton, chart, scroll-area
  • Feedback: alert, toast, command, calendar, carousel

Shared Components

Located in src/components/shared/:

  • navbar.tsx — Top navigation
  • footer.tsx — Footer
  • user-menu.tsx — User dropdown with account/logout