#881
Dense CRM with component tokens
A dense CRM activity card whose Avatar, TextField, TextArea, Card, SegmentedControl and EmptyState are restyled only through component tokens declared on one wrapper: neutral avatars, tighter field gap, a 64px note box, a hairline flat card, compact segments and a bare empty state.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Dense CRM with component tokens" pattern (@codeatlasdev/ui demo #881, layout/empty-state) in my app.
Call get_demo({ ids: ["#881"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Dense work screens (activity feed, notes composer, view switcher, empty and invite states) that need a different density than the defaults without selectors against internal parts.
Keep these library parts, with the props and tokens the demo uses:
- Avatar, Button, Card, EmptyState, SegmentedControl, TextArea, TextField from "@codeatlasdev/ui"
Behaviour to keep:
- Wrapper `.crm` declares only custom properties: `--ca-avatar-sm-fallback-size`, `--ca-avatar-fallback-weight`, `--ca-field-gap`, `--ca-field-label-leading`, `--ca-ta-min-height`, `--ca-card-bg`, `--ca-card-radius`, `--ca-card-border`, `--ca-card-shadow`, `--ca-seg-item-padding-x`, `--ca-seg-item-font-size`, `--ca-empty-title-size`, `--ca-empty-title-weight`
- `<Card title="Activity" headingLevel={3}>` holds everything
- Two `<Avatar alt="Ana Lima" tone="neutral" size="sm" />` style avatars (Ana Lima, Bruno Reis) beside a `<SegmentedControl` with `size="sm"` and the items Day, Week and Month
- `<TextField label="Contact" placeholder="Search contacts" />` and `<TextArea label="Note" rows={1}` with a note placeholder
- `<EmptyState bare icon={Inbox} title="No activity yet"` with an Inbox icon, the title No activity yet and a neutral outlined small Button labelled Log a call
- No selector against a component class in the CSS
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Avatar
@codeatlasdev/ui - Button
@codeatlasdev/ui - Card
@codeatlasdev/ui - EmptyState
@codeatlasdev/ui - SegmentedControl
@codeatlasdev/ui - TextArea
@codeatlasdev/ui - TextField
@codeatlasdev/ui
How it is built
- Wrapper `.crm` declares only custom properties: `--ca-avatar-sm-fallback-size`, `--ca-avatar-fallback-weight`, `--ca-field-gap`, `--ca-field-label-leading`, `--ca-ta-min-height`, `--ca-card-bg`, `--ca-card-radius`, `--ca-card-border`, `--ca-card-shadow`, `--ca-seg-item-padding-x`, `--ca-seg-item-font-size`, `--ca-empty-title-size`, `--ca-empty-title-weight`
- `<Card title="Activity" headingLevel={3}>` holds everything
- Two `<Avatar alt="Ana Lima" tone="neutral" size="sm" />` style avatars (Ana Lima, Bruno Reis) beside a `<SegmentedControl` with `size="sm"` and the items Day, Week and Month
- `<TextField label="Contact" placeholder="Search contacts" />` and `<TextArea label="Note" rows={1}` with a note placeholder
- `<EmptyState bare icon={Inbox} title="No activity yet"` with an Inbox icon, the title No activity yet and a neutral outlined small Button labelled Log a call
- No selector against a component class in the CSS
Related
Loading source.