Lone Star UI

A React 19 component library built with TypeScript, Tailwind CSS 4, and CVA (Class Variance Authority). Publishes ESM-only to npm with full type declarations.

Design Inspiration

Allan Peter's Austin TX Logo rebrand

Installation

bun install lone-star-ui

Peer dependencies: react, react-dom, and typescript.

Usage

Import components and the required stylesheet:

import "lone-star-ui/styles";
import { Button } from "lone-star-ui";

Subpath imports are available for tree-shaking:

import { Button } from "lone-star-ui/button";

Theming

All design tokens are CSS custom properties, so you can override them in your own stylesheet:

:root {
  --color-sky: oklch(60% 0.20 250);
  --color-longhorn: oklch(75% 0.15 50);
  --color-pecan: oklch(40% 0.05 60);
  --color-bluebonnet: oklch(50% 0.20 270);
  --color-mesa: oklch(95% 0.01 80);
  --color-prickly-pear: oklch(65% 0.20 340);
  --color-surface: #fafafa;
  --font-slab: 'Inter', sans-serif;
}

Available tokens

| Token | Default (light) | Description | | --- | --- | --- | | --color-sky | oklch(68% 0.17 205) | Primary teal/turquoise | | --color-longhorn | oklch(71% 0.17 65) | Burnt amber accent | | --color-pecan | oklch(35% 0.07 55) | Warm brown — text/borders | | --color-bluebonnet | oklch(52% 0.19 282) | Violet — primary actions | | --color-mesa | oklch(92% 0.02 78) | Sandstone — neutral backgrounds | | --color-prickly-pear | oklch(62% 0.22 345) | Pink-magenta — destructive/accent | | --color-surface | #ffffff | Page/card background | | --font-slab | 'Zilla Slab', Georgia, serif | Heading/display font |

Dark mode tokens are automatically redefined when the .dark class is applied.

Fonts

The default font (Zilla Slab) is not loaded automatically. To use it, either:

@import 'lone-star-ui/fonts';

Or add a <link> tag to your HTML, or override --font-slab with your own font.

Variant utilities

CVA variant configs are exported so you can apply library styles to custom elements:

import { buttonVariants } from 'lone-star-ui';

<a href="/login" className={buttonVariants({ variant: 'primary', size: 'lg' })}>
  Log in
</a>

The cva function and VariantProps type are also re-exported for building your own variant-driven components:

import { cva, type VariantProps, cn } from 'lone-star-ui';

Development

bun install              # Install dependencies
bun run build            # Build library (Bun.build + tsc declarations)
bun run dev              # Build in watch mode
bun run storybook        # Start Storybook dev server on port 6006
bun run build-storybook  # Build static Storybook
bun run typecheck        # Type-check without emitting

Architecture

Each component lives in src/components/<Name>/ with three files:

• <Name>.tsx — implementation using CVA for variants + cn() for class merging
• <Name>.stories.tsx — Storybook stories with interactive play tests
• index.ts — barrel export

Styling uses Tailwind CSS 4 with CSS custom properties in oklch color space. Consumers must import lone-star-ui/styles for Tailwind classes to work.

Contributing

See CONTRIBUTING.md for guidelines on how to get started.

License

MIT