| Folder | Description |
|---|---|
/src/components/account |
styled components for the account section src/app/[locale]/(account) |
/src/components/common |
styled components shared between sections |
/src/components/crud |
components for CRUD (Create Read Update Delete) operations |
/src/components/developer |
styled components for the developer section src/app/[locale]/(developer) |
/src/components/storefront |
styled components for the storefront section src/app/[locale]/(storefront) |
/src/components/ui |
reusable styled components |
to use styled components import { } from '@/components/ui
Note: not all components have examples yet so some example links may not work
| import | Location | Examples | Description |
|---|---|---|---|
import { Badge } from '@/components/ui |
/src/components/ui/badge |
/--/ui/badge | Bootstrap style badges |
import { Button } from '@/components/ui |
/src/components/ui/button |
/--/ui/button | Bootstrap style buttons |
import { Currency } from '@/components/ui |
/src/components/ui/currency |
/--/ui/currency | Converts numbers to current locale currency (next-intl) |
import { Date } from '@/components/ui |
/src/components/ui/date |
/--/ui/date | Converts dates to current locale date (next-intl) |
import { useFlash } from '@/components/ui |
/src/components/ui/flash |
/--/ui/flash | Control Flash messages sent to user |
import { Form } from '@/components/ui |
/src/components/ui/form |
/--/ui/form | A full styled form library with simple yet powerful validation. This includes Checkbox, Checkbox Group, Date, File, Phone Number, Radio Group, Select, Text, Textarea, Boolean, Button, Label, Number, Password, Submit Buttons, and form validation |
import { Grid, Gridspan } from '@/components/ui |
/src/components/ui/grid and /src/components/ui/gridspan |
/--/ui/grid | Everything you need to control the layout of items |
import { Heading } from '@/components/ui |
/src/components/ui/heading |
/--/ui/heading | Simple styled headings |
import { Id } from '@/components/ui |
/src/components/ui/id |
/--/ui/id | Formatted Ids |
import { Image } from '@/components/ui |
/src/components/ui/image |
/--/ui/image | A next/image wrapper that adds some extra functions |
import { Link } from '@/components/ui |
/src/components/ui/link |
/--/ui/link | For link navigation with locale support from next-intl |
import { List } from '@/components/ui |
/src/components/ui/list |
/--/ui/list | Styled lists |
import { Loading } from '@/components/ui |
/src/components/ui/loading |
/--/ui/loading | Simple react style loading animations |
import { Navbar, NavItem } from '@/components/ui |
/src/components/ui/navbar |
/--/ui/navbar | A bootstrap style navbar for menus and navigation |
import { Page } from '@/components/ui |
/src/components/ui/page |
/--/ui/page | A simple responsive page wrapper |
import { Panel } from '@/components/ui |
/src/components/ui/panel |
/--/ui/panel | Bootstrap style panels |
import { Paragraph } from '@/components/ui |
/src/components/ui/paragraph |
/--/ui/paragraph | Styled paragraphs |
import { Slug, getSlug } from '@/components/ui |
/src/components/ui/slug |
/--/ui/slug | SEO friendly product and category urls |
import { Table } from '@/components/ui |
/src/components/ui/table |
/--/ui/table | Table |
import { Tooltip } from '@/components/ui |
/src/components/ui/tooltip |
/--/ui/tooltip | For styled tooltips |