stoop

A lightweight, polymorphic React component library with intuitive design tokens and built-in theming system.

Install

npm install stoop
# or
bun add stoop

Usage

Setup Provider

Wrap your app with the StoopProvider:

import { StoopProvider } from "stoop";

function App() {
  return (
    <StoopProvider theme="light">
      {/* Your app content */}
    </StoopProvider>
  );
}

Using Components

import { Stack, Text, Button } from "stoop";

function MyComponent() {
  return (
    <Stack gap="medium">
      <Text as="h1">Welcome</Text>
      <Button>Click me</Button>
    </Stack>
  );
}

Theme Switching

import { useTheme, Button } from "stoop";

function ThemeToggle() {
  const { themeName, setTheme } = useTheme();
  
  return (
    <Button onClick={() => setTheme(themeName === 'light' ? 'dark' : 'light')}>
      Switch to {themeName === 'light' ? 'Dark' : 'Light'}
    </Button>
  );
}

Development

For local development:

# Install dependencies
bun install

# Start development server
bun run dev

# Build the library
bun run build

# Lint and format
bun run lint
bun run prettier

Contributing

Feel free to get in touch with feedback, advice or suggestions. See Conventional Commits for new contributors.

License

MIT © Jackson Dolman