rxf_shadcn

Shadcn Flutter component library for the RXF SDK — render JSX-defined UI using shadcn_flutter widgets at runtime.

Features

  • 60+ shadcn-style Flutter widgets driven by JavaScript/JSX via the RXF runtime
  • Full TypeScript JSX type declarations (rxf-jsx.d.ts) for editor autocomplete and hover docs
  • Covers Scaffold, Buttons, Display, Inputs, Selection, Containers, Overlay, Navigation, Layout, and Menu
  • Plug-and-play RxfShadcnPlugin — registers all component parsers in one line
  • 1557 Lucide icons available via the <icon> JSX tag

Getting started

Add this package and rxf to your pubspec.yaml:

dependencies:
  rxf: ^0.0.1
  rxf_shadcn: ^0.0.1

Usage

Pass RxfShadcnPlugin when initialising the runtime:

import 'package:rxf/rxf.dart';
import 'package:rxf_shadcn/rxf_shadcn.dart';

Future<void> main() async {
  await RxfRuntime.initialize(plugins: [const RxfShadcnPlugin()]);
  runApp(const RxfRuntimeApp());
}

Then use shadcn components directly in your JSX pages:

export default function App() {
  return (
    <shadcnScaffold>
      <shadcnCard>
        <shadcnButton id="submit">Submit</shadcnButton>
        <shadcnTextField id="name" placeholder="Your name" />
      </shadcnCard>
    </shadcnScaffold>
  );
}

Component categories

Category Components
Scaffold shadcnScaffold, shadcnAppBar
Buttons shadcnButton, shadcnSecondaryButton, shadcnOutlineButton, shadcnGhostButton, shadcnDestructiveButton, shadcnTextButton, shadcnLinkButton, shadcnTooltip
Display shadcnBadge, shadcnAvatar, shadcnChip, shadcnDivider, shadcnLinearProgress, shadcnCircularProgress, shadcnSkeleton, shadcnNumberTicker, shadcnCodeSnippet, shadcnKeyboardShortcut, shadcnDotIndicator
Inputs shadcnTextField, shadcnTextArea, shadcnSwitch, shadcnCheckbox, shadcnSlider, shadcnStarRating
Selection shadcnToggle, shadcnRadioGroup, shadcnSelect, shadcnPagination
Containers shadcnCard, shadcnAlert, shadcnAccordion, shadcnTabs, shadcnCollapsible, shadcnOutlinedContainer, shadcnBreadcrumb, shadcnSteps
Overlay shadcnToastTrigger, shadcnDialogTrigger, shadcnDrawerTrigger, shadcnHoverCard, shadcnRefreshTrigger
Navigation shadcnNavigationBar, shadcnNavigationRail, shadcnDropdownMenu
Layout shadcnTable, shadcnTimeline, shadcnCarousel
Menu shadcnMenuBar, shadcnContextMenu, shadcnMenuButton, shadcnMenuLabel, shadcnMenuDivider

Additional information

Libraries

rxf_shadcn