Festval-ui NPM

Festval UI

Festval UI é um Design System desenvolvido para a empresa Festval, utilizando React, TailwindCSS e Radix UI. Ele fornece componentes reutilizáveis e acessíveis para a construção de interfaces consistentes e modernas.

📖 Documentação

A documentação completa do Festval UI pode ser encontrada no seguinte link:

🔗 Festval UI Documentation

🚀 Tecnologias Utilizadas

React - Biblioteca para construção de interfaces de usuário
TailwindCSS - Framework para estilização rápida e eficiente
Radix UI - Componentes acessíveis e de alta qualidade para React

📦 Componentes Disponíveis

Componente	Status
AlertDialog	✅ Implementado
Avatar	✅ Implementado
Button	✅ Implementado
Calendar	✅ Implementado
Card	✅ Implementado
Checkbox	✅ Implementado
DatePicker	✅ Implementado
Dialog	✅ Implementado
Footer	✅ Implementado
Header	✅ Implementado
Heading	✅ Implementado
Input	✅ Implementado
InputFile	✅ Implementado
Label	✅ Implementado
Menu	✅ Implementado
MonthPicker	✅ Implementado
NavigationMenu	✅ Implementado
Popover	✅ Implementado
Select	✅ Implementado
Table	✅ Implementado
Text	✅ Implementado
TextArea	✅ Implementado
YearPicker	✅ Implementado
Notification	⏳ Em desenvolvimento
CheckboxGroup	⏳ Em desenvolvimento

📌 Instalação

Para instalar o Festval UI em seu projeto, utilize:

npm install festval-ui

Ou com Yarn:

yarn add festval-ui

🛠️ Uso

AlertDialog

import { AlertDialog } from "festval-ui";

function AlertExample() {
  return (
    <AlertDialog>
      <AlertDialog.Trigger>Open</AlertDialog.Trigger>
      <AlertDialog.Content>
        <AlertDialog.Title>Confirmação</AlertDialog.Title>
        <AlertDialog.Description>Tem certeza que deseja continuar?</AlertDialog.Description>
        <AlertDialog.Action>Confirmar</AlertDialog.Action>
        <AlertDialog.Cancel>Cancelar</AlertDialog.Cancel>
      </AlertDialog.Content>
    </AlertDialog>
  );
}

Avatar

import { Avatar } from "festval-ui";

function AvatarExample() {
  return <Avatar src="https://via.placeholder.com/150" alt="Usuário" />;
}

Button

import { Button } from "festval-ui";

function ButtonExample() {
  return <Button variant="primary">Clique Aqui</Button>;
}

Calendar

import { Calendar } from "festval-ui";

function CalendarExample() {
  return <Calendar />;
}

Card

import { Card } from "festval-ui";

function CardExample() {
  return (
    <Card>
      <Card.Header>Título do Card</Card.Header>
      <Card.Body>Conteúdo do Card</Card.Body>
    </Card>
  );
}