Charms UI

Charms UI is a modern React component library built with TypeScript and TailwindCSS. It supports on-demand imports and full type definitions for seamless integration in React projects.

Installation

npm install charms-ui

Quick Start

Import and use components in your React project:

import { Badge } from 'charms-ui';
// Or import on demand
import { Badge } from 'charms-ui/Badge';

export default function App() {
  return <Badge title={'visiters'} value={20003} leftBg='bg-gray-600' 
   rightBg='bg-red-600' href='http://www.techme365.com'></Badge>;
}

import { Recount } from 'charms-ui'
<Recount text={recountText} speed={200}
        delay={3000}
        onTypingStart={() => console.log('Typing started')}
        onTypingEnd={() => console.log('Typing ended')}
        className='text-xl font-bold'
        style={{ color: '#8b82f6' }}></Recount>

Components

• Badge
• More components coming soon...

On-demand Import

You can import components directly:

import { Badge } from 'charms-ui/Badge';

TypeScript Support

All components come with auto-generated TypeScript type definitions for better IDE experience.

Styling

Charms UI uses TailwindCSS for styling. You can customize Tailwind configuration in your own project.

Contributing

Contributions are welcome! Please submit issues and pull requests.

git clone https://github.com/your-org/charms-ui.git
npm install
npm run dev

License

MIT