Care Access Component Library

UI components, typography and css vars.

Instructions

1. add "@care-components/*":["node_modules/care-access-astro-component-library/*"] t to your tsconfig.json

2. add presets: [require('./node_modules/care-access-astro-component-library/tailwind.careaccess-presets.mjs')], to your tailwind.config file.

module.exports = {
 corePlugins: {
   container: false,
 },
 content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", "./node_modules/care-access-astro-component-library/src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
 presets: [require('./node_modules/care-access-astro-component-library/tailwind.careaccess-presets.mjs')],

3. In globals.css, add: @use "care-access-presets"

Components

Button

Import:

import using: import Btn from "@care-components/button";

Button Types:

1. primary (solid),
2. secondary (secondary)

Button Colors

1. motion
2. sunrise
3. disabled

Props accepted:

1. text: string
2. url: string (Optional)
3. target?: string (Optional)
4. btnType: Options From Button Types;
5. btnColor: Option from ButtonColors;
6. compactBtn: Boolean (Default false)
7. icon: Boolean (Default false)

Example Usage

<Btn text="learn more" url='https://careaccess.com' icon btnColor='sunrise' btnType='primary' />

Typography