Component Inventory

title: Component Inventory owner: vizu last-updated: 2026-05-16 supersedes: docs/frontend/COMPONENT-INVENTORY.md (2026-02-20) status: canonical

Bilko Component Inventory

Organized

by Project:Atomic Design {{PROJECT_NAME}}hierarchy Version:(Brad {{VERSION}}Frost). Date:All {{DATE}}components Author: {{AUTHOR}} Status: Draft | In Review | Approved Reviewers: {{REVIEWERS}}

Document History

1. Overview

Total components: {{N}} Library location: src/components/ Storybook: {{https://storybook.PROJECT_NAME.example.com}} Design source: {{Figma file URL}} Owner team: {{TEAM_NAME}}

This inventory tracks every reusable componentlive in {{PROJECT_NAME}}apps/web/. ItVerified followsagainst Atomicfilesystem Designas categorization:of atoms → molecules → organisms → templates → pages.2026-05-16.

2. Component Hierarchy DiagramAtoms

The

smallest indivisible UI units. Wrap a single HTML element or a Radix UI primitive. All shadcn/ui atoms use graphcva TBfor subgraphvariant Pagescomposition PageLogin["LoginPage"]and PageDashboard["DashboardPage"]cn() endfor subgraphclass Templates
        TplAuth["AuthLayout"]
        TplApp["AppLayout"]
    end
    subgraph Organisms
        OrgNavbar["Navbar"]
        OrgSidebar["Sidebar"]
        OrgDataTable["DataTable"]
        OrgUserForm["UserForm"]
    end
    subgraph Molecules
        MolFormField["FormField"]
        MolCard["Card"]
        MolSearchBar["SearchBar"]
        MolDropdown["Dropdown"]
        MolPagination["Pagination"]
    end
    subgraph Atoms
        AtomButton["Button"]
        AtomInput["Input"]
        AtomBadge["Badge"]
        AtomSpinner["Spinner"]
        AtomAvatar["Avatar"]
        AtomIcon["Icon"]
    end

    Pages --> Templates
    Templates --> Organisms
    Organisms --> Molecules
    Molecules --> Atoms

TODO: Update diagram to reflect actual component tree.merging.

3.

shadcn/ui Atoms (Primitivein Components)

3.1 Buttoncomponents/ui/)

Props API:

Variants

Custom & States: primary, secondary, ghost, danger, link × default, hover, focus, active, disabled, loading

Accessibility:

• Renders as <button> — never <div> or <span>
• loading state: aria-busy="true", spinner has aria-label="Loading"
• disabled: aria-disabled="true", not removed from tab order
• Focus ring: 2px offset, brand color

Dependencies: Icon component, Spinner component

---

3.2 InputAtoms

Molecules

PropsAtoms API:composed into a functional unit. May contain local useState. No external data fetching.

shadcn/ui Molecules

Variants

Custom & States: default, focused, error, disabled, with-left-icon, with-right-icon

Accessibility:

• Must always be paired with <label> (use FormField molecule)
• Error: aria-invalid="true" + aria-describedby pointing to error message id
• Password: toggle visibility button must have aria-label

---

3.3 BadgeMolecules

Organisms

PropsComplex API:UI sections with their own data dependencies. May call Zustand stores or receive server-fetched data as props.

TODO:

Landing AddPage remaining atom components following the same patternOrganisms (Select, Checkbox, Radio, Toggle, Textarea, Avatar, Tooltip, Spinner, Divider).

---

4. Molecules (Composite Components)

4.1 FormFieldcomponents/landing/)

Props API:

Accessibility: Label always associated with input via htmlFor/id pair.

4.2 Card

Props API:

Sub-components: Card.Header, Card.Body, Card.Footer

TODO: Add remaining molecule components: Modal, Dropdown, Table, Pagination, Toast, SearchBar, Breadcrumb, Tabs, Accordion, DatePicker.

5. Organisms (Complex Components)

5.1 DataTable

Features:

• Sortable columns (client + server-side)
• Pagination (configurable page sizes)
• Row selection (single + multi)
• Column visibility toggle
• Export action slot
• Loading skeleton state
• Empty state slot
• Row action slot (per-row dropdown)

TODO: Document full props API for DataTable.

5.2 Navigation / Sidebar

TODO: Add remaining organism components.

6. Shared Hooks / Composables Inventory

7. Third-Party Component UsageTemplates

Route layouts that define the page skeleton. No data logic — only layout composition.

Policy:

Composition usePatterns

Pattern components directly in feature code1 — alwaysIcon-only wrapButton

Every localicon-only componentbutton toMUST controlhave APIaria-label. surfaceThe andicon allowitself futuremust swap.be aria-hidden.

8. Component Deprecation Process

Active<Button →variant="ghost" Deprecatedsize="icon" (soft)aria-label="Ukloni →stavku">
  Deprecated<X (hard)className="h-4 →w-4" Removedaria-hidden="true" />
</Button>

Pattern

Keep

// RSC parent — no "use client"
export default async function InvoiceDetailPage({ params }: { params: { id: string } }) {
  const invoice = await fetchInvoice(params.id)
  return <InvoiceDetailClient invoice={invoice} />
}

// Client child
;('use client')
export function InvoiceDetailClient({ invoice }: { invoice: Invoice }) {
  const [status, setStatus] = useState(invoice.status)
  // interactive status changes, optimistic updates
}

export default function InvoicesPage() {
  return (hard)

import warning,{ addedcva } from 'class-variance-authority'

const statusBadge = cva('inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', {
  variants: {
    status: {
      paid: 'bg-green-100 text-green-800',
      pending: 'bg-yellow-100 text-yellow-800',
      overdue: 'bg-red-100 text-red-800',
      draft: 'bg-gray-100 text-gray-600',
    },
  },
})

export function InvoiceStatusBadge({ status }: { status: InvoiceStatus }) {
  return <span className={statusBadge({ status })}>{statusLabel[status]}</span>
}

Deprecation notice minimum period: 2 sprint cycles before hard removal.organisms).

TODO: Link to CHANGELOG.md for tracked deprecations.

Approval