Zuraffa UI #

zuraffa_ui — the skin lane's certified vocabulary: identified Zfa components + ZuraffaApp, repackaged end to end from the shadcn_ui Flutter port (fork of nank1ro/flutter-shadcn-ui at shadcn_ui 0.56.3, base fork SHA afc95690e53629324ddbf094ca78021f56848bd4).

Skin lane usage (certified surface) #

dependencies:
  zuraffa_ui: ^0.1.0

import 'package:zuraffa_ui/zuraffa_ui.dart';

ZuraffaApp(
  theme: ZfaThemeData(brightness: Brightness.dark),
  home: const SkinShell(),
)

ZfaButton, ZfaInput, ZfaCard, ZfaSheet, ZfaDialog, ZfaToaster each carry the typed contract protocol (contractId / contractEnabled), so runtime contract auditors, xray decks and slice manifests can identify them without grepping.

Zfa surface (full vocabulary) #

package:zuraffa_ui/zfa.dart carries the certified components plus a generated Zfa* alias for every public engine name (scripts/generate_zfa_aliases.dart), so consuming code never types a Shad* name:

import 'package:zuraffa_ui/zfa.dart';

ZfaTooltip(
  builder: (context) => const Text('Refresh the list'),
  child: ZfaButton(onPressed: refresh, child: const Text('Refresh')),
);

The engine keeps the upstream Shad* spelling underneath — that is what keeps upstream merges mechanical — and a skin that wants the certified vocabulary without the engine names imports package:zuraffa_ui/zuraffa_ui.dart alone.

Engine (upstream lineage) #

Everything below documents the engine underneath — the full shadcn/ui port component set — and the upstream project it tracks.

The engine: shadcn/ui ported in Flutter. Awesome UI components, fully customizable — carried over unchanged (apart from the package rename) from the upstream fork.

Documentation #

The certified Zfa* surface is documented above. The engine components below it are documented by the upstream project: see the upstream documentation to interact with them and see the code.

Agent Skills #

You can install the Agent Skills for this project with:

npx skills add arrrrny/zuraffa_ui

Progress #

Follow the progress on X (Twitter)

• ✅ Accordion
• ✅ Alert
• ✅ Breadcrumb
• ✅ Dialog
• ✅ Avatar
• ✅ Badge
• ✅ Button
• ✅ IconButton
• ✅ Calendar
• ✅ Card
• ❌ Carousel
• ✅ Checkbox
• ❌ Collapsible
• ✅ Combobox
• ❌ Command
• ✅ Context Menu
• ❌ Data Table
• ✅ Date Picker
• ❌ Drawer
• ✅ Dropdown Menu Use Context Menu instead
• ✅ Form
• ✅ Hover Card Use Popover instead
• ✅ Input
• ✅ Input OTP
• ✅ Label Use Text instead
• ✅ Menubar
• ❌ Navigation Menu
• ❌ Pagination
• ✅ Popover
• ✅ Progress
• ✅ RadioGroup
• ✅ Resizable
• ✅ Scroll Area Use SingleScrollView, ListView etc. instead
• ✅ Select
• ✅ Separator
• ✅ Sheet
• ❌ Skeleton
• ✅ Slider
• ✅ Sonner
• ✅ Switch
• ✅ Table
• ✅ Tabs
• ✅ TextArea
• ✅ Time Picker
• ✅ Toast
• ❌ Toggle
• ❌ ToggleGroup
• ✅ Tooltip

FAQs #

Star History #