Twintrinsic Documentation

Welcome to the Twintrinsic documentation. Twintrinsic is a collection of accessible, customizable components built with Svelte 5 and Tailwind CSS.

Installation

bash

npm install twintrinsic

Usage

javascript

// In your app.css
@import 'twintrinsic/styles.css';

// In your component
import { Container, AppHeader } from 'twintrinsic';

Features

Built with Svelte 5 and Tailwind CSS
Fully accessible components with ARIA support
Responsive design with mobile-first approach
Dark mode support out of the box
Customizable theming
TypeScript support

Twintrinsic provides a set of essential components to build modern web applications:

Layout Components

Container - Responsive container with consistent padding
AppHeader - Application header with navigation
Sidebar - Collapsible side panel
BottomBar - Collapsible bottom panel

UI Components

Panel - Collapsible content panel
ButtonDropdown - Accessible dropdown menu
Separator - Visual divider with optional content

Twintrinsic uses CSS variables for theming. You can customize the look and feel by overriding these variables in your CSS:

css

:root {
  --color-primary-500: 59 130 246;   /* Blue */
  --color-secondary-500: 99 102 241;  /* Indigo */
  --color-background: 255 255 255;    /* White */
  --color-surface: 249 250 251;       /* Gray 50 */
  --color-border: 229 231 235;        /* Gray 200 */
  --color-text: 17 24 39;            /* Gray 900 */
  --color-muted: 107 114 128;        /* Gray 500 */
  --color-error-bold: 239 68 68;      /* Red */
}

Dark Mode

Dark mode is supported out of the box. Add the following to your CSS to customize dark mode colors:

css

:root[data-theme="dark"] {
  --color-background: 17 24 39;       /* Gray 900 */
  --color-surface: 31 41 55;          /* Gray 800 */
  --color-border: 75 85 99;           /* Gray 600 */
  --color-text: 243 244 246;          /* Gray 100 */
  --color-muted: 156 163 175;         /* Gray 400 */
}