Component Selection

The CLI wizard lets you choose which components to include during project setup.

Interactive Selection

During setup, the wizard presents component options:

◇  Which components would you like to include?
│  ● All components (recommended)
│  ○ UI components only
│  ○ UI + Patterns
│  ○ None (minimal)

Option	What’s Included
All components	Full 39-component library with UI, patterns, and hero sections
UI components only	Core interface components (Button, Input, Card, etc.)
UI + Patterns	UI components plus pre-built form patterns
None (minimal)	Just layouts, SEO, and navigation — add components later

Tip

Choose All components if you’re unsure. Unused components don’t affect bundle size — Astro only ships what you use.

Skip the Prompt (Flags)

For automation or quick setups, use the --components flag:

All (default)

pnpm create velocity-astro my-site --components
# or
pnpm create velocity-astro my-site --components=all

None

pnpm create velocity-astro my-site --components=none

Specific

pnpm create velocity-astro my-site --components=ui
pnpm create velocity-astro my-site --components=ui,patterns

Component Categories

UI Components (31)

Core interface components organized into subcategories.

Component	Subcategory	Description
Button	form	Actions with variants (primary, secondary, outline, ghost)
Input	form	Text input with label, hint, error states
Textarea	form	Multi-line text input
Select	form	Dropdown selection
Checkbox	form	Checkbox with label
Radio	form	Radio button selection
Switch	form	Toggle switch input
Card	data-display	Content container with structured layouts
Badge	data-display	Status labels and tags
Avatar	data-display	User profile images
AvatarGroup	data-display	Grouped avatar display
Table	data-display	Data table with styling
Pagination	data-display	Page navigation controls
Progress	data-display	Progress bar indicator
Skeleton	data-display	Loading placeholders
Alert	feedback	Contextual feedback messages
Toast	feedback	Temporary notification messages
Tooltip	feedback	Hover tooltips
Dialog	overlay	Modal dialogs
Dropdown	overlay	Dropdown menus
Tabs	navigation	Horizontal tab navigation
VerticalTabs	navigation	Vertical tab navigation
Accordion	disclosure	Collapsible content sections
Separator	layout	Visual divider between sections
Icon	primitives	SVG icon component
CodeBlock	content	Syntax-highlighted code
Logo	marketing	Brand logo with variants
CTA	marketing	Call-to-action sections
NpmCopyButton	marketing	NPM install command copier
SocialProof	marketing	Testimonial cards
TerminalDemo	marketing	Animated terminal demo

Pattern Components (7)

Pre-built form and UI patterns for common use cases.

Component	Description
ContactForm	Complete contact form with validation
NewsletterForm	Email subscription form
FormField	Reusable form field wrapper
SearchInput	Search input with icon
PasswordInput	Password input with visibility toggle
StatCard	Statistics display card
EmptyState	Empty state placeholder

Hero Components (1)

Flexible hero sections for landing pages.

Component	Description
Hero	Hero section with multiple layout options

Component Features

Button

<Button
  variant="primary"       <!-- primary | secondary | outline | ghost | destructive -->
  size="md"               <!-- sm | md | lg -->
  colorScheme="default"   <!-- default | invert -->
  fullWidth={false}
  icon={false}
  href="/path"            <!-- renders as <a> when provided -->
/>

Hero

<Hero
  layout="single"         <!-- single | split -->
  splitRatio="1:1"        <!-- 1:1 | 1:2 | 2:1 -->
  align="left"            <!-- left | center | right -->
  background="default"    <!-- default | secondary | invert | gradient | image -->
  size="lg"               <!-- sm | md | lg | xl -->
  showGrid={true}
  showBlob={true}
  title="Your Title"
  titleHighlight="Title"  <!-- text to highlight in brand color -->
  description="..."
/>

CTA

<CTA
  variant="default"       <!-- default | invert -->
  size="lg"               <!-- sm | md | lg | xl -->
  align="center"          <!-- center | left -->
  showLogo={true}
  heading="Ready to start?"
  headingHighlight="start"
  description="Get started in seconds."
  showCopyCommand={true}
/>

Dependency Resolution

Tip

The CLI automatically resolves component dependencies. If you select patterns, required UI components are included.

Components are managed via component-registry.json in Velocity. The registry defines:

• Component files and locations
• Dependencies between components
• Required utilities (like cn for class merging)
• Category groupings

Always Included

Regardless of component selection, these are always included:

• Header — Site navigation
• Footer — Site footer
• ThemeToggle — Dark mode toggle
• SEO — Meta tags component
• JsonLd — Structured data
• Breadcrumbs — Navigation breadcrumbs
• Layouts — All page layouts