# Glint UI — themable Slint components

Primitives, composites and a semantic token theme. A component reads a role, never a color, so one assignment retints the whole app — light or dark, in any palette.

```bash
cargo add slint
cargo add --build slint-build lucide-slint
cargo add --build --git https://github.com/thelipe7/glint-ui glint-ui
```

Unreleased, so nothing is on crates.io yet — Glint comes from the repository. [Get Started](/docs/get-started) adds the build script that makes `@glint/…` resolve.

[Get Started](/docs/get-started)[Components](/docs/components)[GitHub](https://github.com/thelipe7/glint-ui)

```slint
import { Badge } from "@glint/components/badge.slint";
import { Button, ButtonVariant } from "@glint/components/button.slint";
import { Card, CardFooter, CardTitle } from "@glint/components/card.slint";
import { Input } from "@glint/components/input.slint";
import { Switch } from "@glint/components/switch.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 420px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 16px;

        Card {
            VerticalLayout {
                padding: parent.padding-l;
                spacing: parent.gap-l;

                HorizontalLayout {
                    alignment: space-between;
                    spacing: Tokens.spacing-md;

                    CardTitle {
                        text: "Project settings";
                        vertical-alignment: center;
                    }

                    Badge { text: "Beta"; }
                }

                Input {
                    placeholder: "Project name";
                    text: "Aurora";
                }

                Switch {
                    label: "Deploy on every push";
                    checked: true;
                }

                CardFooter {
                    Button { text: "Cancel"; variant: ButtonVariant.outline; }
                    Button { text: "Save"; }
                }
            }
        }
    }
}
```