A beautiful, accessible React component library built with Tailwind CSS and Framer Motion, organized as a Turborepo monorepo.

• Modern Stack: Built with React, TypeScript, Tailwind CSS, and Framer Motion
• Beautiful Components: Pre-built components with smooth animations and modern design
• Accessible: Built with accessibility in mind
• Documentation: Comprehensive documentation with live examples
• Monorepo Structure: Organized using Turborepo for optimal development experience

artic-ui/
├── apps/
│   └── app/          # Documentation site & examples
├── packages/
│   └── ui/           # Core UI component library
└── turbo.json        # Turborepo configuration

# Clone the repository
git clone https://github.com/yourusername/artic-ui.git

# Install dependencies
npm install

# Start development
npm run dev

npm install artic-ui @heroicons/react tailwindcss framer-motion

Add to your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/artic-ui/**/*.{js,ts,jsx,tsx}'
  ],
  // ... rest of your config
}

The documentation site is built using Next.js and includes:

• Component examples
• API documentation
• Interactive playgrounds
• Installation guides
• Effect demonstrations

Visit the documentation at: http://localhost:3000 when running locally

• Node.js 18+
• pnpm
• Git

# Start development
pnpm dev

# Build all packages
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint

The core UI library includes:

• Buttons
• Alerts
• Forms
• Cards
• Modals
• Navigation components
• And more...

Features:

• Interactive component demos
• Live code editing
• Copy-paste ready examples
• Comprehensive API documentation

The project uses Turborepo for efficient build caching and task running:

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

MIT

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

import { Button, Alert } from 'artic-ui'

function App() {
  return (
    <div>
      <Button variant="gradient">Click Me</Button>
      <Alert
        variant="success"
        message="Operation successful!"
      />
    </div>
  )
}

• React 18+
• Tailwind CSS 3+
• Framer Motion 10+
• Heroicons 2+
• TypeScript 5+

artic-ui/
├── apps/
│   └── app/
│       ├── src/
│       │   ├── components/    # Documentation components
│       │   ├── app/          # Next.js pages
│       │   └── styles/       # Global styles
├── packages/
│   └── ui/
│       ├── src/
│       │   ├── components/    # UI components
│       │   └── lib/          # Utilities
│       └── dist/             # Built package

For more detailed documentation, visit the documentation site or refer to the README files in individual packages.

npm install artic-ui @heroicons/react tailwindcss framer-motion

Add to your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/artic-ui/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

We welcome contributions to Artic-UI! Whether you want to:

• Add new components
• Improve existing ones
• Fix bugs
• Enhance documentation

1. Fork the repository: github.com/hothead01th/artic-ui
2. Create your feature branch: git checkout -b feature/amazing-component
3. Install dependencies: npm install
4. Make your changes
5. Test your changes: npm test
6. Commit your changes: git commit -m 'Add amazing component'
7. Push to the branch: git push origin feature/amazing-component
8. Submit a Pull Request

Current version: v0.0.6 Package: artic-ui on npm

import { Button, Alert } from 'artic-ui'

function App() {
  return (
    <div>
      <Button variant="gradient">Click Me</Button>
      <Alert variant="success">Operation successful!</Alert>
    </div>
  )
}

For more examples and documentation, visit our documentation site.

⚠️ This library is currently in beta. Only a subset of components is available on npm. However, you can still use other components by copying their code directly from our documentation. We're actively working on publishing all components.

This project is licensed under the MIT License. See the LICENSE file for details.