Trace UI

A React component library with a distinct "sketchy" hand-drawn aesthetic, built for developers who want to add personality to their applications.

Features

• Hand-drawn Aesthetic: Components feature sketchy borders, messy underlines, and wobble effects.
• Comprehensive Library: Includes inputs, data display, feedback, navigation, and layout components.
• Theming Support: Built-in support for Light and Dark modes.
• Accessible: Built with accessibility in mind (ARIA attributes, keyboard navigation).
• TypeScript: Written in TypeScript for type safety and great developer experience.

Installation

npm install @henderito/trace-ui
# or
yarn add @henderito/trace-ui

Note: This library currently requires a local setup or linking as it is in MVP stage.

Getting Started

1. Wrap your application with ThemeProvider:

import { ThemeProvider } from '@henderito/trace-ui';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

2. Import Global Styles:

Make sure to import the CSS in your main entry file (e.g., main.tsx or App.tsx):

import '@henderito/trace-ui/dist/style.css'; 
// or relative path if local: './styles/index.css'

3. Use Components:

import { Button, Card, CardBody } from '@henderito/trace-ui';

function MyComponent() {
  return (
    <Card>
      <CardBody>
        <Button variant="primary">Click Me</Button>
      </CardBody>
    </Card>
  );
}

Theming

Trace UI uses CSS variables for easy customization. You can override these in your global CSS.

Key Tokens:

| Token | Description | Default | |-------|-------------|---------| | --trace-color-primary | Main brand color | #3b82f6 (Blue) | | --trace-color-surface | Component background | #ffffff | | --trace-color-background | App background | #f8fafc | | --trace-color-text | Main text color | #1e293b | | --trace-font-sans | Font Family | 'Architects Daughter', cursive | | --trace-radius-md | Standard radius | 255px 15px 225px 15px / 15px 225px 15px 255px (Sketchy) |

Components

Core

• Button: Interactive buttons with wobble hover effects.
• Input: Text fields with focused rough borders.
• Dropdown: Select menus.
• Checkbox / Switch / Radio: Selection controls.
• Modal: Pop-up dialogs.

Navigation

• Tabs: Switch content views.
• Breadcrumb: Path navigation.
• Pagination: Page number navigation.
• Stepper: Progress through steps.
• Drawer: Slide-out panels.

Feedback

• Alert: Contextual info messages.
• Toast: Temporary notifications.
• Progress: Loading bars with texture.
• Spinner / Skeleton: Loading states.

Data Display

• Card: Boxed content containers.
• Table: tabular data display.
• Avatar: User profile images.
• Accordion: Collapsible content.
• Tooltip: Hover info bubbles.
• Badge: Status indicators.

Layout

• Container: Centered content wrapper.
• Stack: Flexbox layout utility.
• Grid: CSS Grid layout utility.
• Divider: Sketchy separator lines.

Contributing

1. Fork the repo.
2. Create your feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add some amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

License

MIT