Component Library Guide

This guide provides an in-depth look at how to effectively use Magic UI’s component library in your projects.

Component Categories

Our component library is organized into several categories to help you find what you need quickly:

Layout Components

• Container: Responsive container for page content
• Grid: Flexible grid system
• Stack: Vertical and horizontal stacking
• Flex: Flexbox utilities

Form Components

• Input: Text input fields
• Select: Dropdown selection
• Checkbox: Checkbox inputs
• Radio: Radio button groups
• Button: Action buttons

Navigation Components

• Navbar: Site navigation
• Breadcrumb: Navigation breadcrumbs
• Pagination: Page navigation
• Tabs: Tab navigation

Best Practices

1. Component Composition

Use composition to build complex UIs from simple components:

<Card>
  <CardHeader>
    <CardTitle>User Profile</CardTitle>
  </CardHeader>
  <CardBody>
    <Stack spacing="md">
      <Input label="Name" />
      <Input label="Email" />
      <Button>Save Changes</Button>
    </Stack>
  </CardBody>
</Card>

2. Consistent Spacing

Use our spacing system for consistent layouts:

<Stack spacing="lg">
  <Text>Content with large spacing</Text>
  <Text>More content</Text>
</Stack>

3. Responsive Design

All components support responsive props:

<Grid cols={{ base: 1, md: 2, lg: 3 }}>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Grid>

Advanced Usage

Custom Themes

You can customize the appearance of components using our theming system:

import { ThemeProvider } from 'magic-ui';

const customTheme = {
  colors: {
    primary: '#3B82F6',
    secondary: '#10B981',
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '3rem',
  },
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app content */}
    </ThemeProvider>
  );
}

Component Variants

Many components support multiple variants:

<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>

Performance Tips

1. Tree Shaking: Import only what you need
2. Lazy Loading: Use dynamic imports for large components
3. Memoization: Use React.memo for expensive components

Conclusion

With these guidelines, you’ll be able to build consistent, beautiful, and performant UIs using Magic UI. Happy coding!