The Programmer's Bible
for building with AI
Master the architectural verbiage to build high-value projects with AI.
Featured Verses
The Visual
Demo App
Click the menu icon to open the drawer
The Verbiage
- Sheet Primitive
- Backdrop Blur
- Nested Transitions
- Radix Dialog
- Portal Rendering
- Overlay Masking
- Slide Animations
- Focus Management
The AI Prompt
The Value Prompt
Build a high-end Navigation Drawer using Radix UI's Sheet primitive.
Requirements:
- Use @radix-ui/react-dialog for the Sheet component
- Implement backdrop-blur-md on the overlay
- Add slide-in-from-left animation using Tailwind's data-[state] attributes
- Include nested transitions for smooth open/close states
- Ensure proper focus management and accessibility
- Use border-zinc-200 for subtle dividers
- Apply backdrop-blur-sm to the overlay for depth