Components

Components are the building blocks a page renders. Each is a PHP builder that serializes to a typed node (type plus props) the renderer maps to a React component. They compose into a tree: container components take a ->schema([...]) of children, and children can be containers themselves.

PHP

Card::make('Team settings', 'Manage how your team appears.')
  ->tooltip('These settings affect everyone on the team.')
  ->schema([
      Stack::make()->gap(Gap::Small)->schema([
          Heading::make('Members', 2),
          Text::make('Three people have access to this team.'),
          Badge::make('3 active'),
      ]),
      Button::make('Invite member'),
  ]);

Preview

Tree

• ▾card
  • description:"Manage how your team appears."
  • headerActions:[]
  • title:"Team settings"
  • tooltip:"These settings affect everyone on the team."

  • ▾stack
    • align:null
    • direction:null
    • float:null
    • gap:"sm"
    • height:null
    • justify:null
    • sticky:false
    • width:null

    • ▾heading
      • copyable:false
      • level:2
      • text:"Members"
      • tooltip:null
    • ▾text
      • align:null
      • color:null
      • copyable:false
      • size:"md"
      • text:"Three people have access to this team."
    • ▾badge
      • color:null
      • label:"3 active"
  • ▾button
    • action:null
    • buttonType:"button"
    • effects:[]
    • emphasis:null
    • href:null
    • icon:null
    • label:"Invite member"
    • method:null
    • modal:null
    • variant:null

Style

Every example on these pages has four tabs: the PHP that builds it, the live Preview, the serialized Tree the renderer receives, and the theme Style tokens it uses.

Catalog

Component	Purpose	Page
Stack, Grid, Card	Arrange children — vertical/horizontal, columns, bordered panels	Layout
Section, Collapsible	Titled and untitled disclosures that fold open and closed	Section & Collapsible
FloatingPanel	Pin children to a viewport corner	Floating panel
Heading, Text, Badge, Icon, RawBlock	Display primitives — headings, prose, pills, sprite icons, raw HTML	Text & badges
Button, Link, SegmentedControl	Buttons, navigational links, and standalone segmented controls	Buttons & links
Tabs, Tab	A tab strip with URL-synced, lazily rendered panels	Tabs
Modal	A dialog opened and closed by action effects	Modals
Tooltip	An ⓘ info popover you can place anywhere	Tooltip
Chart	Line, bar, area, and pie charts	Charts
Notifications	A bell listing a user’s database notifications, realtime + polling	Notifications

Where components appear

Components are the same building blocks used across Lattice. You place them in a page’s schema, inside a form alongside fields, and in a table’s empty and header slots. Containers nest freely, so a Card can hold a Stack of Text and Buttons, and a Section can hold a Grid of anything.

Fragments

A Fragment renders a piece of UI resolved on its own, so it can be reloaded independently of the page — see Fragments.

Custom components

Register your own components to extend the renderer with your own typed nodes and React views. See Extending → Custom fields, Registry and types, and Component packages.