Getting Started

Open config/settings.py and update these core settings for your project:

BRAND_NAME — your project's display name
SITE_NAME — used in page titles and metadata
SECRET_KEY — generate a unique key for production
ALLOWED_HOSTS — your domain(s) for production

SmallStack ships with sidebar + topbar combinations you can mix and match. Set SMALLSTACK_LAYOUT in settings to pick your starting point, then preview all options in the layout gallery.

The navigation guide explains how the registry works and how sections map to sidebar groups and topbar menus.

Nav items are registered in each app's AppConfig.ready() method. Add your pages to the sidebar by calling nav.register() in your app config:

# apps/website/apps.py
from apps.smallstack.navigation import nav

nav.register(
    section="main",
    label="My Page",
    url_name="website:my_page",
    order=50,
)

SmallStack supports dark and light modes with switchable color palettes. Users pick their preference from the topbar dropdown. You can add custom palettes by defining CSS variables.

All components use semantic CSS variables like --primary, --card-bg, and --body-fg so your theme applies everywhere automatically.

The pattern for new pages: create a view in apps/website/views.py, add a template that extends smallstack/base.html, wire up a URL, and optionally register a nav item.

Check out the Starter page and its basic variant for working examples you can copy.

SmallStack includes styled components for cards, buttons, forms, grid layouts, messages, date pickers, file uploads, and more. Browse the full component reference for copy-paste examples.