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

| Component | Import | |-----------|--------| | Accordion | @tribepad/themis/elements/Accordion | | Avatar | @tribepad/themis/elements/Avatar | | Badge | @tribepad/themis/elements/Badge | | Breadcrumbs | @tribepad/themis/elements/Breadcrumbs | | Button | @tribepad/themis/elements/Button | | ButtonGroup | @tribepad/themis/elements/ButtonGroup | | Card | @tribepad/themis/elements/Card | | Carousel | @tribepad/themis/elements/Carousel | | Chart | @tribepad/themis/elements/Chart | | Checkbox | @tribepad/themis/elements/Checkbox | | CheckboxGroup | @tribepad/themis/elements/CheckboxGroup | | DatePicker | @tribepad/themis/elements/DatePicker | | Dropdown | @tribepad/themis/elements/Dropdown | | FileField | @tribepad/themis/elements/FileField | | FormLayout | @tribepad/themis/elements/FormLayout | | Modal | @tribepad/themis/elements/Modal | | NumberField | @tribepad/themis/elements/NumberField | | OTPInput | @tribepad/themis/elements/OTPInput | | Panel | @tribepad/themis/elements/Panel | | Progress | @tribepad/themis/elements/Progress | | RadioGroup | @tribepad/themis/elements/RadioGroup | | Resizable | @tribepad/themis/elements/Resizable | | Select | @tribepad/themis/elements/Select | | Skeleton | @tribepad/themis/elements/Skeleton | | Switch | @tribepad/themis/elements/Switch | | Table | @tribepad/themis/elements/Table | | Tabs | @tribepad/themis/elements/Tabs | | TextField | @tribepad/themis/elements/TextField | | TimeField | @tribepad/themis/elements/TimeField | | Toast | @tribepad/themis/elements/Toast | | Tooltip | @tribepad/themis/elements/Tooltip |

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