Neat UI

A beautiful iOS-style React component library built with TailwindCSS.

Features

• iOS-style design system
• Mobile-first components
• Dark mode support
• TypeScript support
• Tree-shakeable
• Small bundle size

Installation

npm install @neat/ui
# or
yarn add @neat/ui
# or
pnpm add @neat/ui

Usage

1. Add the TailwindCSS configuration:

// tailwind.config.js
module.exports = {
  content: [
    // ...
    "./node_modules/@neat/ui/**/*.{js,ts,jsx,tsx}",
  ],
}

2. Import the styles in your app:

import '@neat/ui/styles.css'

3. Use the components:

import { Button, Card, Input } from '@neat/ui'

function App() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome</Card.Title>
        <Card.Description>Get started with Neat UI</Card.Description>
      </Card.Header>
      <Card.Content>
        <Input label="Name" placeholder="Enter your name" />
        <Button>Submit</Button>
      </Card.Content>
    </Card>
  )
}

Components

• Button - Interactive buttons with various styles and states
• Card - Content containers with flexible layouts
• Input - Form inputs with floating labels and validation states

Documentation

Visit our documentation site for detailed usage instructions and examples.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT [Your Name]