Layout

StatusBar

Fixed bottom bar with brand background. Left/right slots for status items. Hidden on mobile (sm:flex).

Preview

page content

main0 errors2 warnings

TypeScriptUTF-8Ln 1, Col 1

Installation

terminal

bash

npx @entrepta/cli@latest add status-bar

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

status-bar.tsx

tsx

import {
  StatusBar, StatusBarItem, StatusBarSeparator,
} from "@/components/entrepta/status-bar"

// In root layout:
<StatusBar
  left={
    <>
      <StatusBarItem icon={<GitBranchIcon />}>main</StatusBarItem>
      <StatusBarSeparator />
      <StatusBarItem>0 errors</StatusBarItem>
    </>
  }
  right={
    <>
      <StatusBarItem>TypeScript</StatusBarItem>
      <StatusBarSeparator />
      <StatusBarItem>UTF-8</StatusBarItem>
    </>
  }
/>

Props

Prop	Type	Default	Description
left	ReactNode	—	Content for the left slot
right	ReactNode	—	Content for the right slot
icon	ReactNode	—	Optional icon prefix (StatusBarItem)