Leverage Ark UI Vue, Build your Component Library Solution LIVE
summary
Live builds an Avatar component on Ark UI Vue from zero: initializes a workspace with pmpm (notes Bun preference), copies Ark UI’s anatomy, adds props (source, name), uses data-part hooks for Avatar component with image + fallback initials, wires TypeScript-typed props/emits and a forwarded-props helper, writes a Story (.story.md) and Vest + Testing Library tests — vest + Testing Library Vue green test run — exports via index, links workspace to a Next playground, and layers Tailwind for styling during the demo.
AI-written summary · about
chapters (15)
- 0:00Building component libraries
- 1:07Avatar setup with Ark UI
- 4:25Ark UI component anatomy
- 6:32Extending Ark UI props
- 13:53Avatar initials fallback
- 16:25Error handling for props
- 18:39Avatar styling with data parts
- 21:13Writing component docs
- 22:59Testing with Vitest & Testing Library
- 28:53Exporting components
- 31:01Playground app integration
- 33:13Adding Tailwind CSS
- 38:24Q&A: Docs & testing
- 40:35Q&A: Versioning & compatibility
- 44:07Q&A: Component composition
related talks
03mDocument your components with Storybook for Vue
34mComponent Documentation Made Easy
07mBuild Your Own Component Library, With `Shadcn-vue`
36mHow to Create 'Vuetiful' Data-Driven User Interfaces
07mReact components, atomic design and storybook
24mA Short Synopsis of Vue Storybook
28mBuilding reusable UI components in Vue
14mBuilding a component library with React, Vue, Angular or WebComponents