Skip to main content

Documentation Index

Fetch the complete documentation index at: https://archie.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Every Archie frontend ships with a component library — buttons, inputs, cards, dialogs, navigation, layout primitives. The library is based on shadcn/ui and lives directly in your project’s source code, so you can customize anything.

​
What’s in the library

The default component library includes:
  • Form primitives — Input, Textarea, Select, Checkbox, Radio, DatePicker
  • Layout — Card, Container, Stack, Grid, Sidebar, Header, Footer
  • Navigation — Tabs, Breadcrumb, Pagination, Menu, Drawer
  • Feedback — Alert, Toast, Modal, Confirm, Loading, Empty state
  • Data display — Table, List, Avatar, Badge, Tag, Tooltip
  • Action — Button, IconButton, Link, ActionMenu
These match shadcn/ui’s component names and APIs, with theming applied from your blueprint.

​
Where they live in code

Components are in components/ui/ for primitives and components/ for app-specific compositions. Each is a regular React file you can read and edit: 
components/
  ui/
    button.tsx
    card.tsx
    input.tsx
    ...
  app/
    OrderRow.tsx
    NavigationSidebar.tsx
    ...
Editing a UI primitive cascades to every place it is used. Editing an app-specific component affects only the instances that import it.

​
Customizing components

Three approaches:
  1. Visual editor — point and click, switch the inspector to Component scope to edit the underlying component instead of the instance.
  2. Talking to Archie — describe the change (“add an icon slot to the Button component, optional, before the text”).
  3. IDE — edit the component file directly. Saves apply live.
For changes that should affect every component (a new color, a new font, dark mode), use theming instead.

​
Adding your own components

You can write new components and use them anywhere. Add a file to components/, export the component, import it where you need it. The chat understands new components and can use them in subsequent edits.

​
Replacing the default library

If you want to swap out shadcn/ui for a different library (Material UI, Chakra, your own), the blueprint’s tech stack section is where you change it. Rebuild and the generated code uses the new library. See Editing tech stack.

​
Third-party components

To use a component from npm, install it normally and import it. The chat and visual editor both work with imported components. For components that have their own configuration (theme providers, context), the project’s root layout is where the provider goes — wrap once and use everywhere.

​
Generating new components from a description

Describe what you need in the chat: “Build a card that shows a stat (number + label + trend arrow) and use it three times across the dashboard.” Archie generates the new component, places it in components/, and uses it where you specified.