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
• Panda CSS

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 @pandacss/dev

2. Create a Panda CSS config, panda.config.cjs:

import { defineConfig } from '@pandacss/dev';
import tamia from 'tamia';
import { theme } from './src/theme';

export default defineConfig({
  ...theme,

  presets: [tamia],

  // Opt out of all default
  eject: true,

  // Output directory
  outdir: 'styled-system',

  // Generate React components based on patterns
  jsxFramework: 'react',

  // Don't include CSS reset
  preflight: false,

  // Where to look for CSS declarations
  include: ['./src/**/*.{js,jsx,ts,tsx,astro}'],

  // Files to exclude
  exclude: []
});

3. Create a PostCSS config, postcss.config.cjs:

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {}
  }
};

4. Update your package.json:

{
  "scripts": {
+   "prepare": "panda codegen",
    "dev": "astro dev",
    "start": "astro start",
    "build": "astro build",
    "preview": "astro preview"
  }
}

5. Add this line to your global CSS:

@layer reset, base, tokens, recipes, utilities;

Tip: Don't forget to import it from your main template.

6. Add the generated files to your ignore files: .gitignore, .prettierignore, .eslintignore, etc:

+ styled-system

7. Create a theme, src/theme.ts.

Check out the default theme,and extend it according to your taste:

import { type Config } from '@pandacss/dev';

export const theme = {
  theme: {
    extend: {
      tokens: {
        colors: {
          text: { value: '#222' },
          background: { value: '#fff' },
          primary: { value: '#6e56ba' },
          accent: { value: '#d396c3' },
          border: { value: '#ddd' }
        },
        fonts: {
          body: {
            value: "ProximaNova, 'Helvetica Neue', Arial, sans-serif"
          },
          heading: {
            value: "AzoSans, 'Helvetica Neue', Arial, sans-serif"
          },
          ui: {
            value: "AzoSans, 'Helvetica Neue', Arial, sans-serif"
          }
        },
        fontSizes: {
          xxl: { value: '2.1rem' },
          xl: { value: '1.3rem' },
          l: { value: '1.1rem' },
          m: { value: '1rem' },
          s: { value: '0.9rem' },
          xs: { value: '0.75rem' }
        },
        fontWeights: {
          normal: { value: '400' },
          heading: { value: '400' },
          bold: { value: '800' },
          ui: { value: '800' }
        },
        lineHeights: {
          base: { value: '1.5' },
          heading: { value: '1.1' },
          small: { value: '1.4' },
          large: { value: '1.8' }
        },
        letterSpacings: {
          base: { value: '0' },
          heading: { value: '0' },
          uppercase: { value: '0.15ex' }
        },
        borders: {},
        radii: {},
        shadows: {},
        easings: {},
        durations: {}
      },
      semanticTokens: {
        fontSizes: {
          root: { value: '1.125em' },
          article: { value: '1.1rem' }
        },
        spacing: {
          listMargin: { value: '1.2rem' }
        },
        sizes: {
          textMaxWidth: { value: '48rem' }
        }
      }
    }
  },

  globalCss: {}
} as const satisfies Config;

9. Generate the styled system, run:

npm run prepare --clean

9. Copy the components, you're going to use fro src/components.

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)
• React + styled-components + TypeScript + custom primitive components (2022)
• React + vanilla-extract + TypeScript (2023)
• React + Panda CSS + TypeScript (2024)

License

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