Skip to main content

​
Introduction

The stevenson.space component library is built with Vue 3 and TypeScript, providing a comprehensive set of reusable UI components and schedule-specific components. All components are located in src/components/ and follow modern Vue 3 Composition API patterns.

​
Component Organization

Components are organized into two main categories:

​
UI Components

General-purpose user interface components that can be used throughout the application:
  • Card - Container component with shadow and masonry layout support
  • RoundedButton - Styled button with icon support
  • IconButton - Icon-only button with hover effects
  • Dropdown - Select dropdown with animated options
  • ColorPicker - Color input with inheritance support
  • Checkbox - Custom checkbox component
  • Popup - Modal overlay component
  • SliderInput - Range slider with number input
  • InfoTooltip - Tooltip for additional information
  • CollapsibleSection - Expandable/collapsible content section

​
Schedule Components

Components specifically designed for displaying and managing schedule information:
  • Period - Display a single class period with progress bar
  • ScrollablePeriodList - Scrollable list of periods with “Up Next” indicator
  • EventChip - Display event information with date

​
Card Components

Specialized card implementations in src/components/cards/:
  • WeatherCard, ScheduleCard, LunchCard
  • UpcomingEventsCard, CountdownCard
  • FormCard, ImageTextCard, IconTextCard
  • And many more specialized cards

​
Importing Components

Components use absolute imports with the @/components/ alias: 
import Card from '@/components/Card.vue';
import RoundedButton from '@/components/RoundedButton.vue';
import Period from '@/components/Period.vue';

​
Storybook Development

Every component has a corresponding .stories.ts file for development and testing: 
src/components/
├── Card.vue
├── Card.stories.ts
├── RoundedButton.vue
├── RoundedButton.stories.ts
└── ...
Story files follow the Storybook format and provide:
  • Component props documentation
  • Interactive examples
  • Different component states and variations

​
TypeScript Support

All components are written in TypeScript with full type definitions: 
const { shadow = true, border = false } = defineProps<{
  shadow?: boolean
  border?: boolean
}>();

​
Styling

Components use:
  • Scoped SASS for component-specific styles
  • CSS Variables for theming (--accent, --background, --primary, etc.)
  • Shared mixins from @/styles/style.sass

​
Next Steps

UI Components

Explore general-purpose UI components

Schedule Components

Learn about schedule-specific components

Build docs developers (and LLMs) love

Get started for freeTalk to us