Elattar Design System

Production-ready Flutter components delivered as source you own. Start with a native foundation, copy only the components you need, and keep every design decision visible in your codebase.

0.0.4, the current public release.

Documentation · Components · Installation · Skills · Changelog · 0.0.4 release notes · 0.1.0 milestone · Adoption

Own your first component

Run three commands inside a Flutter project:

dart install elattar_cli
cd my_flutter_app
elattar init --foundation source
elattar add button

That is the whole quickstart. elattar add button copies the component and its foundation dependencies into your project. The installed source is yours to inspect, change, and ship—there is no design-system runtime dependency hiding the implementation.

The current registry contains 100 integrity-checked items, including accessible controls, navigation, data display, charts, agent UI, effects, motion, and one complete application block. Browse the live component gallery or watch the 15-second quickstart before installing anything.

Use elattar add --all for the complete registry and elattar doctor to check the installation. Windows PATH help, offline use, and every CLI option live in the CLI README.

Source you own

Elattar distributes Flutter source instead of hiding components behind a package boundary.

• Files are copied into your project and recorded in .elattar/manifest.json.
• Imports are rewritten to your generated local barrels.
• Every registry payload is verified before the first file is written.
• Released registry paths are immutable.
• --dry-run, --offline, local registries, and mirrors are supported.

The root elattar_design_system package remains the authoritative implementation, but it is intentionally not published to pub.dev. The public distribution route is elattar_cli and the source registry.

What is included

The 0.0.4 registry contains 100 items: 98 components, one application block, and one foundation bundle.

• Foundation: semantic color, responsive typography, spacing, radii, shadows, surfaces, media queries, motion, reduced motion, and path-drawn icons.
• Components: forms, selection, menus, navigation, dialogs, overlays, feedback, data display, charts, chat, layout, sidebar, and agent UI.
• Effects and motion: one press feel, active indicators, the fourteen motion recipes, glass, premium surfaces, ambient patterns, and the voice orb.
• Fonts: Inter for words and Geist Mono for code, identifiers, and numbers.

The public API uses ordinary Flutter names with no prefix: Button, Card, Icon, TextStyles, and space(...).

Use a component

Projects initialized by the CLI receive two local barrels:

import 'components/ui/ui.dart';
import 'design_system/foundation.dart';

Button(
  onPressed: () {},
  child: const StyledText('Continue', TextStyles.nav),
)

The foundation owns visual values. Components consume its color, type, spacing, radius, shadow, and motion tokens rather than creating a second visual system.

CLI

Command	Purpose
elattar init --foundation source	Install the foundation, fonts, config, and notices
elattar add <items...>	Install components and their dependencies
elattar add --all	Install the complete registry
elattar list	List available items
elattar search <query>	Search the registry
elattar info <name>	Inspect one item
elattar doctor	Check the project, manifest, dependencies, and registry

The published CLI is elattar_cli 0.0.4. It reads the immutable 0.0.4 registry by default.

Agent skill

elattar-flutter-ui-director teaches Claude Code to inspect the installed API, compose existing components, use foundation tokens, cover relevant states, and verify Flutter UI in proportion to the task.

Run these commands inside Claude Code:

/plugin marketplace add ELATTAR-Ayoub/flutter-design-system
/plugin install elattar-design-system@elattar

The same skill works in this repository and in applications initialized by the CLI. See the concise Skills guide for example prompts, updates, and removal.

Releases

0.0.4 — current

• Cut the motion vocabulary to fourteen names: twelve recipes in keyframes.dart plus Press and ActiveIndicator.
• Gave every overlay one entrance and one exit through OpenTransition, replacing eleven private transitions.
• Made Press the single click feel at 0.9 and removed its scale argument, InteractiveCard, and the per-component scales.
• Pruned MotionDurations to a seven-step scale plus one constant per loop or surface, and MotionCurves to seven.
• Fixed reduced motion on overlay close: six controllers now reassign reverseDuration alongside duration.

Read the focused 0.0.4 release notes for the complete rename table and migration guidance.

0.0.3

• Added one disabled-state contract across controls, including reason tooltips, disabled-tap recovery, FormScope, and first-error reveal/focus.
• Made every typography role responsive at the system breakpoints and removed visual and motion literals from components and documentation.
• Added the copyable charts gallery, shared specimens, and pointer-following pie/radial tooltips.
• Reworked AgentConsole into an integrated surface with history, attachments, downloads, documentation navigation, and browser microphone support.
• Published 96 changed installation contracts through the immutable 0.0.3 registry; four unchanged items retain their 0.0.1 payloads.
• Published elattar_cli 0.0.3 against /registry/0.0.3/.

Read the focused 0.0.3 release notes for migration guidance and the registry inventory.

0.0.2

• Replaced the inherited stylesheet transcript with a native Flutter foundation.
• Introduced 17 responsive typography roles with no role-owned color.
• Added keyboard, focus, semantics, minimum-target, and focus-restoration work across core interactions.
• Versioned registry items individually and protected released payloads from mutation.
• Published elattar_cli 0.0.2 against /registry/0.0.2/.

0.0.1

• First public CLI, source registry, documentation site, package tag, and Claude Code skill.
• Published 99 registry items with integrity checks and offline caching.

Read the complete design-system changelog or the CLI changelog.

Development

flutter pub get
flutter analyze
flutter test

cd example
flutter pub get
flutter run

The public barrel is lib/elattar_design_system.dart. The documentation app starts at example/lib/main.dart. Registry and release tooling is documented in tool/README.md.

License and contributing

Elattar's work is MIT licensed. Redistributed fonts, icon geometry, and shader assets retain their upstream notices in THIRD_PARTY_NOTICES.md and third_party/. Those notices travel with the source that requires them.

Before contributing, read CONTRIBUTING.md and SECURITY.md. Use issues for bugs and proposals, and include focused tests with behavior changes.