Themis

Accessible React component library built on React Aria primitives.

Features

• WCAG 2.2 AAA accessibility compliance
• 30+ production-ready components
• Built on React Aria for robust keyboard/screen reader support
• Tailwind CSS styling with CSS variable theming
• Full TypeScript support with Zod schema validation

Installation

pnpm add @tribepad/themis

Quick Start

import { Button } from '@tribepad/themis/elements/Button';

function App() {
  return <Button variant="default">Click me</Button>;
}

Setup

1. Import default styles

/* In your global CSS file */
@import '@tribepad/themis/styles/defaults.css';

2. Configure Tailwind CSS

Add Themis to your Tailwind content paths:

Tailwind v4:

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@tribepad/themis/dist/**/*.{js,mjs}',
  ],
};

Tailwind v3:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@tribepad/themis/dist/**/*.{js,mjs}',
  ],
};

Components

Theming

Themis uses CSS custom properties for theming. Import the defaults or define your own:

:root {
  --primary-action: #7c3aed;
  --primary-action-foreground: #ffffff;
  --page-background: #ffffff;
  --page-foreground: #1f2937;
  /* See defaults.css for all available variables */
}

License

MIT