SDK / Source examples

Read the source.
Build with the SDK.

Small reference projects for specific compiler and runtime features. Start here when you want to inspect the project structure or try a supported API.

Check compatibility · About the SDK

Component integration

Panels

A reference for compiling React with static Tailwind CSS and pinned Radix / New York v4 component source. It combines state updates, DOM measurements, events and element style values.

The 15 component families are Collapsible, Progress, Button, Badge, Card, Separator, Skeleton, Toggle, Tabs, Alert, Input, Textarea, Table, Label and AspectRatio.

Download source ↓Component scope ↗
Browser reference

The browser build is a development fixture. It uses the same application source with a React DOM mount adapter; it is not a native execution result.

Open browser reference ↗
State, resources and lifecycle

Notes

A compact React project with controlled inputs, keyed list updates, imported SVG assets, timers and effect cleanup.

Download source ↓React scope ↗
Browser reference

This browser build is a development fixture, separate from native verification.

Open browser reference ↗
Project structure

From entry point to package.

The project declares its name and UI entry in attar.toml.

[project]
name = "AttarPanels"
display_name = "Attar Panels"

[application]
id = "app.attar.panels"

[ui]
entry = "main.tsx"
  1. Install the SDK. Follow the macOS instructions.
  2. Extract a source archive. In the Panels directory, run npm ci --ignore-scripts --no-audit --no-fund for the pinned dependencies.
  3. Run attar build. The output is under target/attar/aarch64-apple-darwin/release/: AttarPanels.app or AttarNotes.app.

Panels includes compiled Tailwind CSS. After changing utility classes, run npm run build:css before rebuilding. Node and Tailwind are build tools, not application runtime dependencies.