stf-design-system

v0.0.3

Published

2 months ago

Stefanini LATAM STF Design System — a fully-typed React + shadcn/ui component library (Radix UI + Tailwind CSS v4) with the STF dark glassmorphic theme, light/dark theming, prebuilt dashboard/admin blocks, and Storybook docs.

Downloads

0High
0Medium
0Low

ernestomotta-stefanini

react components ui design-system shadcn radix-ui tailwindcss storybook stefanini stf

STF Design System

A fully-typed, reusable React + shadcn/ui component library with the STF dark glassmorphic theme (and a coherent light theme). Built with Vite (library mode), Tailwind CSS v4, Radix UI primitives and TypeScript. Ships ESM + CJS bundles, .d.ts declarations, a precompiled stylesheet and a Tailwind preset.

Proprietary — © Stefanini LATAM. All rights reserved. See LICENSE.

Install

npm install stf-design-system
# peer dependencies (provided by your app):
npm install react react-dom

Styles

Pick one of two approaches.

1. Tailwind v4 (recommended if your app already runs Tailwind) — import the preset and add the library to your sources so any utility class you pass via className is generated. Do not also import styles.css — it bundles its own Tailwind core + preflight, which would double-apply preflight in an app that already runs Tailwind:

@import 'tailwindcss';
@import 'stf-design-system/preset.css';
@source '../node_modules/stf-design-system/dist';

2. Precompiled CSS (zero-config, for apps NOT running Tailwind) — import the ready-made stylesheet once at your app root:

import 'stf-design-system/styles.css'

Usage

The STF tokens are scoped to .stf-scope so they never collide with a host app's own shadcn tokens. Wrap your STF content (or the whole app root) in an element with stf-scope — it is the dark STF brand theme by default. Portaled overlays (Dialog, Select, Tooltip, …) are self-scoped so they always render correctly. Every component accepts a className, merged with tailwind-merge so your classes win:

import { Button, Card, CardHeader, CardTitle, CardContent } from 'stf-design-system'

export function Example() {
  return (
    <div className="stf-scope">
      <Card className="w-80">
        <CardHeader>
          <CardTitle>Hello</CardTitle>
        </CardHeader>
        <CardContent>
          <Button className="w-full">Continue</Button>
        </CardContent>
      </Card>
    </div>
  )
}

BackgroundWrapper already applies stf-scope, so wrapping your page in it is enough.

Theming

.stf-scope is the dark STF brand theme by default. Opt into the light variant with stf-light — on the same element (class="stf-scope stf-light") or on an ancestor such as <html class="stf-light"> (the ancestor form also re-themes portaled overlays). Override any token by redefining its CSS variable on .stf-scope:

.stf-scope {
  --primary: #4a9eff; /* STF accent */
  --radius: 0.5rem;
}

The default type family is Arial (--font-sans: Arial, Helvetica, sans-serif).

Components

All canonical shadcn/ui components (~48) plus composed blocks: Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, DatePicker, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputOTP, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner (Toaster), Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip — plus blocks (BackgroundWrapper, TopNav, StatCard, SessionInfoCard, ActivityFeed, ChartCard, BarChartCard, PageHeader). See Storybook for per-component docs and code examples.

Coexistence with an app that already uses Radix

The library is designed to drop into a project that already uses Radix UI:

react/react-dom are peer dependencies, so your app's single React instance is always used. Radix and react-hook-form ship as regular dependencies (externalized, not bundled), so npm dedupes them with your app when the versions share the same major.
STF components are interchangeable as complete units — swap a raw Radix Dialog for STF's <Dialog>; don't mix STF parts with your own raw parts of the same primitive.
.stf-scope confines all STF tokens and base styles, so your app's own :root/.dark shadcn tokens are never touched.

Keep Radix / react-hook-form on the same major version as your app to avoid duplicate copies.

Development

npm run dev            # vite dev server
npm run storybook      # component explorer with light/dark toggle
npm run build          # produce dist/ (js, cjs, d.ts, styles.css, preset.css)
npm run typecheck      # tsc --noEmit
npm run build-storybook

Open Storybook and see Overview → All Components for the full gallery.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme