@biosai/front-end-components

A React component library built with Tailwind CSS & Shadcn offering:

• 🧩 Ready-to-use React components
• 🎯 TypeScript support
• 📱 Responsive design
• 🔧 Easy integration with existing Tailwind projects

Prerequisites

• Node.js >= 14
• React >= 16.8.0
• React DOM >= 16.8.0

🧰 Installation

1. Install the package and its dependencies:

npm install @biosai/front-end-components

2. Create or update your postcss.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
};

3. Make sure to include our classes in your Tailwind config:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@biosai/front-end-components/**/*.{js,jsx,ts,tsx}',
  ],
  plugins: [require('@tailwindcss/forms'), require('tailwindcss-animate')],
  // ... rest of your config
};

4. Import styles in your main CSS file:

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

⚙️ Development

Install dependencies

npm install

Build package

npm run build

Lint code

npm run lint

Clean build files

npm run clean

🎨 Theme Configuration

Default Theme Colors

background: '#F9FAFB',
border: '#EAF2F1',
error: '#B91C1C',
legend: '#646464',
text: '#0F172A',
white: '#FFFFFF',
yellow: '#FFD600',
orange: '#FF9500',
green: '#34C759',
blue: '#007AFF',
red: '#FF3B30',
purple: '#8E8EE5',
pink: '#FF2D55',
grey: {
  DEFAULT: '#8E8E93',
  mid: '#6D727D',
},
brown: '#A2845E',
black: '#000000',

border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
  DEFAULT: 'hsl(var(--primary))',
  foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
  DEFAULT: 'hsl(var(--secondary))',
  foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
  DEFAULT: 'hsl(var(--destructive))',
  foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
  DEFAULT: 'hsl(var(--muted))',
  foreground: 'hsl(var(--muted-foreground))',
},
accent: {
  DEFAULT: 'hsl(var(--accent))',
  foreground: 'hsl(var(--accent-foreground))',
},
popover: {
  DEFAULT: 'hsl(var(--popover))',
  foreground: 'hsl(var(--popover-foreground))',
},
card: {
  DEFAULT: 'hsl(var(--card))',
  foreground: 'hsl(var(--card-foreground))',
},

Responsive Design

All components are built with Tailwind's responsive utilities. You can use any Tailwind breakpoint prefix (sm:, md:, lg:, xl:) with the component props as well as any Tailwind class (e.g., w-full, h-10, text-primary, bg-white).

🏃‍♀️ Quick Start

You can star using the components with the default theme:

import { Button, Card } from '@biosai/front-end-components';

function MyComponent() {
  return (
    <Card>
      <Button>
        <p>Click me</p>
      </Button>
    </Card>
  );
}

Or you can use the components with your own theme:

import { Button, Card } from '@biosai/front-end-components';

function MyComponent() {
  return (
    <Card>
      <Button>
        <p>Click me</p>
      </Button>
    </Card>
  );
}

🗃️ Components available

Button

import { Button } from '@biosai/front-end-components';

<Button
  className="w-full h-10 bg-primary text-white"
  onClick={() => {}}
  disabled={false}
>
  <p>Click me</p>
  <YourLogo />
</Button>

Card

import { Card } from '@biosai/front-end-components';

<Card
  width="w-full"
  height="h-auto"
  backgroundColor="bg-primary"
  backgroundImage="path/to/image.png"
  contentAlignment="center"
  textColor="text-white"
  onClick={() => {}}
  hasBorder={false}
  contentAlignmentY="top"
  contentAlignmentX="left"
>
  {/* Card content */}
</Card>

Error

import { Error } from '@biosai/front-end-components';

<Error content="Error message" />

Legend

import { Legend } from '@biosai/front-end-components';

<Legend
  content="Legend text"
  textAlign="text-left"
  textColor="text-blue"
  textSize="text-sm"
/>

List

import { List } from '@biosai/front-end-components';

<List
  items={['Item 1', 'Item 2']}
  logo={<YourLogo />}
/>

Title

import { Title } from '@biosai/front-end-components';

<Title
  content="Title text"
  width="w-full"
  height="h-fit"
  textColor="text-primary"
  backgroundColor="bg-secondary"
  textSize="text-md"
  fontWeight="font-bold"
/>

Icon

import { Icon } from '@biosai/front-end-components';

<Icon
  logo="path/to/icon.svg"
  alt="Icon description"
  size={24}
  link="https://example.com"
/>

Price

import { Price } from '@biosai/front-end-components';

<Price price="100" legend="Price legend" />

ProductCard

import { ProductCard } from '@biosai/front-end-components';

<ProductCard
  title="Product Card"
  legend="Legend"
  price="100"
  priceLegend="Price legend"
/>

PresetCard

import { PresetCard } from '@biosai/front-end-components';

![PresetCard screenshot](public/images/preset-card.png)

<PresetCard
  title="Preset Card"
  logo={<YourLogo />}
  description="Description"
  buttonText="Click me"
  onButtonClick={() => {}}
/>

Chip

import { Chip } from '@biosai/front-end-components';

<Chip label="Chip" borderColor="border-primary" backgroundColor="bg-primary" />

ReviewCard

import { ReviewCard } from '@biosai/front-end-components';

<ReviewCard name="Reviewer" text="Review text" width="w-[350px]" />

Collapsible

import { Collapsible } from '@biosai/front-end-components';

<Collapsible title="Collapsible title" content="Collapsible content" />

PromptCard

import { PromptCard } from '@biosai/front-end-components';

<PromptCard title="Prompt Card" content="Prompt content" />

Header

import { Header } from '@biosai/front-end-components';

<Header logo={<YourLogo />} menuOptions={[]} />

Tabs

import { Tabs } from '@biosai/front-end-components';

<Tabs
  items={[
    { label: 'Dashboard', value: 'dashboard', content: <div>Dashboard content</div> },
    { label: 'Profile', value: 'profile', content: <div>Profile content</div> },
    { label: 'Settings', value: 'settings', content: <div>Settings content</div> },
    { label: 'Billing', value: 'billing', content: <div>Billing content</div> },
  ]}
  containerWidth="w-[40vw]"
/>

📝 Package Maintenance

NPM publish

To publish this package, you need to run the following commands:

npm login
npm run build
npm publish

Versioning

This package follows the Major-Menor-Patch versioning scheme:

• Major: Breaking changes
• Menor: New features
• Patch: Bug fixes

So if you are going to make breaking changes, you need to increment the major version. If you are going to add new features, you need to increment the minor version. And if you are going to fix bugs, you need to increment the patch version.

⚖️ License

ISC