@sofya-ds/react

React design system package for Sofya.

Install

pnpm add @sofya-ds/react

Se voce tambem quiser consumir os tokens diretamente no app, instale o pacote complementar:

pnpm add @sofya-ds/tokens

Usage

import "@sofya-ds/react/styles.css";
import { Button, Logo, SofyaProvider, Text } from "@sofya-ds/react";

export function App() {
  return (
    <SofyaProvider>
      <Logo variant="mono" size={52} monoColor="#08194D" />
      <Button>Entrar</Button>
      <Text size="h2" variant="gradient">
        Titulo com gradiente oficial da marca
      </Text>
    </SofyaProvider>
  );
}

Includes

• Components like Button, Badge, Card, Checkbox, Icon, Input, InputOTP, Link, Logo, Surface and Text
• SofyaProvider for theme application
• Distributed stylesheet at @sofya-ds/react/styles.css