@ralorotech/filament-ds

v1.2.0

Published

2 months ago

Filament Design System for React — precision, clarity, craftsmanship. Tree-shakeable component library with dark mode support.

0High
0Medium
0Low

rafa_lozan0

design-system react components ui filament ralorotech tree-shakeable dark-mode

Filament Design System · React

A design system for precision, clarity, and craftsmanship. Built for Ralorotech.

v1.2 · React 18+ · Tree-shakeable · Dark mode native · TypeScript

Install

npm install @filament/react

Quick start

// 1. Import the styles once at your app root
import "@filament/react/styles.css";

// 2. Wrap your app with the ThemeProvider
import { ThemeProvider } from "@filament/react";

export default function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <YourApp />
    </ThemeProvider>
  );
}

// 3. Use any component
import { Button, Badge, Card } from "@filament/react";

<Button variant="cta">Cotizar</Button>
<Badge variant="emerald">Active</Badge>

Tree-shaking

Every component is exposed under its own subpath so unused code never enters your bundle:

// Optimal — bundles only Button + its CSS
import { Button } from "@filament/react/Button";
import "@filament/react/styles/Button.css";
import "@filament/react/styles/tokens.css";

Or use the barrel — modern bundlers (Vite, webpack 5, Rollup, esbuild) will tree-shake correctly because sideEffects is restricted to CSS files only.

import { Button } from "@filament/react"; // tree-shaken

What's inside

Foundation

Tokens — primitive colors (bone, graphite, emerald, flame, signal) + semantic tokens (--bg, --text, --accent, …) that adapt to light/dark.
Typography — Geist (UI/body) + JetBrains Mono (technical/metadata).
Spacing — 8px base scale.
Shadows & radius — theme-aware.

Primitives

Button, Badge, Card, Field (Label/Input/Hint/Error/Textarea), Select, SegmentedControl.

Composite

Modal (standard / accent / confirm), Carousel, 12 background Patterns (Grid, Dots, Inverse, Hatch, Cross, Lines, PCB, Noise, FadeDot, Wave, Iso, Hex).

Typography components

Display, H1-H4, Body, BodyLg, BodySm, Lead, Eyebrow, Mono, Micro, Caption, Blockquote, CodeBlock, InlineCode, Strong, Link, Em, UnorderedList, OrderedList.

Data

KPICard, BarChart, PerfTable.

E-commerce

ProductCard, PricingTable, CartSummary.

3D Printing domain

PrintMonitor, MaterialSelector, TempGauge, LayerConfigurator.

Gallery

GalleryGrid, GalleryItem, GalleryFilters.

Heroes

5 base patterns (HeroTypewriter, HeroSplit, HeroStats, HeroMarquee, HeroOrbital) plus 20 vertical variants (ENG-01…PCB-05).

Marketing

YouTubeThumbnail, OpenGraphImage, BlogThumbnail, InstagramSquare, StoryTemplate.

Theme

import { useTheme } from "@filament/react";

function ThemeToggle() {
  const { theme, toggle } = useTheme();
  return (
    <button onClick={toggle}>
      {theme === "dark" ? "☀️" : "🌙"}
    </button>
  );
}

ThemeProvider writes data-theme on <html> and persists in localStorage["filament-theme"]. Defaults to system preference.

Reference

The full visual spec lives in design.md and design-system.html. The TypeScript source under src/ is the implementation source of truth.

License

MIT