Tâmia

Tâmia is a tiny React component library with themable primitives that you can use to quickly start working on a new project.

Based on

• TypeScript
• React
• styled-components
• styled-system

Tools

There are a few other things made specifically for Tâmia:

• tamia-gatsby-link: Render Gatsby Link component with Tâmia styles
• eslint-config-tamia: ESLint config

Documentation

Documentation is here.

Getting started

1. Install Tâmia and peer dependencies:

npm install tamia styled-components

2. Create a theme.

Copy the default theme to src/theme.tsx and modify it according to your taste:

3. Type your theme.

Create src/styled.d.ts and import there your theme:

import theme from './theme';

type ThemeInterface = typeof theme;

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends ThemeInterface {}
}

4. Wrap your app in a root container:

import React from 'react';
import { TamiaRoot } from 'tamia';
import theme from './theme';

const Root = ({ children }) => (
  <TamiaRoot theme={theme}>{children}</TamiaRoot>
);

export default Root;

The Name

Tâmia is a chipmunk in Portuguese. It refers to Squirrelstrap, my love of small cheeky creatures and “Chip ’n Dale Rescue Rangers” (which is exactly framework’s aim).

History

Tâmia has evolved from a folder on my disk with a few CSS and JS files that I copypasted to every new project in 2000s. Notable iterations are:

• Grunt + Stylus + jQuery (2013)
• Webpack + browser-sync + ES6/Babel + Web Components + Stylus (2016)
• Webpack 2 + browser-sync + PostCSS + cssnext + CSS Modules + ES6/Babel (2017)
• React + Emotion + ES6/Babel (2018)
• React + styled-components + styled-system + TypeScript (2019)

---

License

The MIT License, see the included License.md file.