Edges

A shared component library for Texture

Installation

yarn add @texturehq/edges

Usage

CSS Imports (Required)

Important: Import the CSS files in this exact order for proper functionality:

@import "@texturehq/edges/theme.css";
@import "@texturehq/edges/styles.css";
@import "tailwindcss";

This order is crucial because:

1. The theme CSS defines custom color variables and design tokens
2. The styles CSS provides component-specific styles
3. Tailwind CSS needs to be imported last to properly process the custom theme

Components

Import and use components as needed:

import { Button, TextField, Card } from '@texturehq/edges';

function MyComponent() {
  return (
    <Card>
      <TextField label="Name" />
      <Button>Submit</Button>
    </Card>
  );
}

Color System

The package includes a comprehensive color system defined in src/theme.css using Tailwind CSS v4's @theme inline directive. All custom colors are automatically available as utility classes.

Using Custom Colors

Your custom colors are available as utility classes:

// Brand colors
<div className="bg-brand-primary text-brand-light">Brand content</div>

// Device state colors
<div className="bg-device-charging-background border-device-charging-border">
  Charging device
</div>

// Feedback colors
<div className="bg-feedback-success-background text-feedback-success-text">
  Success message
</div>

Available Color Categories

• Brand colors: brand-primary, brand-light, brand-dark, brand-background
• Device states: device-charging-*, device-heat-*, device-cool-*, etc.
• Feedback colors: feedback-success-*, feedback-error-*, feedback-warning-*, feedback-info-*
• Standard color scales: All Tailwind color scales (red, blue, green, etc.)

Development

Build

yarn build

Development Server

yarn dev

Storybook

yarn storybook
# Default port: 6010

To use a custom port:

STORYBOOK_PORT=6011 yarn storybook

See STORYBOOK_PORT.md for multi-instance setups and dynamic port configuration.