Tamia NPM | npm.io

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

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

Install Tâmia and peer dependencies:

npm install tamia @pandacss/dev

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: []
});

Create a PostCSS config, postcss.config.cjs:

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

Update your package.json:

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

Add this line to your global CSS:

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

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

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

+ styled-system

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;

Generate the styled system, run:

npm run prepare --clean

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).