Components

The Rebuy Design System provides a comprehensive set of React components built with accessibility and consistency in mind.

Component Categories

Layout

Components for structuring page layout:

• Card — Container with header, content, and footer
• ScrollArea — Scrollable container with custom scrollbars
• Separator — Visual divider between content sections

Forms

Input and form components:

• Button — Primary action trigger
• Input — Text input field
• Select — Dropdown selection
• Checkbox — Boolean selection
• RadioGroup — Single selection from multiple options

Navigation

Navigation and wayfinding:

• SideNavigation — Vertical navigation menu
• Breadcrumb — Page hierarchy indicator
• Tabs — Tabbed content organization

Data Display

Components for displaying data:

• DataGrid — Tabular data with sorting and filtering
• Badge — Status indicators and labels
• CodeBlock — Syntax-highlighted code display

Feedback

User feedback components:

• Alert — Contextual messages
• Dialog — Modal dialogs
• Toast — Temporary notifications

Usage Patterns

All components follow consistent patterns:

1. Variants — Use variant prop for visual variations
2. Sizes — Use size prop for size adjustments
3. Composition — Components are designed to compose together

import { Button, Card, CardHeader, CardContent } from '@rebuy/components';

<Card>
  <CardHeader>Actions</CardHeader>
  <CardContent>
    <Button variant="primary" size="lg">
      Submit
    </Button>
  </CardContent>
</Card>

Component Status

View the Component Matrix for the current status of all components including:

• Code implementation status
• Storybook coverage
• Figma mapping