UI Building Blocks
Pre-built components that give you consistency out of the box
TL;DR: Don't design screens from scratch. Compose them from ready-made blocks. Every list works the same. Every detail page looks the same. Consistency like Retool or Airtable.
The Idea
Traditional development: you build every screen from scratch. Button here, table there, figure out pagination, implement sorting, wire up filters...
Straktur approach: You get building blocks. Each block handles its complexity internally. You compose screens from these blocks. Result: consistent UX across your entire app.
List Page (DataTable)
The workhorse of any business app. Every list in Straktur uses the same DataTable component — with an Airtable-grade experience out of the box.
What You Get Out of the Box
| Feature | Description |
|---|---|
| Sticky header & footer | Header stays pinned while you scroll through data. Pagination always visible at the bottom. Airtable-style layout. |
| Sticky columns | Pin a column (e.g. name) to the left edge — stays visible when scrolling wide tables horizontally. |
| Column sorting | Click any header to sort. Ascending, descending, or none. |
| Column visibility | Users can show/hide columns. Settings persist in localStorage. |
| Two view modes | Table view or Card view. User toggles between them. |
| Pagination | Classic pagination with configurable page size. User's preference persists between sessions. |
| Infinite scroll | Alternative to pagination. Loads more as you scroll down. |
| Search | Global search across visible columns. |
| Filters | Faceted filters with badges showing active count. Supports colored dots (for statuses) and avatars (for users). |
| Async filters | Server-side search for large option lists (100+ items) — searches as the user types instead of loading all options upfront. |
| Inline cell editing | Click a cell to edit it directly — text, date, or select. Auto-saves on blur. |
| Indicator badges | Small icon+count badges in table cells (e.g. comment count, attachment count). |
| Auto-aligned numbers | Numeric columns automatically right-aligned for readability. |
| Embedded tables | Full DataTable inside detail page tabs — for related records (order items, contacts, etc.). Own pagination and sorting. |
| User preferences | Sort order, columns, view mode, rows per page — all saved per user in localStorage. |
| Export | Export visible/filtered data to CSV or JSON. |
| Row actions | Quick action icons + dropdown menu per row. |
| Bulk actions | Select multiple rows, apply action to all. |
What It Looks Like
┌──────────────────────────────────────────────────────────────────┐
│ [Search...] [Status ▼] [Customer ▼] [Table│Cards] [Export] │ ← toolbar
╞══════════════════════════════════════════════════════════════════╡
│ ☐ │ 📌 Name │ Status │ Industry │ 💬 │ Created │ ••• │ ← sticky header
│───│───────────────│──────────│──────────│────│──────────│─────│
│ ☐ │ 📌 Acme Inc │ 🟢 Active│ Tech │ 3 │ Jan 15 │ ••• │
│ ☐ │ 📌 Globex │ 🟡 Lead │ Finance │ │ Jan 12 │ ••• │
│ ☐ │ 📌 Initech │ 🟢 Active│ Tech │ 1 │ Jan 10 │ ••• │
╞══════════════════════════════════════════════════════════════════╡
│ [Bulk actions ▼] Page 1 of 5 [< 1 2 3 4 5 >] │ ← sticky footer
└──────────────────────────────────────────────────────────────────┘
📌 = sticky column (stays visible on horizontal scroll)
💬 = indicator badge (comment count)For Your Prompts
| You say... | AI knows to... |
|---|---|
| "Add invoices list page" | Use DataTable with sticky header/footer layout |
| "Add status filter to invoices" | Add faceted filter with colored dots |
| "Add customer filter" | Use async filter (server-side search) if many customers |
| "Make the name column sticky" | Add meta: { isSticky: true } to the column |
| "Show comment count in the table" | Add DataTableIndicatorBadge in the primary column |
| "Add inline editing for delivery date" | Use DataTableCellEditDate in the cell renderer |
| "Show order items in the order detail page" | Create embedded table with useEmbeddedTable hook |
| "Enable card view for invoices" | Configure view toggle |
| "Add bulk delete for invoices" | Implement bulk action handler |
Detail Page
When user clicks a row, they see the detail page. Consistent layout: header with key info, sections with grouped data.
What You Get Out of the Box
| Feature | Description |
|---|---|
| Entity header | Avatar/logo, title, subtitle, status badge, quick actions. |
| Section cards | Grouped information in collapsible cards. |
| Property rows | Label-value pairs with consistent formatting. |
| Property grid | 2-column layout for dense information. |
| Related lists | Full embedded DataTables for related records — with their own sorting, pagination, and search. |
| Tabs | Organize sections into tabs for complex entities. Tabs mount in the global sticky header. |
| Comments | Drop-in CommentsSection for any entity. Rich text (Tiptap editor) with avatars, timestamps, Cmd+Enter to post. |
What It Looks Like
┌─────────────────────────────────────────────────────────────┐
│ [←] [Logo] Acme Inc [Edit] [Delete] [•••] │
│ Technology · Active · San Francisco │
├─────────────────────────────────────────────────────────────┤
│ ┌─ Company Details ──────────────────────────────────────┐ │
│ │ Industry Technology │ Website acme.com │ │
│ │ Employees 150 │ Revenue $5M │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ Contacts (3) ─────────────────────────────────────────┐ │
│ │ John Smith CEO [email protected] [Edit] │ │
│ │ Jane Doe CTO [email protected] [Edit] │ │
│ └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘Detail Sheet (Side Panel)
For quick edits without leaving the current page. Opens as a slide-over panel.
What You Get Out of the Box
| Feature | Description |
|---|---|
| Form with validation | Zod schemas, error messages, field-level validation. |
| Dirty tracking | Warns before closing if there are unsaved changes. |
| Auto-save indicator | Shows when changes are being saved. |
| Responsive width | Adjusts to content, max-width on large screens. |
| Keyboard shortcuts | Escape to close (discards unsaved changes). |
What It Looks Like
┌─────────────────────────┐
│ Edit Client [×] │
├─────────────────────────┤
│ Name │
│ [Acme Inc ] │
│ │
│ Industry │
│ [Technology ▼] │
│ │
│ Status │
│ [Active ▼] │
│ │
│ Website │
│ [https://acme.com ] │
├─────────────────────────┤
│ [Cancel] [Save] │
└─────────────────────────┘Inline Edit
Edit values directly on the detail page without opening a form.
What You Get Out of the Box
| Feature | Description |
|---|---|
| Click to edit | Click any value to turn it into an input. |
| Auto-save | Changes save automatically on blur. |
| Escape to cancel | Press Escape to revert changes. |
| Loading state | Shows spinner while saving. |
| Error handling | Shows error message if save fails. |
Available editors: Text, Textarea, Number, Select, SearchSelect, Url, RichText.
The SearchSelect editor adds a searchable dropdown — useful for relations (e.g. picking a client from a long list). Number fields automatically use the organization's currency format when displaying monetary values. The Url editor validates URLs and renders them as clickable links. RichText provides a Tiptap-based editor for formatted content.
Navigation & Layout
The shell that wraps your entire app.
What You Get Out of the Box
| Feature | Description |
|---|---|
| Collapsible sidebar | Main navigation, collapses to icons. Hover popover shows sub-items when collapsed. |
| Sub-items | Navigation items can have children. Active state is query-param-aware (e.g. tabs as sub-pages). |
| Configurable logo | Set hasLogoIcon and hasFullLogo in appConfig to control what shows in expanded/collapsed sidebar. Falls back to app name text. See Configuration. |
| Colored dots | Nav items support dotColor — useful for statuses or categories in navigation. |
| Auto document title | Page <title> is generated automatically from your navigation config. No need to set it per page. |
| Organization switcher | Switch between organizations (if user belongs to multiple). Hidden when there's only one. |
| User menu | Profile with avatar upload, settings, logout. Shows user role. |
| Breadcrumbs | Auto-generated from route structure, translated via i18n. |
| Command palette | ⌘K to search anything — pages, records, actions. |
| Theme toggle | Light/dark mode. |
What This Means for Your Prompts
When you tell AI to "add invoices feature", it knows to:
- List page → DataTable with all standard features
- Detail page → EntityHeader + SectionCards
- Edit flow → DetailSheet with form
- Navigation → Add to sidebar
You don't specify "add pagination" or "add sorting" - it's included. You focus on what data and what fields, not how the UI works.
"Add invoices feature with fields: number, amount, due_date, status, client relation.
List page should filter by status. Detail page shows invoice items as related list."AI generates consistent UI using these building blocks.
Related
- Add New Feature - Step-by-step guide
- UI Components (coming soon) - Detailed component reference