twrt-design-system

TWRT Design System - Production component library inspired by twrt.com.br

Installation

npm install twrt-design-system
# or
pnpm add twrt-design-system

Usage

Design Tokens

import { tokens, primitives, semantic } from 'twrt-design-system';
// or
import tokens from 'twrt-design-system/tokens';

CSS Custom Properties

@import 'twrt-design-system/tokens.css';

Tailwind CSS

// tailwind.config.js
import preset from 'twrt-design-system/tailwind-preset';

export default {
  presets: [preset],
  // ...
};

Components

import { Button } from 'twrt-design-system/components/Button/Button';

import { Card } from 'twrt-design-system/components/Card/Card';

import { Input } from 'twrt-design-system/components/Input/Input';

import { Select } from 'twrt-design-system/components/Select/Select';

import { Modal } from 'twrt-design-system/components/Modal/Modal';

import { Alert } from 'twrt-design-system/components/Alert/Alert';

import { Navigation } from 'twrt-design-system/components/Navigation/Navigation';

import { Spinner } from 'twrt-design-system/components/Spinner/Spinner';

import { Badge } from 'twrt-design-system/components/Badge/Badge';

import { Link } from 'twrt-design-system/components/Link/Link';

import { Icon } from 'twrt-design-system/components/Icon/Icon';

import { Tabs } from 'twrt-design-system/components/Tabs/Tabs';

Available Components

• Button
• Card
• Input
• Select
• Modal
• Alert
• Navigation
• Spinner
• Badge
• Link
• Icon
• Tabs

Token Structure

The design system includes three token layers:

1. Primitives: Raw values (colors, sizes, etc.)
2. Semantic: Meaning-based aliases (primary, secondary, etc.)
3. Component: Component-specific tokens

License

MIT

---

Generated with DS Extraction System