Themify Components

A collection of reusable React components built with Tailwind CSS and TypeScript.

Installation

npm install @themify/components
# or
yarn add @themify/components
# or
pnpm add @themify/components

Prerequisites

This package requires the following peer dependencies:

npm install react react-dom tailwindcss
# or
yarn add react react-dom tailwindcss
# or
pnpm add react react-dom tailwindcss

Setup Tailwind CSS

1. Create a tailwind.config.js file in your project root:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@themify/components/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Add Tailwind directives to your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

Basic Components

import { Button, Input, Card } from '@themify/components';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Input placeholder="Enter text..." />
      <Card>
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
          <CardDescription>Card Description</CardDescription>
        </CardHeader>
        <CardContent>
          Card content goes here
        </CardContent>
      </Card>
    </div>
  );
}

Data Table

import { DataTable } from '@themify/components';

function App() {
  const columns = [
    { 
      id: 'name', 
      header: 'Name',
      accessorKey: 'name',
      enableSorting: true
    },
    { 
      id: 'email', 
      header: 'Email',
      accessorKey: 'email',
      enableSorting: true
    }
  ];

  const data = [
    { name: 'John Doe', email: '[email protected]' },
    { name: 'Jane Smith', email: '[email protected]' }
  ];

  return (
    <DataTable
      columns={columns}
      data={data}
      searchable
      searchField="name"
      pagination
      pageSize={5}
    />
  );
}

Timeline

import { Timeline, TimelineItem } from '@themify/components';

function App() {
  return (
    <Timeline>
      <TimelineItem
        title="Project Started"
        description="Initial setup and planning phase"
        date="2024-03-01"
        status="complete"
      />
      <TimelineItem
        title="Development Phase"
        description="Core features implementation"
        date="2024-03-15"
        status="current"
      />
    </Timeline>
  );
}

Tag Input

import { TagInput } from '@themify/components';

function App() {
  return (
    <TagInput
      value={["React", "TypeScript"]}
      onChange={(tags) => console.log('Tags changed:', tags)}
      placeholder="Add tags..."
    />
  );
}

Rating

import { Rating } from '@themify/components';

function App() {
  return (
    <div className="flex flex-col gap-4">
      <Rating value={4} readOnly />
      <Rating value={3.5} />
    </div>
  );
}

File Upload

import { FileUpload } from '@themify/components';

function App() {
  return (
    <FileUpload
      onFileSelect={(files) => console.log('Files selected:', files)}
      accept="image/*"
      maxSize={5 * 1024 * 1024} // 5MB
    />
  );
}

Available Components

• Button
• Input
• Checkbox
• Badge
• Card
• Tabs
• Alert
• Timeline
• TagInput
• Rating
• FileUpload
• DataTable

Contributing

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

License

MIT