« back to anchor

anchor · component library

2018-2022 · proprietary · ~100 components · vue 2 SFCs

Roughly a hundred Vue 2 components across the two iterations of Anchor. Coverage spans forms, charts, modals, navigation, content layouts, video, and media-player wrappers. Notes on the patterns used across the library below.

patterns you'll see across the library

• JSDoc on every prop. Storybook’s vue-docgen integration parsed these into Controls, Args, and docs pages automatically. Documentation was structural, not optional.
• Polymorphic rendering. Common components (Button, Card, Hero) decide between <a> and <button> (or other host elements) based on a prop, so the same component covers the common variants without a separate “LinkButton.”
• Slot composition. Most components default to text props for the common case and expose named slots for advanced use. Buttons, modals, tooltips, cards, same shape.
• WCAG-cited a11y comments. Accessibility requirements live next to the props they apply to, with WCAG success criterion numbers (1.1.1, 2.4.6) inline.
• Async-imported nested components via webpackChunkName hints so the bundle stays tree-shakeable across composition. Icons stay out of the Button bundle unless actually rendered.
• Custom directives instead of mixins (intersect, bounds, drawer) when the behavior was DOM-y rather than data-y. Composition without component bloat.
• Length-aware tooltip rendering. The tooltip component switches between a positioned bubble and a modal based on message length, so the same API covers short hints and long explanatory copy without consumers having to choose.

Back to Anchor overview · Compare to Meridian components