@dravyn/ui

# npm npm install @dravyn/ui # yarn yarn add @dravyn/ui # pnpm pnpm add @dravyn/ui

// app/layout.tsx (Next.js) or main.tsx (Vite) import '@dravyn/ui/tokens'; // Then in any component file: import { Button, Card, Badge } from '@dravyn/ui';

import { Button } from '@dravyn/ui'; // Variants <Button variant="primary">Primary</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="danger">Danger</Button> // Sizes <Button size="sm">Small</Button> <Button size="lg">Large</Button> // Loading — disables and shows spinner <Button loading>Saving...</Button> // With icons <Button variant="primary" leftIcon={<IconBolt size={16} />}>Deploy</Button> <Button variant="danger" rightIcon={<IconTrash size={16} />}>Delete</Button> // Full width <Button fullWidth>Submit form</Button>

import { Badge } from '@dravyn/ui'; <Badge variant="teal" dot>Active</Badge> <Badge variant="red" dot>Error</Badge> <Badge variant="amber">Beta</Badge> <Badge variant="blue">Info</Badge> <Badge variant="green">Published</Badge> <Badge variant="purple">Pro</Badge> <Badge variant="gray">Archived</Badge>

import { Input } from '@dravyn/ui'; // With label and hint <Input label="Username" hint="Shown on your public profile." /> // Error state <Input label="Project slug" error="Slugs can't contain spaces." /> // With icon <Input label="Email" leftIcon={<IconMail size={15} />} type="email" /> // Required <Input label="Full name" required />

import { Textarea } from '@dravyn/ui'; <Textarea label="Bio" maxLength={160} showCount placeholder="Short bio..." /> <Textarea label="Message" error="Message is required." />

import { Card, CardHeader, CardFooter } from '@dravyn/ui'; <Card> <CardHeader title="Project name" description="Last updated 2 days ago." /> <CardFooter align="between"> <Button variant="ghost">Cancel</Button> <Button variant="primary">Save</Button> </CardFooter> </Card> // Featured — teal top accent <Card featured>...</Card> // Clickable <Card onClick={() => router.push('/project')}>...</Card>

import { Alert } from '@dravyn/ui'; <Alert variant="info" title="Heads up">Your key expires in 3 days.</Alert> <Alert variant="success" title="Deployed">v1.1 is live.</Alert> <Alert variant="warning" title="Approaching limit" onClose={() => hide()} /> <Alert variant="danger" title="Build failed">Check eas.json.</Alert>

import { Avatar } from '@dravyn/ui'; // Auto-generates initials + colour from name <Avatar name="Jeremiah Adeniyi" /> // From image URL — falls back to initials if image fails <Avatar name="Jeremiah Adeniyi" src="https://..." /> // Sizes <Avatar name="Jerry" size="xs" /> <Avatar name="Jerry" size="xl" /> // With status dot <Avatar name="Jeremiah Adeniyi" status="online" /> <Avatar name="Gabriel Akin" status="away" />

import { Toggle } from '@dravyn/ui'; // Uncontrolled <Toggle label="Dark mode" defaultChecked /> // Controlled const [on, setOn] = useState(false); <Toggle label="Notifications" checked={on} onChange={setOn} /> // Label on the left <Toggle label="Auto-save" labelPosition="left" />

import { Modal, Button } from '@dravyn/ui'; const [open, setOpen] = useState(false); <Button onClick={() => setOpen(true)}>Open</Button> <Modal open={open} onClose={() => setOpen(false)} title="Confirm deletion" description="This action cannot be undone." footer={ <> <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button> <Button variant="danger" onClick={handleDelete}>Delete</Button> </> } />

import { Spinner } from '@dravyn/ui'; <Spinner /> <Spinner size="sm" /> <Spinner size="lg" label="Fetching posts..." /> {isLoading ? <Spinner /> : <MyContent />}

/* globals.css — change the primary accent to your brand colour */ :root { --dui-teal-400: #6366f1; /* indigo instead of teal */ --dui-teal-600: #4f46e5; --dui-bg: #0f0f23; --dui-bg-raised: #1a1a2e; } /* Light mode — add data-theme="light" to your html tag */ document.documentElement.setAttribute('data-theme', 'light');