Av1-c NPM | npm.io

AV1-C

AV1-C is a library of React UI components for building AV1 products and related projects. The component library features seamless light and dark mode support.

Installation

# npm
npm install av1-c

# yarn
yarn add av1-c

# bun
bun add av1-c

Tailwind Setup

AV1-C uses Tailwind CSS for styling. Add the following to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    // ... your existing content
    "./node_modules/av1-c/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
}

Theme Support

Wrap your application with the ThemeProvider for proper dark/light mode support:

import { ThemeProvider } from "av1-c";

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

The ThemeProvider respects system preferences by default, but allows manual override through the useTheme hook:

import { useTheme, Button } from "av1-c";

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  
  return (
    <Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle Theme
    </Button>
  );
}

Component Usage

import { Card, Button, SchemaEditor } from "av1-c";

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Example Card</Card.Title>
      </Card.Header>
      <Card.Content>
        Content goes here
      </Card.Content>
      <Card.Footer>
        <Button>Action</Button>
      </Card.Footer>
    </Card>
  );
}

For complete documentation and examples, see the documentation site.