@anjun-brasil/design-system
v1.16.4
Published
Simple, Modular & Accessible UI Components.
Downloads
16
Readme
Anjun Brasil Design System
Sections
Installation
pnpm i tailwindcss postcss autoprefixer -DCreate a postcss.config.cjs file and paste this config.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};pnpm i @anjun-brasil/design-system @radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-avatar @radix-ui/react-checkbox cmdk @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-switch @radix-ui/react-select @radix-ui/[email protected] @radix-ui/react-tooltip lucide-react tailwind-variants date-fns react-day-pickerCreate a tailwind.config.ts file and extend the Design System theme.
import { defineTailwindConfig } from "@anjun-brasil/design-system";
export default defineTailwindConfig({
content: [
// Your content here
"./src/{app,screens,component}/**/*.{ts,tsx}",
],
// Rest of your custom TailwindCSS config
});Create a globals.css file at src/styles/globals.css.
After that, add the @tailwind directives for each Tailwind’s layers to your globals.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;Components
Accordion
import { Accordion } from "@anjun-brasil/design-system";
function Example() {
return (
<div className="m-auto grid min-h-screen w-full max-w-sm place-items-center">
<Accordion.Root className="w-full" type="single" collapsible>
<Accordion.Item value="item-1">
<Accordion.Trigger>Is it accessible?</Accordion.Trigger>
<Accordion.Content>
Yes. It adheres to the WAI-ARIA design pattern.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Is it styled?</Accordion.Trigger>
<Accordion.Content>
Yes. It comes with default styles that matches the other components'
aesthetic.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Is it animated?</Accordion.Trigger>
<Accordion.Content>
Yes. It's animated by default, but you can disable it if you prefer.
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</div>
);
}Alert Dialog
import { AlertDialog } from "@anjun-brasil/design-system";
function Example() {
return (
<AlertDialog.Root>
<AlertDialog.Trigger asChild>
<Button variant="danger">
<Trash />
Delete account
</Button>
</AlertDialog.Trigger>
<AlertDialog.Content>
<AlertDialog.Header>
<AlertDialog.Title>Are you sure absolutely sure?</AlertDialog.Title>
<AlertDialog.Description>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</AlertDialog.Description>
</AlertDialog.Header>
<AlertDialog.Footer>
<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
<AlertDialog.Action>Yes, delete it!</AlertDialog.Action>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Root>
);
}Avatar
import { Avatar } from "@anjun-brasil/design-system";
function Example() {
return (
<Avatar.Root>
<Avatar.Image
src="https://github.com/romarioCamposAnjun.png"
alt="Romário Campos"
/>
<Avatar.Fallback>RC</Avatar.Fallback>
</Avatar.Root>
);
}Button
import { Button } from "@anjun-brasil/design-system";
function Example() {
return <Button>Example button</Button>;
}Checkbox
import { Checkbox } from "@anjun-brasil/design-system";
function Example() {
return <Checkbox />;
}Command
import { useState, useEffect } from "react";
import { Command } from "@anjun-brasil/design-system";
function Example() {
const [open, setOpen] = useState(false);
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "k" && e.metaKey) {
setOpen((open) => !open);
}
};
document.addEventListener("keydown", down);
return () => document.removeEventListener("keydown", down);
}, []);
return (
<div className="grid place-items-center">
<p className="flex items-center justify-center gap-1 text-center text-xl">
Press{" "}
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium opacity-100">
<span className="text-xs">⌘</span>K
</kbd>
</p>
<Command.Dialog open={open} onOpenChange={setOpen}>
<Command.Input placeholder="Type a command or search..." />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>
<Calendar className="mr-2 h-4 w-4" />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Smile className="mr-2 h-4 w-4" />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<Calculator className="mr-2 h-4 w-4" />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<User className="mr-2 h-4 w-4" />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
<CreditCard className="mr-2 h-4 w-4" />
<span>Billing</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
<Command.Shortcut>⌘S</Command.Shortcut>
</Command.Item>
</Command.Group>
</Command.List>
</Command.Dialog>
</div>
);
}Dialog
import { Button, Dialog, TextField } from "@anjun-brasil/design-system";
function Example() {
const { toast } = useToast();
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<Button variant="outline">Edit Profile</Button>
</Dialog.Trigger>
<Dialog.Content className="sm:max-w-md">
<Dialog.Header>
<Dialog.Title>Edit profile</Dialog.Title>
<Dialog.Description>
Make changes to your profile here. Click save when you're done.
</Dialog.Description>
</Dialog.Header>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<label htmlFor="name" className="text-right">
Name
</label>
<TextField.Root className="col-span-3">
<TextField.Input id="name" placeholder="Your name" />
</TextField.Root>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<label htmlFor="username" className="text-right">
Username
</label>
<TextField.Root className="col-span-3">
<TextField.Input id="username" placeholder="Your username" />
</TextField.Root>
</div>
</div>
<Dialog.Footer>
<Button>Save changes</Button>
</Dialog.Footer>
</Dialog.Content>
</Dialog.Root>
);
}Select
import { Popover } from "@anjun-brasil/design-system";
function Example() {
return (
<Popover.Root>
<Popover.Trigger asChild>
<Button variant="outline" className="rounded-full p-3">
<Settings2 className="h-4 w-4" />
<span className="sr-only">Open popover</span>
</Button>
</Popover.Trigger>
<Popover.Content className="w-80">
<div className="grid gap-4">
<div className="space-y-2">
<h4 className="font-medium leading-none">Dimensions</h4>
<p className="text-muted-foreground text-sm">
Set the dimensions for the layer.
</p>
</div>
<div className="grid gap-2">
<div className="grid grid-cols-3 items-center gap-4">
<label htmlFor="width">Width</label>
<TextField.Root
id="width"
defaultValue="100%"
className="col-span-2 h-8"
>
<TextField.Input />
</TextField.Root>
</div>
<div className="grid grid-cols-3 items-center gap-4">
<label htmlFor="maxWidth">Max. width</label>
<TextField.Root
id="maxWidth"
defaultValue="300px"
className="col-span-2 h-8"
>
<TextField.Input />
</TextField.Root>
</div>
<div className="grid grid-cols-3 items-center gap-4">
<label htmlFor="height">Height</label>
<TextField.Root
id="height"
defaultValue="25px"
className="col-span-2 h-8"
>
<TextField.Input />
</TextField.Root>
</div>
<div className="grid grid-cols-3 items-center gap-4">
<label htmlFor="maxHeight">Max. height</label>
<TextField.Root
id="maxHeight"
defaultValue="none"
className="col-span-2 h-8"
>
<TextField.Input />
</TextField.Root>
</div>
</div>
</div>
<Popover.Close />
<Popover.Arrow />
</Popover.Content>
</Popover.Root>
);
}Select
import { Select } from "@anjun-brasil/design-system";
function Example() {
return (
<Select.Root>
<Select.Trigger>
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
<Select.Item value="blueberry">Blueberry</Select.Item>
<Select.Item value="grapes">Grapes</Select.Item>
<Select.Item value="pineapple">Pineapple</Select.Item>
</Select.Content>
</Select.Root>
);
}Skeleton
import { Skeleton } from "@anjun-brasil/design-system";
function Example() {
return <Skeleton size={48} />;
}Switch
import { Switch } from "@anjun-brasil/design-system";
function Example() {
return <Switch />;
}Table
import { Table } from "@anjun-brasil/design-system";
function Example() {
return (
<Table.Root>
<Table.Caption>A list of your recent invoices.</Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head>Invoice</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head>Method</Table.Head>
<Table.Head>Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell className="font-medium">INV001</Table.Cell>
<Table.Cell>Paid</Table.Cell>
<Table.Cell>Credit Card</Table.Cell>
<Table.Cell>$250.00</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
);
}Textarea
import { Textarea } from "@anjun-brasil/design-system";
function Example() {
return (
<form>
<Textarea placeholder="Your message" />
</form>
);
}TextField
import { TextField } from "@anjun-brasil/design-system";
function Example() {
return (
<form>
<TextField.Root>
<TextField.Input placeholder="Input" />
</TextField.Root>
</form>
);
}Toast
Pages folder:
src/\_app.tsx
import { ToastProvider } from "@anjun-brasil/design-system";
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<ToastProvider />
</>
);
}App folder:
app/layout.tsx
import { ToastProvider } from "@anjun-brasil/design-system";
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
{children}
<ToastProvider />
</body>
</html>
);
}Usage:
import { Button, useToast } from "@anjun-brasil/design-system";
export function Example() {
const { toast } = useToast();
function handleClick() {
toast({
title: "Toast title",
description: "Toast description",
status: "success",
});
}
return (
<main className="flex min-h-screen flex-col items-center justify-center">
<Button onClick={handleClick}>Show toast</Button>
</main>
);
}Tooltip
import { Tooltip } from "@anjun-brasil/design-system";
function Example() {
return (
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
variant="outline"
className="h-10 w-10 rounded-full p-0"
aria-label="Add"
>
<Plus size={16} />
</Button>
</Tooltip.Trigger>
<Tooltip.Content>
<p>Add to library</p>
</Tooltip.Content>
</Tooltip.Root>
);
}