Reference Components

Ready-to-style functional components for React applications and custom component libraries.

• style however you want
• optimized for low bundle size
• solid base for creating your own component library
• React 17+
• Heavily tested

Components

• Button
• Tabs
• Icon

Styling

• with SCSS/LESS or other preprocessors

.icon-class {
  padding: 4px;
}

<Button classNames={{
  icon: 'icon-class'
}}>
  Hello
</Button>

Each component has its own list of classNames.

• with Tailwind

<Button classNames={{
  icon: 'bg-blue p-4'
}}>
  Hello
</Button>

• with classic CSS classes

.ref-button {
  color: red;
}

<Button>Hello</Button>

Each component has its own classes prefixed with ref-.

Themes

Use ThemeProvider to leverage dynamic theming.

import { ThemeProvider, ITheme } from 'reference-components'

const theme: ITheme = {
  Button: {
    borderRadius: '3px'
  }
}

root.render(
  <ThemeProvider theme={theme}>
    <App  />
  </ThemeProvider>
)

Development

Start local development server with Ladle

npm start

Project under active development, new components and features are being added. Contributions are always welcome.

License

MIT License. See LICENSE file for more details.