Text

The type scale as a component, one variant per voice.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Text } from "@aile.sh/elia";

export function Example() {
  return (
    <div className="flex max-w-xs flex-col gap-1.5">
      <Text variant="display">Supplier overview</Text>
      <Text variant="title">Active models</Text>
      <Text variant="subtitle">Keys expiring this week</Text>
      <Text variant="body">Rotate provider keys before the billing cycle closes.</Text>
      <Text variant="label">API key</Text>
      <Text variant="caption">Last synced 2 minutes ago</Text>
      <Text variant="mono">aile.sh/keys</Text>
      <Text variant="serif">the brand voice, in serif</Text>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia