|
1 | 1 | # AV1-C |
2 | 2 |
|
3 | | -AV1-C is a library of React UI components for building AV1 products and related projects. |
| 3 | +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. |
4 | 4 |
|
5 | | -## Usage |
| 5 | +## Installation |
| 6 | + |
| 7 | +```bash |
| 8 | +# npm |
| 9 | +npm install av1-c |
| 10 | + |
| 11 | +# yarn |
| 12 | +yarn add av1-c |
| 13 | + |
| 14 | +# bun |
| 15 | +bun add av1-c |
| 16 | +``` |
| 17 | + |
| 18 | +## Tailwind Setup |
| 19 | + |
| 20 | +AV1-C uses Tailwind CSS for styling. Add the following to your `tailwind.config.js`: |
| 21 | + |
| 22 | +```js |
| 23 | +/** @type {import('tailwindcss').Config} */ |
| 24 | +module.exports = { |
| 25 | + darkMode: 'class', |
| 26 | + content: [ |
| 27 | + // ... your existing content |
| 28 | + "./node_modules/av1-c/**/*.{js,ts,jsx,tsx}", |
| 29 | + ], |
| 30 | + // ... rest of your config |
| 31 | +} |
| 32 | +``` |
| 33 | + |
| 34 | +## Theme Support |
| 35 | + |
| 36 | +Wrap your application with the ThemeProvider for proper dark/light mode support: |
6 | 37 |
|
7 | 38 | ```tsx |
8 | | -import { CodeEditor } from "av1-c"; |
| 39 | +import { ThemeProvider } from "av1-c"; |
| 40 | + |
| 41 | +function App() { |
| 42 | + return ( |
| 43 | + <ThemeProvider> |
| 44 | + <YourApp /> |
| 45 | + </ThemeProvider> |
| 46 | + ); |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | +The ThemeProvider respects system preferences by default, but allows manual override through the useTheme hook: |
| 51 | + |
| 52 | +```tsx |
| 53 | +import { useTheme, Button } from "av1-c"; |
| 54 | + |
| 55 | +function ThemeToggle() { |
| 56 | + const { theme, setTheme } = useTheme(); |
| 57 | + |
| 58 | + return ( |
| 59 | + <Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}> |
| 60 | + Toggle Theme |
| 61 | + </Button> |
| 62 | + ); |
| 63 | +} |
9 | 64 | ``` |
10 | 65 |
|
11 | | -... |
| 66 | +## Component Usage |
| 67 | + |
| 68 | +```tsx |
| 69 | +import { Card, Button, SchemaEditor } from "av1-c"; |
| 70 | + |
| 71 | +function MyComponent() { |
| 72 | + return ( |
| 73 | + <Card> |
| 74 | + <Card.Header> |
| 75 | + <Card.Title>Example Card</Card.Title> |
| 76 | + </Card.Header> |
| 77 | + <Card.Content> |
| 78 | + Content goes here |
| 79 | + </Card.Content> |
| 80 | + <Card.Footer> |
| 81 | + <Button>Action</Button> |
| 82 | + </Card.Footer> |
| 83 | + </Card> |
| 84 | + ); |
| 85 | +} |
| 86 | +``` |
12 | 87 |
|
13 | | -see the [docs](https://av1-c.up.railway.app/) for more information. |
| 88 | +For complete documentation and examples, see the [documentation site](https://av1-c.up.railway.app/). |
14 | 89 |
|
15 | 90 | ## Contributing |
16 | 91 |
|
|
0 commit comments