Sobre o projeto

Sketchbook UI é uma biblioteca de componentes React estilizada para parecer desenhada à mão, voltada para projetos laterais e landing pages onde o visual esboçado e de caderno é o objetivo. O que oferece - 20 componentes, escritos em TypeScript com interfaces de prop exportadas. - Controles de formulário: Button, Input, Textarea, Checkbox, Switch, Select, RadioGroup, Slider. - Exibição de dados: Badge, Avatar, Card, Divider, Progress, Skeleton (mais SkeletonText e SkeletonCard), Spinner, Tooltip. - Feedback: Toast (com ToastContainer e useToast hook) e Modal. - Navegação: Dropdown e Accordion (com AccordionItem). Abordagem visual O visual vem de bordas SVG desenhadas à mão, texturas de papel e animações sutis, em vez de um conjunto padrão de design tokens. Os componentes expõem props `colors` e `typography` para personalização, então um botão pode ter sua própria cor de fundo, traço, cor do texto, tamanho da fonte e família tipográfica (o README usa fonte cursiva como Caveat). Um `SketchProvider` envolve o app para fornecer contexto de estilização compartilhado. Instalação e configuração Instale com npm, yarn ou pnpm (`npm install sketchbook-ui`), com react e react-dom como dependências peer. O README instrui a importar a folha de estilos uma vez no arquivo principal: `import "sketchbook-ui/style.css";` Depois importe os componentes do pacote e coloque-os dentro de `SketchProvider`. Como a importação da folha de estilos é um passo separado, esquecê-la é um erro comum na primeira execução. Nota sobre bundle e runtime O README afirma que a biblioteca não tem dependências de runtime além do React, é construída com suporte a tree-shaking para que apenas os componentes importados vão para o bundle, e pesa menos de 70 kB gzipped. O tree-shaking é ilustrado com uma importação nomeada de um único componente. Estas são as alegações do projeto; verifique conforme seu bundler e versão antes de confiar nos números. Documentação e licença Todos os componentes e variantes podem ser navegados em um Storybook hospedado. As instruções de contribuição estão em CONTRIBUTING.md e o projeto é licenciado sob MIT. Bom encaixe / menos bom encaixe É uma boa opção se você quer uma interface distinta desenhada à mão para um protótipo, site pessoal ou produto descontraído, e já trabalha com React e TypeScript. É uma escolha pior para dashboards empresariais densos, tabelas com muitos dados ou equipes que precisam de um conjunto grande, auditado por acessibilidade e consolidado de componentes — o README não descreve testes de acessibilidade, theming além das props por componente ou um leque de componentes comparável a design systems mainstream.