ds-leobecker
Advanced tools
Design system oficial da LBK Content House. Tailwind 4 + shadcn/ui. Brutalist, monocromático, zero-radius por padrão.
Storybook: https://leobeckerdesign.github.io/ds-leobecker/ npm: https://www.npmjs.com/package/ds-leobecker
pnpm add ds-leobecker
/* app.css */
@import "tailwindcss";
@import "ds-leobecker/theme";
import { StripeButton, BadgeDot, Pill, AccentDot, BackgroundPattern } from "ds-leobecker";
<StripeButton variant="accent">Deploy now</StripeButton>
<BadgeDot label="LIVE" variant="success" />
Aplique o modo desejado no <html>:
<html class="dark"> <!-- padrão -->
<html class="light"> <!-- modo claro -->
@theme inline com paleta OKLch, 2 modos (dark + light)StripeButton, BadgeDot, AccentDot, BackgroundPattern, PillOs componentes shadcn/ui são instalados via CLI no projeto consumidor. O tema herda automaticamente.
pnpm install
pnpm run build:tokens # tokens.json → theme.css + figma-variables.json
pnpm run storybook # dev server local (http://localhost:6006)
pnpm run build # build completo (tokens + tsc)
pnpm run build-storybook # build estático do Storybook
pnpm dlx shadcn@latest add <component>
Componentes vão em src/ui/. Crie uma story em stories/components/primitives/<Name>.stories.tsx.
Usamos Changesets pra versionamento.
pnpm run changeset # descreve a mudança (escolhe patch/minor/major)
git commit + push # abre PR
Após merge em main, o GitHub Action abre uma "Version Packages" PR automática. Merge dessa PR publica no npm + builda Storybook + deploy GH Pages.
ds-leobecker/
├── .storybook/ # config Storybook
├── src/
│ ├── tokens/ # tokens.json (fonte única)
│ ├── theme.css # gerado (Tailwind 4 @theme)
│ ├── components/ # 5 custom
│ ├── ui/ # shadcn primitives (copiados via CLI)
│ ├── lib/
│ └── index.ts
├── stories/
│ ├── Introduction.mdx
│ ├── foundations/ # MDX: Colors, Typography, Radius, Shadow, Motion, Principles
│ ├── components/
│ │ ├── custom/
│ │ └── primitives/
│ └── patterns/
├── scripts/
│ └── build-tokens.ts
├── reference/ # HTMLs/CSS legados arquivados
└── .github/workflows/
MIT
FAQs
DS Leo Becker — Tailwind 4 theme + shadcn/ui + 5 custom components
We found that ds-leobecker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A malicious NuGet package impersonating Sicoob exfiltrated client IDs, PFX passwords, and banking certificates through Sentry telemetry.
Security News
Feross Aboukhadijeh joins TBPN to discuss Socket's $60M Series C, 500%+ ARR growth, AI's impact on open source, and the rise in supply chain attacks.
Security News
OSV withdrew 157 OSV malware reports after automated false positives incorrectly flagged trusted npm and PyPI packages, sending bad records into tools that rely on OSV data.