raynaui-core

v0.1.0

Published

a year ago

A modern, accessible React component library with AI-powered UI generation

Downloads

0High
0Medium
0Low

gudie

react components ui design-system tailwind typescript accessibility radix-ui component-library

@raynaui/core

A modern, accessible React component library built with TypeScript, Tailwind CSS, and Radix UI primitives.

✨ Features

🎨 Beautiful Design - Clean, modern components with dark/light theme support
♿ Accessibility First - WCAG 2.1 AA compliant with keyboard navigation
🔧 Highly Customizable - CSS variables and variant-based theming
📱 Responsive - Mobile-first design principles
🚀 Developer Experience - Full TypeScript support with IntelliSense
🎪 Framework Agnostic - Works with Next.js, Vite, Create React App

📦 Installation

npm install @raynaui/core
# or
yarn add @raynaui/core
# or
pnpm add @raynaui/core

🚀 Quick Start

Install the package:

npm install @raynaui/core

Import styles in your app:

// Import in your main app file (App.tsx, _app.tsx, or main.tsx)
import '@raynaui/core/styles.css'

Use components:

import { Button, Card, CardHeader, CardTitle, CardContent } from '@raynaui/core'

function App() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Welcome to RaynaUI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

🧩 Available Components

Button - Multiple variants with loading states and icons
Input - Form inputs with validation and labels
Textarea - Multi-line text input with resize options
Card - Flexible content containers
Modal - Accessible dialog components
Checkbox - Form checkboxes with indeterminate state
RadioGroup - Single-choice selection components
Switch - Toggle switches for settings
Select - Dropdown selection with search

🎨 Customization

RaynaUI uses CSS variables for theming. You can customize the design system by overriding these variables:

:root {
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  /* ... more variables */
}

Dark Mode

Toggle dark mode by adding the dark class to your root element:

<html className="dark">
  {/* Your app */}
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme