eden-components

Minimalist React 18 component library built with Tailwind CSS, class-variance-authority (CVA), and Lucide icons. Designed for the Eden ecosystem.

Installation

npm install eden-components react react-dom tailwindcss lucide-react

Setup

1. Import global styles

// main.tsx or App.tsx
import 'eden-components/styles.css'

2. Configure Tailwind

// tailwind.config.js
export default {
  content: [
    './index.html',
    './src/**/*.{ts,tsx}',
    './node_modules/eden-components/dist/**/*.{js,cjs}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Rubik', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Components

Button

import { Button } from 'eden-components'

<Button variant="primary" size="lg">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Delete</Button>
<Button disabled><Spinner size="sm" /> Loading</Button>

Variants: primary | outline | ghost | danger Sizes: sm | md | lg

Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'eden-components'

<Card>
  <CardHeader>
    <CardTitle>Project Title</CardTitle>
    <CardDescription>Brief description</CardDescription>
  </CardHeader>
  <CardContent>Content here</CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Input & Textarea

import { Input, Textarea } from 'eden-components'

<Input label="Email" placeholder="[email protected]" error="Invalid email" />
<Textarea label="Notes" hint="Max 500 characters" />

Badge

import { Badge } from 'eden-components'

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Error</Badge>

Dialog

import { Dialog } from 'eden-components'

<Dialog open={isOpen} onClose={() => setOpen(false)} title="Confirm" size="md">
  <p>Are you sure?</p>
</Dialog>

Select

import { Select } from 'eden-components'

<Select
  label="Role"
  options={[
    { value: 'admin', label: 'Admin' },
    { value: 'user', label: 'User' },
  ]}
/>

Table

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from 'eden-components'

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice</TableCell>
      <TableCell><Badge>Active</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Avatar

import { Avatar } from 'eden-components'

<Avatar src="/avatar.jpg" fallback="JD" size="md" />

Tabs

import { Tabs, TabsList, TabTrigger, TabContent } from 'eden-components'

<Tabs>
  <TabsList>
    <TabTrigger value="tab1">Overview</TabTrigger>
    <TabTrigger value="tab2">Settings</TabTrigger>
  </TabsList>
  <TabContent value="tab1">Overview content</TabContent>
  <TabContent value="tab2">Settings content</TabContent>
</Tabs>

Other Components

| Component | Description | |-----------|-------------| | Spinner | Loading indicator with size/variant | | Separator | Horizontal or vertical divider | | Checkbox | Checkbox with label support | | Accordion | Collapsible sections | | Skeleton | Loading placeholder shimmer |

License

MIT