# CloudScape Design System - Component Index
## Component Categories
CloudScape provides a comprehensive set of React components organized into the following categories:
### Layout Components
- [App Layout](./layout/AppLayout.md) - Page structure with navigation, tools panel, and content area
- [Content Layout](./layout/ContentLayout.md) - Arranges header and content in a standard pattern
- [Container](./layout/Container.md) - Groups related content visually
- [Grid](./layout/Grid.md) - Distributes content in a responsive grid system
- [Column Layout](./layout/ColumnLayout.md) - Positions content in columns
- [Space Between](./layout/SpaceBetween.md) - Adds consistent spacing between elements
- [Box](./layout/Box.md) - Display and style basic elements
- [Split Panel](./layout/SplitPanel.md) - Collapsible panel for secondary information
- [Drawer](./layout/Drawer.md) - Panel that displays supplementary content
### Form Components
- [Form](./form/Form.md) - Container for form controls
- [Form Field](./form/FormField.md) - Container for form controls with label, description, and error messaging
- [Input](./form/Input.md) - Single-line text input
- [Text Area](./form/TextArea.md) - Multi-line text input
- [Select](./form/Select.md) - Single-item selection from a dropdown list
- [Multiselect](./form/Multiselect.md) - Multiple-item selection from a dropdown list
- [Checkbox](./form/Checkbox.md) - Toggle for a single option
- [Radio Group](./form/RadioGroup.md) - Selection of one option from a set
- [Toggle](./form/Toggle.md) - On/off switch with immediate effect
- [Segmented Control](./form/SegmentedControl.md) - Toggle between formatting options
- [Date Picker](./form/DatePicker.md) - Selection of dates
- [Time Input](./form/TimeInput.md) - Input for time values
- [Autosuggest](./form/Autosuggest.md) - Text input with suggestions
- [File Upload](./form/FileUpload.md) - Form element for file uploads
- [Slider](./form/Slider.md) - Selection of a value within a range
### Navigation Components
- [Top Navigation](./navigation/TopNavigation.md) - Global navigation header
- [Side Navigation](./navigation/SideNavigation.md) - Navigation sidebar
- [Breadcrumb Group](./navigation/BreadcrumbGroup.md) - Hierarchical page location
- [Tabs](./navigation/Tabs.md) - Switch between categories of information
- [Anchor Navigation](./navigation/AnchorNavigation.md) - Jump to content sections
- [Button](./navigation/Button.md) - Clickable action element
- [Button Dropdown](./navigation/ButtonDropdown.md) - Button with dropdown menu
- [Button Group](./navigation/ButtonGroup.md) - Group of related buttons
- [Link](./navigation/Link.md) - Hyperlink component
- [Pagination](./navigation/Pagination.md) - Navigation between pages
- [Wizard](./navigation/Wizard.md) - Multi-step form navigation
### Data Visualization Components
- [Table](./data/Table.md) - Displays data in rows and columns
- [Cards](./data/Cards.md) - Collection of resource cards
- [Line Chart](./data/LineChart.md) - Visualize data changes over time
- [Bar Chart](./data/BarChart.md) - Compare values across categories
- [Area Chart](./data/AreaChart.md) - Visualize part-to-whole relationships
- [Pie Chart](./data/PieChart.md) - Show proportional relationships
- [Donut Chart](./data/DonutChart.md) - Display proportional data with hollow center
- [Heat Map](./data/HeatMap.md) - Visualize data intensity across two dimensions
- [Metrics](./data/Metrics.md) - Display key performance indicators in grid layout
- [Property Filter](./data/PropertyFilter.md) - Filter collections by properties
- [Collection Preferences](./data/CollectionPreferences.md) - Manage display preferences
- [Text Filter](./data/TextFilter.md) - Text-based filtering
### Feedback & Status Components
- [Alert](./feedback/Alert.md) - Brief messages for information or action
- [Flashbar](./feedback/Flashbar.md) - Page-level notifications
- [Status Indicator](./feedback/StatusIndicator.md) - Communicates resource state
- [Spinner](./feedback/Spinner.md) - Loading animation
- [Progress Bar](./feedback/ProgressBar.md) - Progress of known-duration operations
- [Loading Bar](./feedback/LoadingBar.md) - Linear indicator for unknown duration
- [Modal](./feedback/Modal.md) - Dialog window for focused interactions
- [Popover](./feedback/Popover.md) - Contextual information on hover/click
- [Badge](./feedback/Badge.md) - Small visual elements for labeling
- [Token Group](./feedback/TokenGroup.md) - Group of selected items displayed as tokens
### Utility Components
- [Icon](./utility/Icon.md) - Visual symbols matching CloudScape style
- [Avatar](./utility/Avatar.md) - Visual representation of a user
- [Copy to Clipboard](./utility/CopyToClipboard.md) - One-click text copying
- [Code Editor](./utility/CodeEditor.md) - Editor for code with syntax highlighting
- [Code View](./utility/CodeView.md) - Display code snippets
- [Live Region](./utility/LiveRegion.md) - Accessibility announcements
- [Annotation Context](./utility/AnnotationContext.md) - Tutorial overlay system
- [Hotspot](./utility/Hotspot.md) - Marking areas for tutorials
- [Tutorial Panel](./utility/TutorialPanel.md) - Guided tutorials interface
## Best Practices
When using CloudScape components:
1. **Component Composition** - Build complex UIs by composing basic components
2. **Consistent Patterns** - Follow CloudScape design patterns for consistency
3. **Visual Modes** - Support both light and dark modes
4. **Responsive Design** - Ensure your UI adapts to different screen sizes
5. **Accessibility** - CloudScape components have built-in accessibility features
## References
- [CloudScape Design System](https://cloudscape.design/)
- [Component Documentation](https://cloudscape.design/components/)
- [Design Patterns](https://cloudscape.design/patterns/)
- [GitHub Repository](https://github.com/cloudscape-design/components)
