docs: initial component examples #123
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add realistic examples for PlayButton, MuteButton, and FullscreenButton: - React examples with CSS styling - HTML examples with web components - MDX documentation pages with live demos - Component navigation in sidebar Examples demonstrate: - Icon switching based on state using data attributes - Proper MediaProvider usage pattern - Accessible keyboard navigation - Clean, modern styling with backdrop blur Note: Examples intentionally exclude tooltip functionality per design decision. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add CodeTabs component and update button documentation: - Created CodeTabs component using Base UI Tabs - Added CSS Modules variants for all button components - Updated MDX documentation to show both Regular CSS and CSS Modules examples - Side-by-side comparison of styling approaches - Shows actual source code from example files Benefits: - Users can choose between Regular CSS or CSS Modules - Real, copy-pasteable code examples - Clear file structure demonstration - Consistent styling across both approaches 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Replace CodeTabs component with simple pre tags using Vite ?raw imports - Update PlayButton, MuteButton, and FullscreenButton docs to show CSS Modules examples - Remove incorrect target prop from FullscreenButton documentation - Clean up duplicate content sections This approach is simpler and more reliable than the previous Base UI Tabs implementation which had SSR compatibility issues with Astro. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add HTML snippet examples to PlayButton, MuteButton, and FullscreenButton docs - Use element selectors instead of class selectors in CSS for cleaner markup - Use proper icon web components (media-play-icon, media-volume-high-icon, etc.) - Simplify HTML examples to show component snippets without full page markup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add React examples with CSS Modules for TimeSlider (horizontal and vertical) - Add React examples with CSS Modules for VolumeSlider (horizontal and vertical) - Add HTML snippet examples for both orientations of TimeSlider - Add HTML snippet examples for both orientations of VolumeSlider - Include CSS styling using element selectors for clean markup - Support compound component structure with Root, Track, Progress, Thumb, and Pointer 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add comprehensive documentation for TimeSlider component - Add comprehensive documentation for VolumeSlider component - Document compound component structure (Root, Track, Progress, Thumb, Pointer) - Include React and HTML examples for both horizontal and vertical orientations - Document data attributes and CSS variables - Add accessibility information 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add TimeSlider to Components section in sidebar - Add VolumeSlider to Components section in sidebar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Create BasicTimeSlider component with CSS styling - Create BasicVolumeSlider component with CSS styling - Create TimeSliderDemo and VolumeSliderDemo wrapper components - Add live interactive examples to documentation pages - Use MediaProvider context for proper component functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add muted prop to all Video components in demo examples - Prevents unexpected audio playback when viewing documentation - Also add missing poster to MuteButtonDemo 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Convert PlayButton, MuteButton, and FullscreenButton to CSS Modules - Convert TimeSlider and VolumeSlider to CSS Modules - Use camelCase class names (e.g., button, playIcon, pauseIcon) - Remove unused vanilla CSS files - Update component comments to reflect CSS Modules usage Benefits: - Scoped styling prevents class name conflicts - Better TypeScript integration with typed class names - More maintainable and scalable styling approach - Works seamlessly with Astro's Vite-based build system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Update all MDX documentation to use Basic* example files - Remove duplicate *CSSModules.tsx files - Simplify example structure - each component now has one canonical example - Basic examples use CSS Modules and are used for both live demos and code snippets This eliminates redundancy and makes the codebase easier to maintain. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
cjpillsbury
commented
Oct 24, 2025
cjpillsbury
commented
Oct 24, 2025
decepulis
reviewed
Oct 27, 2025
Comment on lines
67
to
68
|
|
||
| Something about MediaContainer |
There was a problem hiding this comment.
@cjpillsbury this probably isn't blocking to merge, but, here's a thing
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.