DE-DesignSystem 0.0.0

A Material Design 3 component library built on top of Flet (Python/Flutter)

DE-DesignSystem

Material Design 3 component library for Python + Flet
Python 3.10+ · Flet 0.28.3+ · 20 components · 21 token families · 5 themes

Copyright © 2026 Almir J Gomes. Todos os direitos reservados.
Autor: Almir J Gomes · [e-mail] · Criado em: 03/2026

---

Installation

pip install DE-DesignSystem

Quick Start

import flet as ft
from flet_ds import DS_AppShell, DS_KPICard, DS_Button, SidebarItem
from flet_ds import TK_AppShellTokens, TK_KPICardTokens, TK_ButtonTokens

def main(page: ft.Page):
    shell = DS_AppShell(
        title="Data Platform",
        subtitle="Pipeline Monitor",
        icon=ft.Icons.STORAGE,
        token=TK_AppShellTokens.default,
        items=[
            SidebarItem(label="Dashboard", icon=ft.Icons.DASHBOARD),
            SidebarItem(label="Pipelines", icon=ft.Icons.SYNC_ALT),
        ],
        content=ft.Column([
            DS_KPICard(
                title="Active Pipelines",
                value="248",
                variation=12.5,
                trend="up",
                icon=ft.Icons.SYNC_ALT,
                token=TK_KPICardTokens.default,
            ),
            DS_Button(
                label="Run Pipeline",
                icon=ft.Icons.PLAY_ARROW,
                token=TK_ButtonTokens.filled,
            ),
        ]),
    )
    page.add(shell)

ft.app(target=main)

Components

#	Component	Description
1	DS_Text	Typed text with MD3 typography scale
2	DS_TextField	Input with normal / readonly / required states
3	DS_Dropdown	Select with icons per option
4	DS_Button	5 variants: filled, outlined, text, tonal, danger
5	DS_Checkbox	Checkbox with color variants
6	DS_RadioGroup	Radio group with label
7	DS_Header	Page header with search and action buttons
8	DS_Search	Standalone search field
9	DS_Card	Content card with header, body, footer
10	DS_KPICard	Metric card with trend and variation
11	DS_Alert	Inline alert banner (info/success/warning/error)
12	DS_Stepper	Wizard stepper (horizontal/vertical)
13	DS_Toast	Ephemeral notification (static method)
14	DS_Tabs	Tab switcher with content panels
15	DS_StatusChip	Status badge (running/done/failed/pending)
16	DS_Timeline	Vertical event timeline
17	DS_Modal	Dialog/modal with actions
18	DS_Table	Data grid with sorting and row selection
19	DS_Sidebar	Collapsible sidebar (expanded / icons-only)
20	DS_AppShell	Full layout shell (sidebar + header + content)

Themes

from flet_ds import DS_ThemeManager

tm = DS_ThemeManager.get()
tm.apply(page, "dark")      # default | light | dark | demi_dark | system
tm.cycle(page)              # cycle through all themes

Token System

Every visual property is controlled by an immutable @dataclass(frozen=True) token.

from flet_ds import DS_Button, TK_ButtonTokens

DS_Button(label="Save", token=TK_ButtonTokens.filled)
DS_Button(label="Delete", token=TK_ButtonTokens.danger)

Documentation

See Docs/design_system.md for the full technical reference.

License

MIT — Copyright © 2026 Almir J Gomes · [e-mail]