Design System
A collection of reusable UI components and design patterns used throughout this website. This page showcases buttons, forms, cards, alerts, and other interactive elements with consistent styling and smooth animations.
Buttons
Form Inputs
Cards
Card Title
This is a card description that provides additional context.
Card content goes here. This demonstrates how cards look with the current theme.
Another Card
Cards are great for grouping related content.
You can put any content inside a card component.
Card Without Footer
Cards don't require all sections.
This card only has a header and content.
Alerts
Info
Success
Error
Warning
Badges
Complete Form Example
Contact Form
Example of a complete form using shadcn/ui components
Combined Example
Project Card
A card with a badge in the header
This demonstrates how components work together.
Status Card
Card with status indicators
Dialog / Modal
Tabs
Account
Make changes to your account here. Click save when you're done.
Accordion
Dropdown Menu
Popover
Tooltip
Separator
Section Title
This is some content in the first section.
Another Section
This is content in another section, separated by a divider.
Final Section
More content here.
Animated Components
Professional, subtle animations that enhance user experience without being distracting. All animations respect reduced motion preferences and are optimized for performance.
Animated Buttons
Subtle hover and click feedback for better interactivity.
Animated Cards
Smooth entrance animations and subtle hover effects.
Card 1
Appears first with no delay
This card has a smooth entrance animation.
Card 2
Appears second with slight delay
Staggered animations create a polished feel.
Card 3
Appears third with more delay
Hover to see the subtle lift effect.
Animated Alerts
Smooth entrance and exit animations for notifications.
Success
Info
Fade In Component
Simple fade-in wrapper for any content.
Faded In Content
This card faded in from below
Perfect for page sections, lists, or any content that should appear smoothly.
Stagger Container
Automatically staggers animations for child elements - perfect for lists and grids.
Animated Badges
Badges that appear with a subtle scale animation.