rechta-ds

v1.0.0

Published

2 months ago

Rechta Design System — monorepo

0High
0Medium
0Low

componly-co

Rechta Design System

Malachite × Porcelain — a dark-first React component library built on shadcn/ui + Radix UI

Packages

| Package | Version | Description | |---------|---------|-------------| | @rechta/ui | 2.1.0 | React component library (atoms, molecules, organisms) | | @rechta/tokens | 2.1.0 | Design tokens — CSS variables, Tailwind config, JSON |

Quick start

Install

# pnpm (recommended)
pnpm add @rechta/ui @rechta/tokens

# npm
npm install @rechta/ui @rechta/tokens

# yarn
yarn add @rechta/ui @rechta/tokens

Configure Tailwind

// tailwind.config.js
import rechta from '@rechta/tokens/tailwind';

export default {
  presets: [rechta],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@rechta/ui/dist/**/*.js',
  ],
};

Add global CSS

// app/layout.tsx (or your root file)
import '@rechta/tokens/css';

This imports the CSS custom properties for both [data-theme="dark"] (default) and [data-theme="light"].

Set your theme

<html data-theme="dark">   {/* dark (default) */}
<html data-theme="light">  {/* light */}

Use components

import { Button, Badge, Card } from '@rechta/ui';
// or import tree-shakeable sub-paths:
import { Button } from '@rechta/ui/atoms';
import { PricingCard } from '@rechta/ui/molecules';

export default function App() {
  return (
    <Card variant="raised" glow="brand">
      <Badge variant="brand" dot>Active</Badge>
      <Button leftIcon={<Plus />}>Create link</Button>
    </Card>
  );
}

Component inventory

Atoms

| Component | Description | |-----------|-------------| | Button | 9 variants × 8 sizes — brand, emerald, blue, porcelain, secondary, ghost, outline, destructive, link | | Badge | 12 variants, optional dot indicator, mono font | | Input | Left/right element slots, 3 sizes, 4 states | | Textarea | Resizable, same states as Input | | Toggle | Radix Switch — fully accessible | | Avatar | 5 sizes, image + initials fallback | | Typography | Display, heading, body, caption, mono presets | | Skeleton | Animated shimmer loading placeholder | | Divider | With optional label | | Spinner | Brand-colored loading indicator |

Molecules

| Component | Description | |-----------|-------------| | Card | 8 variants, hover, glow, padding props | | Accordion | Radix-based, single/multiple open modes | | PricingCard | With popular callout, feature list | | TestimonialCard | Quote, avatar, attribution | | Tooltip | Radix tooltip, all 4 sides |

Organisms

| Component | Description | |-----------|-------------| | Navbar | With announcement banner, nav links, CTA | | LogoMarquee | Auto-scrolling logo marquee | | FeatureTabs | Animated tab-based feature showcase |

Charts

| Component | Description | |-----------|-------------| | AreaChart | Recharts-based, brand-colored | | BarChart | Grouped / stacked | | DataTable | Sortable, filterable table |

Token system

All components use CSS custom properties (--c-*) so they respond to theme changes without re-rendering.

/* Brand */
--c-brand          /* #09E85E  malachite */
--c-brand-hover    /* #0CF568 */
--c-brand-active   /* #07C44F */
--c-brand-focus    /* rgba(9,232,94,0.25) */
--c-brand-subtle   /* rgba(9,232,94,0.08) */

/* Surfaces */
--c-bg             /* root canvas */
--c-bg-surface     /* card default */
--c-bg-elevated    /* modal/popover */

/* Text */
--c-text           /* primary — 21:1 */
--c-text-2         /* secondary — 9.2:1 */
--c-text-3         /* tertiary — 5.7:1 */

/* Borders */
--c-border         /* default */
--c-border-mid     /* hover */
--c-border-strong  /* focus/pressed */

Full token reference: packages/tokens/src/tokens.json

Development

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Start Storybook
pnpm storybook

# Watch mode (for UI package)
pnpm --filter @rechta/ui dev

Creating a changeset (for release)

pnpm changeset        # describe your changes
pnpm version-packages # bump versions
pnpm release          # build + publish to npm

Publishing to npm

Set NPM_TOKEN in your GitHub repository secrets
Set CHROMATIC_PROJECT_TOKEN for Storybook visual testing (optional)
Push to main — the Release workflow will open a Version PR
Merge the Version PR — packages are automatically published

Manual publish:

pnpm build
pnpm release  # runs: changeset publish

Contributing

See CONTRIBUTING.md.