6 skills · 15 files

Downloadable Skills

Real, drop-in source files — copy them into your module or grab the whole bundle as a .zip. Each skill is the exact component the RVN micro-frontends ship.

These are source files, not an npm package. Copy them into the paths shown, keep the shared tokens in your layout.scss, and they render identically to the live previews.

Components

AppActionBar

Component

List-page toolbar — two house dividers wrapping a Create / Refresh / Delete row.

Download .zip
Install tosrc/components/common/Requiresantd
  • TSXAppActionBar.tsx
  • MDREADME.md

AppSearchBar

Component

Search input + filter tags + Add-filter dropdown, with a fixed non-collapsing gap.

Download .zip
Install tosrc/components/common/Requiresantd
  • TSXAppSearchBar.tsx
  • CSSapp-search-bar.css
  • MDREADME.md

AppFormFooter

Component

Sticky Save / Cancel footer pinned to the bottom of the scroll container.

Download .zip
Install tosrc/components/common/Requiresantd
  • TSXAppFormFooter.tsx
  • CSSapp-form-footer.css
  • MDREADME.md

AppBreadcrumb

Component

Page breadcrumb with i18n keys, priority ordering, and a mobile page-title broadcast.

Download .zip
Install tosrc/components/Requiresantdreact-router-dom
  • TSXAppBreadcrumb.tsx
  • MDREADME.md

AppDividerBar

Component

House section divider with an optional title and a right-aligned action group.

Download .zip
Install tosrc/components/common/Requiresantd
  • TSXAppDividerBar.tsx
  • CSSapp-divider-bar.css
  • MDREADME.md

Screens

List Management Screen

Screen

A full list page: breadcrumb → action bar → search bar → table, ready to adapt.

Download .zip
Install tosrc/pages/<Entity>/Requiresantd@ant-design/iconsapp-breadcrumbapp-action-barapp-search-bar
  • TSXListManagementScreen.tsx
  • MDREADME.md