Component Showcase
Explore all available UI components from our design system. Each component is built with accessibility and theming in mind.
Button Components
Interactive button components with multiple variants and sizes.
Button Variants
Different button styles for various use cases
Default Variant
Secondary Variant
Destructive Variant
Outline Variant
Ghost Variant
Link Variant
Input Components
Form input components for user data collection.
Input Variants
Different input types and states for forms
Text Inputs
Specialized Inputs
Disabled State
Card Components
Flexible card containers for organizing content.
Simple Card
A basic card with header and description
This is the main content area of the card where you can place any type of content.
Card with Actions
A card that includes action buttons
This card demonstrates how to include interactive elements.
Form Card
A card containing form elements
Usage Guidelines
Best practices for using these components in your application.
Accessibility
All components are built with accessibility in mind:
- Proper ARIA labels and roles
- Keyboard navigation support
- High contrast color schemes
- Screen reader compatibility
Theming
Components support consistent theming:
- CSS custom properties for colors
- Tailwind CSS utility classes
- Dark/light mode support
- Customizable design tokens
Import Guide
How to import and use these components in your code.
Import Statements
Copy these import statements to use components in your project
import { Button } from "@starter/ui"
import { Card, CardContent, CardHeader, CardTitle } from "@starter/ui"
import { Input } from "@starter/ui"