Navigation
App bar
At the top of a page this bar is nothing: no fill, no rule, just a title sitting on the page. Once content scrolls beneath it, the fill and the blur fade in - so the separation appears exactly when there is something to separate and never as permanent furniture. The large-title variant takes the same idea further: the bar's own title only slides in once the page's heading has scrolled away, so the name of the screen is on screen exactly once at any moment.
npx shadcn@latest add @minflow/app-barWhere to use it
- Mobile and tablet screens, where the bar carries the back action and the screen's name.
- Any scrolling view that needs its actions kept reachable without a border pinned across the page.
- Not on a desktop page that already has a global header - two bars stacked is one too many.
Variations
Condense on scroll
The default. The title is always present; only the surface behind it changes as content passes underneath.
Large title handoff
Screens that open with a big heading. The bar stays empty until that heading leaves, then takes over the name.