Team directoryPro
Searchable people, team filters, and a focused profile panel.
- An internal directory where people search colleagues and copy contact details.
- Team pages with department filters and a profile pane.
- Use team-members to manage roles and invitations.
- Use team-showcase for a public, image-led team section.
- Use customers-table for large tabular people data.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { TeamDirectory } from 'animui/team-directory';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this when people need to browse a team and find contact details. Replace the sample people and portraits with your own directory data.
import { TeamDirectory } from "animui/team-directory"; export function PeoplePage() { const router = useRouter(); return <TeamDirectory onPersonSelect={(person) => router.push("/people/" + person.id)} />;}TeamDirectory
A searchable people list with Design, Engineering, and Operations filters (each with a count), availability, and a profile pane with focus, location, time zone, and a copyable email. People and portraits are sample data in the file.
onPersonSelect(person: { id: string; name: string; team: "Design" | "Engineering" | "Operations" }) => void–Called when a person is chosen from the list.- Filter buttons are a labelled group with aria-pressed; person rows are buttons with aria-pressed.
- Escape in the search field clears the query.
- The profile pane is polite live content, so selection changes are announced.
- Copy success and failure are announced through role="status".
- The filter highlight and the row selection highlight glide with shared layoutIds on the morph spring.
- Filtered rows close their gaps with position layout animation and fade in or out.
- The profile pane fades up 4px when the person changes.
- Reduced motion removes layout animation and offsets and turns off CSS transitions.
- Container queries on the block: below 640px the copy button becomes icon-only; below 500px the profile pane moves under the list; below 400px the header stacks, search fills the width, and filter counts hide.
- Search and filters run in memory on every keystroke, and rows are not virtualized.
- For hundreds of people, filter on the server and paginate before passing data in.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for an internal directory or team page where people need contact details.
- Replace the people array, the Team union, and portrait paths with your directory data.
- Composes animui Avatar.
The full library index for assistants is at /llms.txt.
