@framingui/ui

@framingui/ui

Production-ready React components with CSS Variables theming

Installation

npm install @framingui/ui

Quick Start

import { Button, Input, Card } from '@framingui/ui';
import '@framingui/ui/styles';

export default function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to FramingUI</CardTitle>
        <CardDescription>Build accessible UIs faster</CardDescription>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter your email..." />
      </CardContent>
      <CardFooter>
        <Button variant="primary">Get Started</Button>
      </CardFooter>
    </Card>
  );
}

Components

Primitives (14)

Button, Input, Checkbox, Radio, Switch, Slider, Text, Heading, Badge, Avatar, Progress, Link, Image, List

Composed (6)

Card, Form, Modal, Dropdown, Tabs, Table

Key Features

• WCAG 2.1 AA Compliant: Fully accessible
• CSS Variables: 3-layer token system (Atomic → Semantic → Component)
• Type-Safe: Full TypeScript support
• Zero Config: Works out of the box
• 98%+ Test Coverage: Production-ready quality

Documentation

• Component Reference
• Theming Guide
• CSS Variables Reference

License

MIT