Skip to main content

Components Overview

Rise AI provides a comprehensive set of UI components built with React and styled to match our minimal, black and white design system.

Design System​

All components follow the Rise Admin design philosophy:

  • Minimal & Clean - Black and white color scheme
  • Consistent - Uniform styling across all components
  • Accessible - WCAG 2.1 AA compliant
  • Responsive - Mobile-first design approach

Component Library​

Core Components​

  • Buttons - Primary, secondary, and outline button variants
  • Cards - Content containers with various layouts
  • Inputs - Form inputs with validation
  • Tables - Data tables with sorting and filtering
  • Modals - Dialog boxes and overlays

Layout Components​

  • Navigation - Sidebar and top navigation bars
  • Grid - Responsive grid system
  • Container - Content width containers
  • Spacer - Consistent spacing utilities

Feedback Components​

  • Alerts - Warning, error, success, and info messages
  • Toast - Notification system
  • Loading - Loading indicators and skeletons
  • Progress - Progress bars and indicators

Styling​

All components use CSS custom properties for theming:

/* Light Mode */
--background: hsl(0, 0%, 100%);
--foreground: hsl(0, 0%, 0%);
--border: hsl(0, 0%, 90%);

/* Dark Mode */
[data-theme='dark'] {
  --background: hsl(0, 0%, 7%);
  --foreground: hsl(0, 0%, 95%);
  --border: hsl(0, 0%, 20%);
}

Usage​

Import components directly from the library:

import { Button, Card } from '@rise-ai/components';

function MyComponent() {
  return (
    <Card>
      <Button variant="primary">Click me</Button>
    </Card>
  );
}

Customization​

Components can be customized through props:

<Button
  variant="primary"
  size="large"
  disabled={false}
  onClick={handleClick}
>
  Submit
</Button>

Best Practices​

  1. Consistency - Use the same variant across similar actions
  2. Accessibility - Always include proper ARIA labels
  3. Responsive - Test components on different screen sizes
  4. Theme Support - Ensure components work in both light and dark modes

Next Steps​