@arturoliveira/vesta-ui

A modern, accessible React component library built with Ark UI and Tailwind CSS.

Features

• Modern Design - Clean, professional components with Tailwind CSS
• Accessible - Built on Ark UI with ARIA compliance
• TypeScript - Full type safety out of the box
• Customizable - Easy to theme and extend
• Tree-shakeable - Import only what you need
• Lightweight - Minimal bundle size

Installation

npm install @arturoliveira/vesta-ui
# or
yarn add @arturoliveira/vesta-ui
# or
pnpm add @arturoliveira/vesta-ui

Peer Dependencies

Make sure you have React installed:

npm install react react-dom

Usage

Import Styles

Import the CSS file in your app entry point:

import '@arturoliveira/vesta-ui/styles';

Use Components

import { Button, Card, Dialog, Input } from '@arturoliveira/vesta-ui';

function App() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Available Components

• Badge - Display status or category labels
• Button - Action buttons with multiple variants
• Card - Content container with optional header and footer
• Checkbox - Checkbox input with label support
• Dialog - Modal dialogs and popups
• Input - Text input fields
• Progress - Progress bars and indicators
• Select - Dropdown selection menus
• Table - Data tables with sorting and filtering
• Toast - Notification messages

Component Examples

Button

import { Button } from '@arturoliveira/vesta-ui';

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Input

import { Input } from '@arturoliveira/vesta-ui';

<Input
  placeholder="Enter text..."
  label="Username"
  error="This field is required"
/>

Dialog

import { Dialog } from '@arturoliveira/vesta-ui';

<Dialog
  trigger={<Button>Open Dialog</Button>}
  title="Dialog Title"
  description="Dialog description"
>
  <p>Dialog content goes here</p>
</Dialog>

Styling

Vesta UI uses Tailwind CSS for styling. You can customize the theme by extending your Tailwind configuration:

// tailwind.config.js
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@arturoliveira/vesta-ui/dist/**/*.{js,mjs}'
  ],
  theme: {
    extend: {
      // Your custom theme
    }
  }
}

Development

# Install dependencies
npm install

# Start Storybook
npm run dev

# Build library
npm run build

# Build Storybook
npm run build:storybook

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Artur Gomes

Links

• Documentation
• Report Issues
• Ark UI
• Tailwind CSS