@supertst/ds
v0.15.1
Published
Supertest design system — React components + design tokens for Tailwind v4.
Keywords
Readme
@supertst/ds
Supertest design system — React components + design tokens for Tailwind v4.
Install
npm install @supertst/dsCSS Setup
Add to your globals.css:
@import "@supertst/ds/styles";Usage
import { Button } from "@supertst/ds"
export function MyPage() {
return <Button variant="default">Comenzar simulacro</Button>
}Brand-Aware Components
Several DS components change visuals by brand, including BrandLogo, SidebarApp, DialogRegisterStudent, EstadisticaEstudiante, SubjectSelector, SubjectPill, and SubjectSplashScreen.
In Next App Router, add the brand bootstrap script to your root layout:
import { BrandScript } from "@supertst/ds"
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="es" data-brand="colegios" suppressHydrationWarning>
<head>
<BrandScript defaultBrand="colegios" />
</head>
<body>{children}</body>
</html>
)
}If you need to switch brands at runtime, use setBrand("colegios") or setBrand("universidades").
Next App Router
In Next App Router, @supertst/ds resolves to the server-safe bundle when it is imported from a Server Component through the react-server export condition.
@supertst/ds/client is the explicit client entry for interactive primitives such as Dialog, Sheet, Popover, and other "use client" components. Import that entry only from your own client modules.
Server component:
import { Button, Card } from "@supertst/ds"
import { DetailsDialog } from "./details-dialog"
export default function Page() {
return (
<Card className="p-6">
<DetailsDialog
trigger={<Button variant="outline">Ver detalles</Button>}
/>
</Card>
)
}Client wrapper:
"use client"
import type { ReactNode } from "react"
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@supertst/ds/client"
export function DetailsDialog({ trigger }: { trigger: ReactNode }) {
return (
<Dialog>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Detalles</DialogTitle>
</DialogHeader>
</DialogContent>
</Dialog>
)
}Fonts
The DS uses SF Pro Rounded (macOS/iOS native) with Nunito as the web fallback. The package now degrades safely to "Nunito" if the font variable is missing, but to match the DS source of truth you should still load Nunito via next/font:
import { Nunito } from "next/font/google"
const nunito = Nunito({
subsets: ["latin"],
variable: "--font-nunito",
weight: ["400", "500", "600", "700", "800"],
display: "swap",
})
// Add nunito.variable to your html classNameSF Pro Rounded loads automatically on Apple devices. No extra setup needed.
Tailwind v4
This package requires Tailwind CSS v4. The CSS tokens use @theme inline which requires v4. Make sure your project has tailwindcss@^4 installed and configured.