Skip to main content

Components

Teardrop provides a comprehensive set of components to build consistent Hardwater interfaces.

Component Categories​

Forms and Input​

  • Button
  • Input (Coming soon)
  • Select (Coming soon)
  • Checkbox (Coming soon)
  • Radio (Coming soon)
  • Textarea (Coming soon)

Layout and Structure​

  • Box - Generic container
  • Stack - Vertical layout
  • Inline - Horizontal layout
  • Grid (Coming soon)

Messaging​

  • Flag (Coming soon)
  • Banner (Coming soon)
  • Toast (Coming soon)

Status Indicators​

  • Badge (Coming soon)
  • Spinner (Coming soon)
  • Progress (Coming soon)
  • Breadcrumbs (Coming soon)
  • Tabs (Coming soon)
  • Menu (Coming soon)

Overlays​

  • Modal (Coming soon)
  • Dropdown (Coming soon)
  • Tooltip (Coming soon)

Images and Icons​

  • Icon (Coming soon)
  • Avatar (Coming soon)
  • Image (Coming soon)

Text and Data Display​

  • Heading (Coming soon)
  • Text (Coming soon)
  • Table (Coming soon)
  • Code (Coming soon)

Using Components​

Installation​

npm install @hardwater/teardrop

Basic Usage​

import { Button, Box, Stack } from '@hardwater/teardrop';

function App() {
  return (
    <Box padding="medium">
      <Stack gap="medium">
        <Button variant="primary">Click me</Button>
      </Stack>
    </Box>
  );
}

Theming​

import { ThemeProvider } from '@hardwater/teardrop';
import { hardwaterTheme } from '@hardwater/teardrop/themes/hardwater';

<ThemeProvider theme={hardwaterTheme}>
  <App />
</ThemeProvider>

Component Status​

Components are marked with release phases:

  • Stable - Ready for production use
  • Beta - Available but may have breaking changes
  • Alpha - Early release, use with caution
  • Deprecated - Will be removed in future versions

Accessibility​

All components are built with accessibility in mind:

  • Keyboard navigation
  • Screen reader support
  • ARIA attributes
  • Focus management

Learn more about accessibility →

Resources​