Tempest UI

Tempest UI is an elegant, accessible, and developer-friendly UI component library for React. Designed with simplicity in mind, it empowers developers to build beautiful interfaces effortlessly while prioritizing usability and accessibility.

Built entirely with TypeScript, Tempest UI ensures type safety and an excellent developer experience.

✨ Features

• Elegant Design: Minimalist, modern components that elevate your UI.
• Built-in Accessibility: WCAG-compliant components to ensure inclusivity.
• TypeScript First: Fully typed API for a smooth development experience.
• Performance-Focused: Lightweight and fast, with no unnecessary dependencies.

🚀 Getting Started

Installation

Install Tempest UI using your favorite package manager:

# Using npm
npm install tempest-ui

# Using Yarn
yarn add tempest-ui

📦 Usage

Here’s a quick example to get started:

Import and Use a Component:

import React from "react";
import { Button, Container, Text } from "tempest-ui";

function App() {
  return (
    <Container>
      <Text variant="h1">Welcome to Tempest UI</Text>
      <Button color="primary" variant="text">
        Click Me
      </Button>
    </Container>
  );
}

export default App;

🛠️ Development

Setting Up the Library Locally

Clone the repository and install dependencies:

git clone https://github.com/yourusername/tempest-ui.git
cd tempest-ui
npm install

Run the project locally

npm run dev

📦 Components

Tempest UI comes with a variety of accessible and reusable components. Below is a list of currently available components:

• Accordion: Expandable sections for content organization.
• Avatar: Display user profile pictures or icons.
• Badge: Visual indicators for status or counts.
• Button: Clickable buttons with various styles and sizes.
• Card: Container for grouping related content.
• Checkbox: Accessible checkbox input component.
• Chip: Compact elements for displaying information or tags.
• Dropdown: Customizable dropdown menus.
• Icon: Use icons for enhanced visual elements.
• Input: Styled input fields for forms.
• Link: Styled and accessible anchor links.
• Loader: Spinners or indicators for loading states.
• Modal: Pop-up dialogs for focus-stealing content.
• ProgressBar: Displays progress visually.
• RadioButton: Accessible radio input for forms.
• Select: Custom dropdown for selecting values.
• Switch: Toggle switches for on/off states.
• Tabs: Tabbed navigation components.
• Text: Typography elements for text styling.
• Textarea: Multi-line input fields.
• Tooltip: Additional information on hover or focus.